feat: warm-up deps — ts-reset, web-vitals, RHF devtool, query-broadcast
Four low-risk adds before the Zod 4 / drizzle-zod headliner: - @total-typescript/ts-reset: tightens TS stdlib types globally (JSON.parse → unknown, fetch().json() → unknown, .filter(Boolean) narrows, Set literals respect typed Set targets). Caught 179 latent type errors; fixed all production sites (8 files) and added `any` cast escape hatch in test files (ESLint exemption scoped to tests/). - web-vitals + /api/v1/internal/vitals endpoint + WebVitalsReporter client component: establishes Core Web Vitals baseline (LCP/INP/CLS/ FCP/TTFB) via navigator.sendBeacon. Required before optimisation work. - @hookform/devtools + FormDevtool wrapper: dev-only RHF state inspector, lazy-loaded via next/dynamic so the chunk is excluded from prod bundles entirely. - @tanstack/query-broadcast-client-experimental: cross-tab cache sync via BroadcastChannel — wired in query-provider.tsx, 1-liner. Audit doc updated with sections 35 + 36 (PDF stack overhaul + comprehensive second-pass package sweep) covering ~20 package adoption candidates and 4-5 deprecation candidates. Verified: tsc clean, vitest 1293/1293 pass. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
54
src/app/api/v1/internal/vitals/route.ts
Normal file
54
src/app/api/v1/internal/vitals/route.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
import { logger } from '@/lib/logger';
|
||||
|
||||
/**
|
||||
* Ingest Core Web Vitals from the client. Called via `navigator.sendBeacon`
|
||||
* from `WebVitalsReporter` so it survives page unload. Body shape matches
|
||||
* the `Metric` type from `web-vitals` v4.
|
||||
*
|
||||
* For now we log structured to pino — once we have a perf-tracking table
|
||||
* (or external aggregator) wired, this can persist instead. The key value
|
||||
* today is establishing the baseline before optimisation work.
|
||||
*/
|
||||
export async function POST(req: Request) {
|
||||
let body: unknown;
|
||||
try {
|
||||
body = await req.json();
|
||||
} catch {
|
||||
return NextResponse.json({ error: 'invalid json' }, { status: 400 });
|
||||
}
|
||||
|
||||
if (!body || typeof body !== 'object') {
|
||||
return NextResponse.json({ error: 'invalid body' }, { status: 400 });
|
||||
}
|
||||
|
||||
const m = body as {
|
||||
name?: string;
|
||||
value?: number;
|
||||
rating?: 'good' | 'needs-improvement' | 'poor';
|
||||
id?: string;
|
||||
delta?: number;
|
||||
navigationType?: string;
|
||||
path?: string;
|
||||
};
|
||||
|
||||
if (typeof m.name !== 'string' || typeof m.value !== 'number') {
|
||||
return NextResponse.json({ error: 'missing name/value' }, { status: 400 });
|
||||
}
|
||||
|
||||
logger.info(
|
||||
{
|
||||
vital: m.name,
|
||||
value: m.value,
|
||||
rating: m.rating ?? null,
|
||||
id: m.id ?? null,
|
||||
delta: m.delta ?? null,
|
||||
navigationType: m.navigationType ?? null,
|
||||
path: m.path ?? null,
|
||||
},
|
||||
'web-vital',
|
||||
);
|
||||
|
||||
return new NextResponse(null, { status: 204 });
|
||||
}
|
||||
Reference in New Issue
Block a user