Every Angular call, to its server trace.

Two providers in app.config.ts. Every HttpClient call links to the server trace it started. Page views come from the router, and errors from your ErrorHandler, with zone.js unwrapped.

Set it up Quick start

2 providers: in app.config.ts
Angular 14+: standalone or NgModule
XHR or fetch: HttpClient traced either way

app.config.ts · Program.cs

// app.config.ts
const lens = initWizeLens({ endpoint: "/_wizelens" });
{ provide: ErrorHandler, useValue: createWizeLensErrorHandler(lens) },
provideAppInitializer(() => void trackAngularRouter(inject(Router), lens)),

// Program.cs
builder.Services.AddWizeLens();
app.UseWizeLens();

xhr /api/orders · 142 ms

xhr /api/orders142 ms

GET /api/orders118 ms

Handler OrdersController.Get104 ms

SELECT "o"."Id", "o"."Total" FROM "Orders"2.4 ms

GET billing-api/invoices?customerId=…61 ms

info Loaded 12 orders

What gets captured.

Everything below lands in the same trace as the request that caused it.

Requests

HttpClient, with or without withFetch()
traceparent on every fetch and XHR
Same origin, or what you allow

Page views

TTFB, FCP, LCP, INP, CLS
Slow and oversized images
Each NavigationEnd, after redirects
useHash: true too

Errors

Every error ErrorHandler gets
zone.js rejections unwrapped
Still logged like Angular's own
Uncaught errors and rejections

Logs

Browser console lines, 500 per page
Server logs in the same trace

Source maps

Minified stacks mapped to your source
Errors group by your source

Setup

Standalone: app.config.ts
NgModule: one ErrorHandler provider
Before Angular 19: the root constructor

Registered the Angular way.

HttpClient is covered either way.

HttpClient uses XMLHttpRequest unless you call withFetch(). WizeLens traces both, so every call carries a traceparent to your API.

Errors group by their real stack.

zone.js wraps promise rejections. The error handler unwraps them first, sends the error, then logs it like Angular's own.

createWizeLensErrorHandler(lens)

The path you land on.

Each NavigationEnd is a page view, named by its path after redirects. Before Angular 19, call it from your root component's constructor.

trackAngularRouter(router)

No Angular inside.

The package does not import @angular/*. It works from Angular 14 on and adds nothing but WizeLens to your bundle. You register its two parts yourself.

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.

.NET Node React and Next.js Vue Svelte Java Python Go