> ## 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 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.

<h2 id="what-it-collects">
  What it collects
</h2>

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

  <Card title="Breadcrumbs" icon="shoe-prints" href="/browser/breadcrumbs">
    Navigation, clicks, network requests, and console warnings and errors before each error. Collected automatically after `init()`.
  </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>

To see browser and back-end work in one [trace](/browser/distributed-tracing), 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.

<h2 id="where-to-find-it-in-appsignal">
  Where to find it in AppSignal
</h2>

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).

<h2 id="relation-to-appsignal-for-javascript">
  Relation to AppSignal for JavaScript
</h2>

If you use [`@appsignal/javascript`](/front-end), follow the [migration guide](/browser/migration) 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.

<h2 id="requirements">
  Requirements
</h2>

* 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.

<h2 id="next-steps">
  Next steps
</h2>

<CardGroup cols={2}>
  <Card title="Generate your snippet" icon="wand-magic-sparkles" href="https://appsignal.com/redirect-to/organization?to=sites/new/browser">
    Let AppSignal build the install code with your Front-end API key filled in.
  </Card>

  <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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.