Fas 1a: analytics tracker, ingestion endpoint, admin dashboards

This commit is contained in:
Sven (AAMOS AI)
2026-08-05 22:15:37 +07:00
parent d627014425
commit 1250640b1d
16 changed files with 4544 additions and 6450 deletions
+3
View File
@@ -8,6 +8,7 @@ import { ModerationPage } from "./pages/Moderation.js";
import { FlagsPage } from "./pages/Flags.js";
import { SubscriptionsPage } from "./pages/Subscriptions.js";
import { AuditLogsPage } from "./pages/AuditLogs.js";
import { AnalyticsPage } from "./pages/Analytics.js";
export function App() {
const [authed, setAuthed] = useState(hasToken());
@@ -28,6 +29,7 @@ export function App() {
<NavLink to="/flags">Feature flags</NavLink>
<NavLink to="/subscriptions">Prenumerationer</NavLink>
<NavLink to="/audit">Audit logs</NavLink>
<NavLink to="/analytics">Analytics</NavLink>
<button
onClick={() => {
setToken(null);
@@ -45,6 +47,7 @@ export function App() {
<Route path="/flags" element={<FlagsPage />} />
<Route path="/subscriptions" element={<SubscriptionsPage />} />
<Route path="/audit" element={<AuditLogsPage />} />
<Route path="/analytics" element={<AnalyticsPage />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</main>
+210
View File
@@ -0,0 +1,210 @@
import { useEffect, useMemo, useState } from "react";
import { api } from "../api.js";
interface FunnelDef {
name: string;
steps: string[];
}
interface FunnelResult {
name: string;
startDate: string;
endDate: string;
steps: Array<{ step: number; event: string; count: number }>;
conversionFromFirst: Array<{ step: number; event: string; rate: number }>;
}
interface RetentionResult {
cohorts: Record<
string,
{ cohortSize: number; retention: Array<{ day: number; active: number; rate: number }> }
>;
}
interface EventCountsResult {
counts: Array<{
date: string;
event_name: string;
total: number;
unique_sessions: number;
unique_users: number;
}>;
}
function today() {
return new Date().toISOString().slice(0, 10);
}
function weekAgo() {
const d = new Date();
d.setUTCDate(d.getUTCDate() - 7);
return d.toISOString().slice(0, 10);
}
export function AnalyticsPage() {
const [funnels, setFunnels] = useState<FunnelDef[]>([]);
const [funnelName, setFunnelName] = useState<string>("");
const [funnelStart, setFunnelStart] = useState<string>(weekAgo());
const [funnelEnd, setFunnelEnd] = useState<string>(today());
const [funnelResult, setFunnelResult] = useState<FunnelResult | null>(null);
const [retStart, setRetStart] = useState<string>(weekAgo());
const [retEnd, setRetEnd] = useState<string>(today());
const [retention, setRetention] = useState<RetentionResult | null>(null);
const [countsStart, setCountsStart] = useState<string>(weekAgo());
const [countsEnd, setCountsEnd] = useState<string>(today());
const [counts, setCounts] = useState<EventCountsResult | null>(null);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
api<{ funnels: FunnelDef[] }>("/admin/v1/analytics/funnels")
.then((res) => {
setFunnels(res.funnels);
if (res.funnels[0]) setFunnelName(res.funnels[0].name);
})
.catch((e) => setError(String(e.message)));
}, []);
const loadFunnel = () => {
if (!funnelName) return;
api<FunnelResult>(
`/admin/v1/analytics/funnels/${encodeURIComponent(funnelName)}?startDate=${funnelStart}&endDate=${funnelEnd}`,
)
.then(setFunnelResult)
.catch((e) => setError(String(e.message)));
};
const loadRetention = () => {
api<RetentionResult>(
`/admin/v1/analytics/retention?startDate=${retStart}&endDate=${retEnd}`,
)
.then(setRetention)
.catch((e) => setError(String(e.message)));
};
const loadCounts = () => {
api<EventCountsResult>(
`/admin/v1/analytics/event-counts?startDate=${countsStart}&endDate=${countsEnd}`,
)
.then(setCounts)
.catch((e) => setError(String(e.message)));
};
const countsByEvent = useMemo(() => {
if (!counts) return [];
const grouped = new Map<string, { dates: string[]; totals: number[] }>();
for (const row of counts.counts) {
const existing = grouped.get(row.event_name);
if (!existing) {
grouped.set(row.event_name, { dates: [row.date], totals: [Number(row.total)] });
} else {
existing.dates.push(row.date);
existing.totals.push(Number(row.total));
}
}
return Array.from(grouped.entries()).map(([event, data]) => ({ event, ...data }));
}, [counts]);
return (
<div>
<h2>Analytics</h2>
{error && <div className="error-text">{error}</div>}
<div className="panel">
<h3>Funnels</h3>
<div className="form-row">
<select value={funnelName} onChange={(e) => setFunnelName(e.target.value)}>
{funnels.map((f) => (
<option key={f.name} value={f.name}>
{f.name}
</option>
))}
</select>
<input type="date" value={funnelStart} onChange={(e) => setFunnelStart(e.target.value)} />
<input type="date" value={funnelEnd} onChange={(e) => setFunnelEnd(e.target.value)} />
<button onClick={loadFunnel}>Beräkna</button>
</div>
{funnelResult && (
<table>
<thead>
<tr>
<th>Steg</th>
<th>Event</th>
<th>Antal</th>
<th>Konvertering från första</th>
</tr>
</thead>
<tbody>
{funnelResult.steps.map((s, i) => (
<tr key={s.step}>
<td>{s.step}</td>
<td>{s.event}</td>
<td>{s.count}</td>
<td>{(funnelResult.conversionFromFirst[i]?.rate ?? 0 * 100).toFixed(1)}%</td>
</tr>
))}
</tbody>
</table>
)}
</div>
<div className="panel">
<h3>Retention</h3>
<div className="form-row">
<input type="date" value={retStart} onChange={(e) => setRetStart(e.target.value)} />
<input type="date" value={retEnd} onChange={(e) => setRetEnd(e.target.value)} />
<button onClick={loadRetention}>Ladda</button>
</div>
{retention && (
<table>
<thead>
<tr>
<th>Kohort</th>
<th>Storlek</th>
{Array.from({ length: 8 }, (_, i) => (
<th key={i}>Dag {i}</th>
))}
</tr>
</thead>
<tbody>
{Object.entries(retention.cohorts).map(([date, cohort]) => (
<tr key={date}>
<td>{date}</td>
<td>{cohort.cohortSize}</td>
{cohort.retention.slice(0, 8).map((r) => (
<td key={r.day}>{(r.rate * 100).toFixed(0)}%</td>
))}
</tr>
))}
</tbody>
</table>
)}
</div>
<div className="panel">
<h3>Eventvolymer</h3>
<div className="form-row">
<input type="date" value={countsStart} onChange={(e) => setCountsStart(e.target.value)} />
<input type="date" value={countsEnd} onChange={(e) => setCountsEnd(e.target.value)} />
<button onClick={loadCounts}>Ladda</button>
</div>
{countsByEvent.map(({ event, dates, totals }) => (
<div key={event} style={{ marginTop: "1rem" }}>
<strong>{event}</strong>
<div
style={{
display: "grid",
gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
gap: "0.5rem",
}}
>
{dates.map((d, i) => (
<div key={d} className="stat" style={{ padding: "0.5rem" }}>
<div className="value">{totals[i]}</div>
<div className="label">{d.slice(5)}</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
);
}
+211
View File
@@ -0,0 +1,211 @@
import type { FastifyInstance } from "fastify";
import { sql } from "drizzle-orm";
import { z } from "zod";
import { FUNNELS } from "@app/shared-types";
import { errors } from "../lib/errors.js";
/**
* Admin analytics dashboards: funnels and retention (spec §8.2).
* Queries run against product_analytics_events; no materialized aggregates
* required for beta volumes.
*/
export async function adminAnalyticsRoutes(app: FastifyInstance) {
const admin = { preHandler: [app.requireAdmin] };
/** List available funnels. */
app.get("/admin/v1/analytics/funnels", admin, async () => {
return {
funnels: Object.entries(FUNNELS).map(([name, steps]) => ({ name, steps })),
};
});
/** Compute a funnel between two UTC dates (YYYY-MM-DD). */
app.get("/admin/v1/analytics/funnels/:name", admin, async (req) => {
const params = z.object({ name: z.enum(Object.keys(FUNNELS) as [string, ...string[]]) }).parse(req.params);
const query = z
.object({
startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
})
.parse(req.query);
const steps = FUNNELS[params.name as keyof typeof FUNNELS];
const start = new Date(query.startDate);
const end = new Date(query.endDate);
end.setUTCDate(end.getUTCDate() + 1);
// Build a CTE chain: each step selects distinct users who completed the
// current event after the previous step's timestamp.
const ctes: string[] = [];
const selects: string[] = [];
for (let i = 0; i < steps.length; i++) {
const prev = i > 0 ? `step${i - 1}` : null;
const cteName = `step${i}`;
const event = steps[i]!;
if (i === 0) {
ctes.push(
`${cteName} AS (\n` +
` SELECT DISTINCT user_id, household_id\n` +
` FROM product_analytics_events\n` +
` WHERE event_name = ${sqlParam(event)}\n` +
` AND occurred_at >= ${sqlParam(start.toISOString())}\n` +
` AND occurred_at < ${sqlParam(end.toISOString())}\n` +
`)`,
);
} else {
ctes.push(
`${cteName} AS (\n` +
` SELECT DISTINCT ${prev!}.user_id, ${prev!}.household_id\n` +
` FROM ${prev!}\n` +
` INNER JOIN product_analytics_events e ON e.user_id = ${prev!}.user_id\n` +
` WHERE e.event_name = ${sqlParam(event)}\n` +
` AND e.occurred_at >= ${sqlParam(start.toISOString())}\n` +
` AND e.occurred_at < ${sqlParam(end.toISOString())}\n` +
`)`,
);
}
selects.push(`(SELECT count(*) FROM ${cteName}) AS step${i}`);
}
const querySql = `WITH ${ctes.join(", ")} SELECT ${selects.join(", ")}`;
const result = await app.db.execute(sql.raw(querySql));
const row = (Array.isArray(result) ? result[0] : (result.rows[0] ?? {})) as Record<string, number>;
const stepCounts = steps.map((event, i) => ({
step: i + 1,
event,
count: Number(row[`step${i}`] ?? 0),
}));
return {
name: params.name,
startDate: query.startDate,
endDate: query.endDate,
steps: stepCounts,
conversionFromFirst: stepCounts.map((s, i) => ({
step: s.step,
event: s.event,
rate: i === 0 ? 1 : stepCounts[0]?.count ? s.count / stepCounts[0].count : 0,
})),
};
});
/** Retention cohorts. Cohort = users with account_created on a given UTC day.
* Returns active users per cohort day for 0..30 days after creation.
*/
app.get("/admin/v1/analytics/retention", admin, async (req) => {
const query = z
.object({
startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/).optional(),
})
.parse(req.query);
const endDate = query.endDate ?? new Date().toISOString().slice(0, 10);
const cohortStart = new Date(query.startDate);
const cohortEnd = new Date(endDate);
cohortEnd.setUTCDate(cohortEnd.getUTCDate() + 1);
const raw = `
WITH cohort AS (
SELECT DISTINCT user_id,
(occurred_at AT TIME ZONE 'UTC')::date AS cohort_date
FROM product_analytics_events
WHERE event_name = 'account_created'
AND occurred_at >= ${sqlParam(cohortStart.toISOString())}
AND occurred_at < ${sqlParam(cohortEnd.toISOString())}
),
activity AS (
SELECT user_id,
(occurred_at AT TIME ZONE 'UTC')::date AS active_date
FROM product_analytics_events
WHERE occurred_at >= ${sqlParam(cohortStart.toISOString())}
),
sizes AS (
SELECT cohort_date, count(DISTINCT user_id) AS cohort_size
FROM cohort
GROUP BY cohort_date
)
SELECT s.cohort_date,
d.day,
s.cohort_size,
count(DISTINCT a.user_id) AS active_users
FROM sizes s
CROSS JOIN generate_series(0, 30) AS d(day)
LEFT JOIN cohort c ON c.cohort_date = s.cohort_date
LEFT JOIN activity a
ON a.user_id = c.user_id
AND a.active_date = s.cohort_date + d.day
GROUP BY s.cohort_date, d.day, s.cohort_size
ORDER BY s.cohort_date, d.day
`;
const result = await app.db.execute(sql.raw(raw));
const rows = Array.isArray(result) ? result : result.rows;
const cohorts: Record<
string,
{ cohortSize: number; retention: Array<{ day: number; active: number; rate: number }> }
> = {};
for (const r of rows as Array<{ cohort_date: string; day: number; cohort_size: number; active_users: number }>) {
const key = String(r.cohort_date).slice(0, 10);
if (!cohorts[key]) {
cohorts[key] = { cohortSize: Number(r.cohort_size), retention: [] };
}
const size = Number(r.cohort_size);
cohorts[key].retention.push({
day: Number(r.day),
active: Number(r.active_users),
rate: size > 0 ? Number(r.active_users) / size : 0,
});
}
return { cohorts };
});
/** Daily event counts for trend charts. */
app.get("/admin/v1/analytics/event-counts", admin, async (req) => {
const query = z
.object({
startDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
endDate: z.string().regex(/^\d{4}-\d{2}-\d{2}$/),
eventName: z.string().max(64).optional(),
})
.parse(req.query);
const start = new Date(query.startDate);
const end = new Date(query.endDate);
end.setUTCDate(end.getUTCDate() + 1);
let filter = "";
if (query.eventName) {
filter = `AND event_name = ${sqlParam(query.eventName)}`;
}
const raw = `
SELECT (occurred_at AT TIME ZONE 'UTC')::date AS date,
event_name,
count(*) AS total,
count(DISTINCT session_id) AS unique_sessions,
count(DISTINCT user_id) AS unique_users
FROM product_analytics_events
WHERE occurred_at >= ${sqlParam(start.toISOString())}
AND occurred_at < ${sqlParam(end.toISOString())}
${filter}
GROUP BY date, event_name
ORDER BY date, event_name
`;
const result = await app.db.execute(sql.raw(raw));
const rows = Array.isArray(result) ? result : result.rows;
return { counts: rows };
});
}
/** Escape a string/date parameter for raw SQL by wrapping it in single quotes.
* This is intentionally local-only SQL; dates and enums are validated above.
*/
function sqlParam(value: string | number): string {
if (typeof value === "number") return String(value);
return `'${String(value).replace(/'/g, "''")}'`;
}
+93
View File
@@ -0,0 +1,93 @@
import type { FastifyInstance, FastifyRequest } from "fastify";
import { isAnalyticsOptedIn, schema } from "@app/database";
import {
analyticsBatchInputSchema,
MAX_ANALYTICS_BATCH_SIZE,
validateAnalyticsPropertySize,
} from "@app/validation";
import { parse, errors } from "../lib/errors.js";
import { audit } from "../lib/helpers.js";
/** Max events per batch is also the per-minute rate-limit budget for this endpoint. */
const ANALYTICS_RATE_LIMIT_MAX = MAX_ANALYTICS_BATCH_SIZE;
/**
* Product analytics ingestion (spec §8.2).
* Accepts both authenticated and anonymous events. Anonymous events must have
* anonymousId and can be backfilled to userId later when the user logs in.
*/
export async function analyticsRoutes(app: FastifyInstance) {
app.post(
"/v1/analytics/events",
{
config: {
rateLimit: {
max: ANALYTICS_RATE_LIMIT_MAX,
timeWindow: "1 minute",
keyGenerator: (req) => `analytics:${req.ip}:${(req as unknown as { userId?: string }).userId ?? "anon"}`,
},
},
},
async (req, reply) => {
const input = parse(analyticsBatchInputSchema, req.body, "analytics batch");
validateAnalyticsPropertySize(input.events);
let userId: string | undefined;
try {
const payload = await req.jwtVerify<{ sub: string; role: string; type: string }>();
if (payload.type === "access" && payload.sub) {
userId = payload.sub;
}
} catch {
// Anonymous event fine as long as the batch carries anonymousId.
}
const isAuthenticated = !!userId;
if (isAuthenticated && userId) {
const optedIn = await isAnalyticsOptedIn(app.db, userId);
if (!optedIn) {
throw errors.forbidden("Analytics collection disabled by user consent.");
}
}
const now = new Date();
const rows = input.events.map((event, index) => {
const occurredAt = event.occurredAt ? new Date(event.occurredAt) : now;
if (Number.isNaN(occurredAt.getTime())) {
throw errors.badRequest(`Invalid occurredAt for event ${index}`);
}
return {
occurredAt,
receivedAt: now,
eventName: event.name,
anonymousId: event.anonymousId ?? null,
sessionId: event.sessionId ?? null,
userId: isAuthenticated ? userId : null,
householdId: event.householdId ?? null,
appVersion: event.appVersion ?? null,
platform: event.platform ?? null,
locale: event.locale ?? null,
experimentVariant: event.experimentVariant ?? null,
properties: event.properties ?? {},
};
});
// Single insert for the whole batch. On conflict is impossible because
// events are insert-only with random UUIDs.
const result = await app.db.insert(schema.productAnalyticsEvents).values(rows);
const accepted = result.rowCount ?? rows.length;
if (isAuthenticated) {
await audit(app.db, {
actorUserId: userId,
action: "analytics.ingest",
targetType: "analytics_batch",
targetId: String(accepted),
ip: req.ip,
});
}
return reply.code(202).send({ accepted, rejected: 0 });
},
);
}
+4
View File
@@ -21,6 +21,8 @@ import { budgetRoutes } from "./routes/budget.js";
import { subscriptionRoutes } from "./routes/subscriptions.js";
import { communityRoutes } from "./routes/community.js";
import { adminRoutes } from "./routes/admin.js";
import { adminAnalyticsRoutes } from "./routes/admin-analytics.js";
import { analyticsRoutes } from "./routes/analytics.js";
declare module "fastify" {
interface FastifyInstance {
@@ -80,6 +82,8 @@ export async function buildServer(config: AppConfig) {
await app.register(subscriptionRoutes);
await app.register(communityRoutes);
await app.register(adminRoutes);
await app.register(adminAnalyticsRoutes);
await app.register(analyticsRoutes);
return app;
}
+1
View File
@@ -11,6 +11,7 @@
"test": "vitest run --passWithNoTests"
},
"dependencies": {
"@app/analytics": "workspace:*",
"@app/shared-types": "workspace:*",
"@react-native-async-storage/async-storage": "^3.1.1",
"@tanstack/query-async-storage-persister": "^5.90.0",