Troubleshooting browser monitoring

​

No data arrives at all

To compare your setup against a known good snippet, generate one in the Browser SDK install flow. 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, 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.

​

Errors arrive, web vitals do not

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.

​

An error is missing

• 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 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. 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.
• It came from a script on another domain. Read the following section.

​

Cross-origin script errors are missing

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.

​

Backtraces are minified

Backtraces are resolved with 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.

​

One route produces hundreds of error groups

The route template 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.

​

Client-side navigation is not reported

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.

​

API requests fail after enabling distributed tracing

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.

​

A failed request shows no back-end spans

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 to read traceparent.

​

No failed requests are reported

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.

​

Network breadcrumbs have no timings

The request was cross-origin and the server sent no Timing-Allow-Origin header. Read more in reading network breadcrumbs.

​

Getting help

Include your app name, the @appsignal/browser version, and the browser and version where you see the problem. Reach us through our support channels, or in our Discord community for beta feedback.