Skip to main content
Browser monitoring is a beta AppSignal Labs feature. The @appsignal/browser package is published under the beta tag on npm, and its configuration and API may still change between beta releases. Share feedback in our Discord community.
Browser monitoring reports front-end errors with recent breadcrumbs and web vitals from real users. It is a separate section in AppSignal, alongside the traces, errors, and metrics your back-end integration reports. Data collection is handled by @appsignal/browser, a standalone package that does not depend on any other AppSignal package.

​
What it collects

Errors

Uncaught exceptions and unhandled promise rejections, with available stack traces, tags, and the route the user was on.

Breadcrumbs

Navigation, clicks, network requests, and console warnings and errors before each error. Collected automatically after init().

Web vitals

LCP, INP, CLS, FCP, and TTFB from real users, aggregated per route and comparable across releases.
To see browser and back-end work in one trace, configure both sides. The Browser SDK sends trace context. The receiving API service needs instrumentation to read it and report spans. A matching 5xx response or timeout can still produce a browser error. Without back-end instrumentation, its trace has no back-end spans.

​
Where to find it in AppSignal

The Browser section of your application has two views: Front-end errors are reported to the browser namespace, which keeps them out of your back-end error lists and notification settings. For what browser monitoring covers as a feature, see the browser monitoring overview.

​
Relation to AppSignal for JavaScript

If you use @appsignal/javascript, follow the migration guide when moving to @appsignal/browser. The new SDK has a different API. It collects breadcrumbs and web vitals after init() and reports errors to the browser namespace.

​
Requirements

  • A browser that supports ES2020. The package targets ES2020 and does not ship polyfills.
  • CLS and INP require the browser’s layout-shift and event-timing performance entry types, respectively. The SDK skips either metric when its entry type is unavailable.
Optional: React 16.8 or later, if you want to use the error boundary shipped with the package.

​
Next steps

Generate your snippet

Let AppSignal build the install code with your Front-end API key filled in.

Install the package

Add @appsignal/browser to your application and start reporting.

Configuration options

Every option, its type, and its default.

Filter what you send

Scrub URLs, mask elements, and gate collection on user consent.

Migrate from AppSignal for JavaScript

Map the old API onto the new one.