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.

​
No data arrives at all

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 the module that calls init() is actually imported by your entry point, and that a tree-shaking build has not dropped it.
  3. The key is wrong. A wrong key returns 401. Check you are using the Front-end API key, not one of the Push keys, and that it belongs to this app rather than your staging or production one.
  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. With no endpoint, the SDK posts to the current origin, which only works if you proxy AppSignal traffic through your own 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 are Chromium-only.

​
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 anything falsy 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.

​
Errors show up with no message or stack

If your JavaScript is served from a CDN and no errors arrive at all, this is the usual cause. The browser hides the details of errors from scripts on another domain, leaving only the message Script error., and the SDK throws those away. 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 each URL groups on its own. Call setRouteTemplate("/orders/:id") on every router navigation, and errors regroup from that deploy onwards. The Performance view has the same problem, where it also counts against the ingestion limit on distinct routes.

​
Client-side navigation is not reported

The SDK and most routers both patch history.pushState. The SDK composes with a patch that is already installed, but a router that loads first and replaces the SDK’s patch breaks the chain. 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.

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