Install the browser agent in one of two ways: load it from the Atatus CDN with a script tag, or install the npm packages and bundle it with your application. Either way, initialize it as early as your application starts.

Use the CDN when you want to add monitoring without changing your build, or when your pages are not built with a bundler at all. Use npm when you want the agent versioned alongside your application code.

Before you start

You need an Atatus RUM application and its license key. For the npm route you also need a build tool that resolves npm packages.

Install from the CDN

Load the RUM agent, and the logs agent if you want browser logs, as high in your <head> as you can. Loading them early is what lets the agent capture errors and resources from the very start of the page:

<script crossorigin src="https://js-cdn.atatus.io/atatus-browser-agent/latest/atatus-rum.js"></script>
<script crossorigin src="https://js-cdn.atatus.io/atatus-browser-agent/latest/atatus-logs.js"></script>

Keep the crossorigin attribute. Session replay loads its recorder as a separate module at runtime, and the browser can only work out where that module lives when the script itself was fetched with CORS. Without the attribute, RUM still reports and nothing appears broken, but session replay never starts.

Each script exposes a global you initialize right after:

<script>
  window.ATATUS_RUM.init({
    licenseKey: '<license-key>',
    appName: '<app-name>',
    env: 'production',
    version: '2026.9.1',
    sessionSampleRate: 100,
    sessionReplaySampleRate: 30,
    trackUserInteractions: true,
    trackResources: true,
    trackLongTasks: true,
    defaultPrivacyLevel: 'mask-user-input',
  });

  window.ATATUS_LOGS.init({
    licenseKey: '<license-key>',
    appName: '<app-name>',
    env: 'production',
    sessionSampleRate: 100,
    forwardErrorsToLogs: true,
    forwardConsoleLogs: 'all',
  });
</script>

The latest path always serves the newest release, so you pick up new versions without editing your pages. To pin a version instead, swap latest for the version you want:

<script crossorigin src="https://js-cdn.atatus.io/atatus-browser-agent/v1.0.0/atatus-rum.js"></script>

A pinned version is never changed once published, so it is the safer choice when you need a release to stay exactly as you tested it.

Note:

If your site sends a Content Security Policy, allow js-cdn.atatus.io in script-src and rum-rx.atatus.com in connect-src. Session replay also needs sr-rx.atatus.com, and browser logs need log-rx.atatus.com. If you set site to a non-default region, allow that region's intake hosts instead: see Choose your region.

Install with a bundler

Install with a bundler

Install the RUM package, and the logs package if you want browser logs:

$ npm install @atatus/browser-rum @atatus/browser-logs

Initialize both SDKs once, as early as your application starts. Put this before your app renders so nothing is missed:

import { atatusRum } from '@atatus/browser-rum';
import { atatusLogs } from '@atatus/browser-logs';

atatusRum.init({
  licenseKey: '<license-key>',
  appName: '<app-name>',
  env: 'production',
  version: '2026.9.1',
  sessionSampleRate: 100,
  sessionReplaySampleRate: 30,
  trackUserInteractions: true,
  trackResources: true,
  trackLongTasks: true,
  defaultPrivacyLevel: 'mask-user-input',
});

atatusLogs.init({
  licenseKey: '<license-key>',
  appName: '<app-name>',
  env: 'production',
  sessionSampleRate: 100,
  forwardErrorsToLogs: true,
  forwardConsoleLogs: 'all',
});

Next steps