> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appsignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AppSignal for Browser

<Note>
  Browser monitoring is a beta [AppSignal Labs](/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](https://discord.gg/EjF6ykYx63).
</Note>

Browser monitoring reports what happens in your users' browsers: front-end errors with the trail of events that led up to them, and Core Web Vitals measured on real page loads. 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

<CardGroup cols={3}>
  <Card title="Errors" icon="bug" href="/browser/error-tracking">
    Uncaught exceptions and unhandled promise rejections, with stack traces, tags, and the route the user was on.
  </Card>

  <Card title="Breadcrumbs" icon="shoe-prints" href="/browser/breadcrumbs">
    An automatic timeline of navigation, selections, network calls, and console output before each error. No setup needed.
  </Card>

  <Card title="Web vitals" icon="gauge" href="/browser/web-vitals">
    LCP, INP, CLS, FCP, and TTFB from real users, aggregated per route and comparable across releases.
  </Card>
</CardGroup>

## Where to find it in AppSignal

The Browser section of your application has two views:

* **Errors** groups front-end errors into issues you can triage. Read more in [front-end errors in AppSignal](/browser-monitoring/errors).
* **Performance** summarizes the five web vitals and breaks them down per route. Read more in [front-end performance in AppSignal](/browser-monitoring/performance).

Front-end errors are reported to the `browser` [namespace](/guides/namespaces), 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](/browser-monitoring).

## Relation to AppSignal for JavaScript

`@appsignal/browser` replaces [`@appsignal/javascript`](/front-end) and its plugin packages. It is not a drop-in upgrade: the API is different, breadcrumbs and web vitals are collected without configuration, and errors are reported to the `browser` namespace instead of `frontend`. The old package keeps working, but new features only land in the new one. The [migration guide](/browser/migration) maps the old API onto the new one.

## Requirements

* A browser that supports ES2020. The package targets ES2020 and does not ship polyfills.
* CLS and INP need Chromium's `layout-shift` and `event-timing` performance entry types. Other browsers report LCP, FCP, and TTFB only.

**Optional**: React 16.8 or later, if you want to use the error boundary shipped with the package.

## Next steps

<CardGroup cols={2}>
  <Card title="Install the package" icon="download" href="/browser/installation">
    Add `@appsignal/browser` to your application and start reporting.
  </Card>

  <Card title="Configuration options" icon="sliders" href="/browser/configuration">
    Every option, its type, and its default.
  </Card>

  <Card title="Filter what you send" icon="shield" href="/browser/privacy">
    Scrub URLs, mask elements, and gate collection on user consent.
  </Card>

  <Card title="Migrate from AppSignal for JavaScript" icon="arrow-right-arrow-left" href="/browser/migration">
    Map the old API onto the new one.
  </Card>
</CardGroup>