Browser Error Tracking

The browser agent collects uncaught exceptions, unhandled promise rejections, and failed requests as soon as you initialize it. There is nothing to turn on. Everything else, such as an error you caught and handled, you report yourself. This page covers reporting errors manually and catching the ones frameworks swallow.

What is collected automatically

Once atatusRum.init() has run, the agent reports:

Uncaught exceptions that reach window.onerror.
Unhandled promise rejections.
Failed network requests, when you set trackResources.
Console errors, when you forward them through Logs.

Each error is attached to the view and session it happened in, so you can see what the user was doing when it broke.

Report an error yourself

When you catch an error and handle it, the agent never sees it. Report it with addError, and pass any context that will help you triage:

try {
  await submitPayment(order);
} catch (err) {
  atatusRum.addError(err, {
    checkoutStep: 'payment',
    orderId: order.id,
  });
  showFailureMessage();
}

You can also report a condition that is not an Error object, by wrapping it:

atatusRum.addError(new Error('Coupon rejected'), { code: 'EXPIRED' });

Pass an Error object rather than a string wherever you can. The agent reads the stack trace from the error, and a string has none.

Catch React render errors

React catches errors thrown during rendering and unmounts the tree, so they never reach window.onerror and the agent cannot see them. Use the error boundary from the React package:

import { ErrorBoundary } from '@atatus/browser-rum-react';

<ErrorBoundary fallback={ErrorFallback}>
  <App />
</ErrorBoundary>

If you already have your own boundary, report from it instead:

import { addReactError } from '@atatus/browser-rum-react';

componentDidCatch(error, info) {
  addReactError(error, info);
}

See Framework Integrations for the rest of the React setup.

Record a replay when an error happens

Recording every session is expensive, and most sessions are uneventful. Record only the ones that break by starting replay from your error handler:

atatusRum.init({
  licenseKey: '<license-key>',
  appName: '<app-name>',
  serverUrl: 'YOUR_ON_PREMISE_URL',
  startSessionReplayRecordingManually: true,
});

// In your error boundary or global handler.
function onError(err) {
  atatusRum.startSessionReplayRecording();
  atatusRum.addError(err);
}

See Session Replay for the recording options.

Add context to every error

Anything you set as global context is attached to every event, including errors. This is useful for details that are true for the whole session:

atatusRum.setGlobalContext({ deployment: 'canary' });
atatusRum.setGlobalContextProperty('tenantRegion', 'eu');

To attribute errors to a person or an account, see User and account context.

Next steps

Session Replay: watch the session an error happened in.
Logs: forward console errors alongside RUM errors.
API Reference: the full method list.

​What is collected automatically

​Report an error yourself

​Catch React render errors

​Record a replay when an error happens

​Add context to every error

​Next steps

What is collected automatically

Report an error yourself

Catch React render errors

Record a replay when an error happens

Add context to every error

Next steps