Page loads
- TTFB, FCP, LCP, INP, CLS
- SSR and hydration
- Slow images
- Joins the server trace
From the click to the database.
Every fetch links to the server trace it started. Page loads join the server that rendered them. Renders, hydration, and Web Vitals are timed, and the HUD sits in the corner of your page.
- 1 provider
- in React
- 2 files
- in Next.js, no route file
- React 18+
- App Router or Pages
// instrumentation.ts registerWizeLens({ serviceName: "web" }); // app/layout.tsx import "@wizeworks/lens-react/install"; <WizeLensProvider endpoint="/_wizelens">
page load /products/42412 ms
GET /products/[id]164 ms
SELECT * FROM products WHERE id = $13.1 ms
render ProductPage (server)38 ms
hydration52 ms
fetch /api/reviews88 ms
<ReviewList /> × 3 renders11 ms
What gets captured.
Everything below lands in the same trace as the request that caused it.
Requests
- traceparent on every fetch
- Real render time, to the next paint
- Same origin, or what you allow
Components
- Render time per component
- Components that render too often
Next.js
- One trace per request, by route
- Render, route handler, and fetch steps
- Server errors from onRequestError
Errors and logs
- Browser errors
- Browser console lines
- Server errors in the same trace
The HUD
- Total, server, database, render
- Health color in the corner
- One click to the full trace
The front end is half the story.
The click starts the trace.
Each fetch carries a traceparent, so the server trace begins at the button that was clicked, not at the API.
Render time is real.
Measured from the response to the next paint: reading the body, your code, React's render, and the paint itself.
Next.js steps, not noise.
Each request is one trace named by its route, with Next.js's own render, route handler, and fetch steps inside. Static files and hot reload are left out.
Import it first.
The install import must come before React loads. That is how WizeLens times each component and measures hydration.
import "@wizeworks/lens-react/install";Mixing stacks? One trace across all of them.
A React front end, a .NET gateway, and a Node service follow the same rules and join the same trace.