Requests
- traceparent on every fetch and XHR
- Same origin, or what you allow
- Joins the server trace
One trace, from server to page view.
Two lines in hooks.client.ts, one in your root layout. Every fetch links to the server trace it started, the first page load joins the server that rendered it, and errors carry their route.
- 2 files
- hooks.client.ts and +layout.svelte
- 1 trace
- for the first load and its server
- Plain Svelte
- and svelte-spa-router too
// src/hooks.client.ts initWizeLens({ endpoint: "/_wizelens", enabled: dev }); export const handleError = createHandleError(); // src/routes/+layout.svelte trackSvelteKitNavigation(afterNavigate);
pageview /products/{}480 ms
GET /products/42140 ms
SELECT * FROM products WHERE id = $12.8 ms
fetch GET inventory/stock/4262 ms
warn no price for sku 42
TypeError: price is undefined · /products/[id]
What gets captured.
Everything below lands in the same trace as the request that caused it.
Page views
- TTFB, SSR, FCP, LCP, INP, CLS
- Slow and oversized images
- Each client-side navigation
The first load
- Joins the server's trace of that page
- When the server runs @wizeworks/lens-node
Errors
- Errors from handleError
- With route id and status
- Uncaught errors and rejections
Logs
- Browser console lines, 500 per page
- Server logs in the same trace
Plain Svelte
- trackNavigation() in main.ts
- Hash mode for svelte-spa-router
- Back, forward, and hash changes
Passed in, not patched in.
One trace from server to browser.
When your SvelteKit server runs WizeLens for Node, the first page load joins the server's trace: the render, its queries, and the page's Web Vitals together.
Errors know their route.
createHandleError sends each client error with its route id, like /products/[id], then runs your own handler.
createHandleError(({ message }) => ({ message }))SvelteKit's functions, handed over.
The package does not import svelte or $app/*. You pass it afterNavigate, and each client-side navigation is a page view. The first load already is one.
trackSvelteKitNavigation(afterNavigate)No SvelteKit? Still one line.
In a plain Svelte app, call trackNavigation() after initWizeLens. Hash mode covers svelte-spa-router.
trackNavigation({ mode: "hash" })Mixing stacks? One trace across all of them.
A Vue front end, a .NET gateway, a Node service, and a Python worker join the same trace, and the same insights run on all of it.