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

# Troubleshooting browser monitoring

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

<h2 id="no-data-arrives-at-all">
  No data arrives at all
</h2>

To compare your setup against a known good snippet, [generate one in the Browser SDK install flow](https://appsignal.com/redirect-to/organization?to=sites/new/browser).

Work through these in order. Each one is a complete stop: nothing is sent when it applies.

1. **`active` resolves to `false`.** Log the value you pass, rather than the expression. A bundler that does not replace `process.env.NODE_ENV` leaves the comparison `false` in the browser.
2. **`init()` never ran.** Setting configuration is not enough. Confirm your entry point imports the module that calls `init()`. Check that your build includes it.
3. **The key is wrong.** A wrong key returns `401`. Use this app's [Front-end API key](/browser/installation#find-your-front-end-api-key), not a Push key. Check that it belongs to the right environment.
4. **Requests are blocked.** Open your browser's network panel and look for a request to `/ingest/browser/errors` for errors, or `/ingest/browser` for web vitals. A blocked request shows as a Content Security Policy violation in the console: add `https://appsignal-endpoint.net` to your `connect-src` directive.
5. **`endpoint` is not set.** Without `endpoint`, the SDK posts to the current origin. That requires a proxy on your domain. Set it to `https://appsignal-endpoint.net` otherwise.

<h2 id="errors-arrive-web-vitals-do-not">
  Errors arrive, web vitals do not
</h2>

Web vitals are batched, not sent per measurement. They are sent when the page is hidden, when it is closed, and on a client-side route change. Navigate away or switch tabs, then check the Performance view again.

If they still do not appear, check whether the missing metrics are CLS and INP specifically. Those two need browser performance entries that may be [unavailable](/browser/web-vitals#browser-support).

<h2 id="an-error-is-missing">
  An error is missing
</h2>

* **It happened before `init()` ran.** Nothing that throws before then is captured. Import your AppSignal setup as the first import in your entry point.
* **It was a repeat.** Check the [rate limits](/browser/error-tracking#rate-limits) on identical and total errors.
* **It was sampled out.** Check whether `errors.sampleRate` is below `1.0`.
* **`beforeError` dropped it.** A callback that returns `null` drops the error. Log the event at the top of the callback to confirm what it receives.
* **It was thrown inside an [iframe](/browser/error-tracking#errors-that-are-not-reported).** A same-origin iframe needs its own `init()` call.
* **It was a React render error.** React does not let render errors reach `window`. Add an [error boundary](/browser/react).
* **It came from a script on another domain.** Read the following section.

<h2 id="errors-show-up-with-no-message-or-stack">
  Cross-origin script errors are missing
</h2>

If errors from a script hosted on another origin are missing, check its cross-origin settings. The browser may expose only `Script error.` for cross-origin scripts. The SDK drops these opaque errors. Fix it by serving those scripts with CORS headers, as described in [assets hosted on a CDN](/browser/installation#assets-hosted-on-a-cdn).

<h2 id="backtraces-are-minified">
  Backtraces are minified
</h2>

Backtraces are resolved with [sourcemaps](/front-end/sourcemaps), matched on the revision string. Set `appVersion` to the same value your build uses for its sourcemaps. Without `appVersion`, there is nothing to match on and backtraces stay minified.

<h2 id="one-route-produces-hundreds-of-error-groups">
  One route produces hundreds of error groups
</h2>

The [route template](/browser/installation#report-the-current-route) is missing, so errors use each page's raw path. Call `setRouteTemplate("/orders/:id")` on every router navigation. New errors then group under that template. The server derives an approximate template for web vitals. An explicit template is more reliable and helps avoid the distinct-route limit.

<h2 id="client-side-navigation-is-not-reported">
  Client-side navigation is not reported
</h2>

The SDK and some routers both patch `history.pushState`. The SDK composes with an existing patch. A router that later replaces the SDK's patch can break navigation tracking. Import your AppSignal setup before your router.

Hash routers are only treated as routers when the hash looks like a route, such as `#/orders`. A bare `#orders` hash is indistinguishable from an in-page anchor and is not treated as a navigation.

<h2 id="api-requests-fail-after-enabling-distributed-tracing">
  API requests fail after enabling distributed tracing
</h2>

A cross-origin request carrying `traceparent` may need a CORS preflight. If your browser reports a CORS error naming `traceparent`, allow that header in your API's `Access-Control-Allow-Headers`. Read more in [distributed tracing for Browser](/browser/distributed-tracing#enable-it).

<h2 id="a-failed-request-shows-no-back-end-spans">
  A failed request shows no back-end spans
</h2>

The error arrived, but its trace has only the browser span. Check that the receiving service reports through a hosted collector. Its HTTP server also needs the [right instrumentation package](/browser/distributed-tracing#before-you-start) to read `traceparent`.

<h2 id="no-failed-requests-are-reported">
  No failed requests are reported
</h2>

Requests to your API fail, but no `HTTPError` or `TimeoutError` issue appears. Check that each request matches a pattern in `tracePropagationTargets`. A pattern needs a host and a path: `/api/**` and `api.example.com` both match nothing. Some failures are never reported:

* A request made in `no-cors` mode.
* A 4xx response.
* A request matching `privacy.networkBlocklist`.
* A timeout while the device is offline.

Read more in [what is reported](/browser/distributed-tracing#what-is-reported).

<h2 id="network-breadcrumbs-have-no-timings">
  Network breadcrumbs have no timings
</h2>

The request was cross-origin and the server sent no `Timing-Allow-Origin` header. Read more in [reading network breadcrumbs](/browser/breadcrumbs#reading-network-breadcrumbs).

<h2 id="getting-help">
  Getting help
</h2>

Include your app name, the `@appsignal/browser` version, and the browser and version where you see the problem. Reach us through [our support channels](/support), or in our [Discord community](https://discord.gg/EjF6ykYx63) for beta feedback.


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