Brief
A developer tooling package that bridges the visibility gap in Next.js App Router development. During development, server-side data — database results, API calls, timing, headers, cache behavior — is normally invisible in the browser. This package surfaces it in a structured, interactive panel without touching your production build. Designed to integrate in under five minutes and stay out of your way. Supports Prisma, Drizzle, server actions, and middleware out of the box. Published to npm.
Challenge
- Server-side data in Next.js App Router has no native browser visibility during development
- Concurrent request handling requires strict per-request isolation
- Six entry points with zero circular dependencies and zero runtime external dependencies
Approach
- Request-scoped entry system with automatic source tracking and structured span relationships
- Auto-instrumentation for fetch, ORMs, server actions, and middleware with a single config wrapper
- Client bundle kept under 10KB gzipped — everything rendered with inline styles and inline SVG
Outcome
- Published to npm at v1.0.1
- 71 tests across 5 test files with CI bundle size gate
- Editor deep linking into VS Code, Cursor, and WebStorm from the panel