Session Replay for Angular Apps

Angular session replay needs no Angular-specific package: install @anyreplay/browser, create the recorder once in its own file, and import that file from main.ts before bootstrapApplication. Angular Router navigation with the default path strategy is recorded automatically.

There is no dedicated Angular SDK or Angular docs page. This page applies the browser SDK's generic npm behaviour to Angular's structure, so test a session in your own app before you ship it.

Why add session replay to an Angular app

Angular apps are often large forms and multi-step flows: onboarding, quotes, checkouts, admin screens. When people drop out, analytics shows the step; a recording shows what happened on it, such as a validation message nobody noticed or a disabled button that never enabled. Product managers use recordings to see a flow as users experience it, and why users abandon checkout shows what to look for. The recorder captures a DOM snapshot and changes after it, applies masking in the browser before anything is sent, and never records script bodies.

How to install session replay in Angular

npm install @anyreplay/browser

import { createRecorder } from '@anyreplay/browser';

export const recorder = createRecorder({
  projectKey: 'YOUR_PROJECT_KEY',
});

import { bootstrapApplication } from '@angular/platform-browser';
import './anyreplay'; // start recording before the app boots
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig);

An ES module is evaluated once, so the recorder is created once. createRecorder does not guard against a second call, so avoid calling it in a component constructor or ngOnInit. Wrapping the exported handle in an injectable service is fine, as long as the service imports it rather than creating a new recorder. The project key is public, so keeping it in source or an environment file is safe.

What about server-side rendering?

The recorder needs a real document, so with @angular/ssr it must only be created in the browser. Do not import src/anyreplay.ts from code that also runs on the server. Instead, load it dynamically once rendering has happened in the browser, for example:

import { Component, afterNextRender } from '@angular/core';

@Component({ selector: 'app-root', templateUrl: './app.component.html' })
export class AppComponent {
  constructor() {
    afterNextRender(() => {
      void import('../anyreplay'); // browser only; the module still runs once
    });
  }
}

A check with isPlatformBrowser before the dynamic import works the same way. Because a module is evaluated once, repeated imports still create a single recorder.

Are Angular Router changes recorded?

With the default PathLocationStrategy, the Angular Router uses the History API, which the recorder watches. Each real URL change becomes a page view with a $navigate marker on the timeline. With HashLocationStrategy, open a test session and check the route markers are there; if they are missing, add a track call from a NavigationEnd subscription. See single-page apps.

How do I keep sensitive data out of recordings?

• What people type into reactive and template-driven form controls is masked by default. Pass maskAllInputs: false to record field values, or maskAllTyping: true to mask rich-text editors as well.
• Passwords, one-time codes and payment fields are masked in every configuration; no option records them. type="email" and type="tel" inputs are not on that floor: they are ordinary fields, masked by default and recorded once you opt out.
• Add class="ar-mask" to elements that display personal data, such as <span class="ar-mask">{{ customer.email }}</span>, or to a single control to mask its value.
• Add class="ar-block" to a component host or section that should not be recorded at all.
• Use recorder.track('quote_submitted') from handlers to mark steps, but keep personal data out of event properties.

For a consent banner, create the recorder with requireConsent: true and call recorder.consent(true) when the visitor agrees, on each page load for visitors who already did.

Can I use the script tag instead?

Yes. Paste the snippet from your project into the <head> of src/index.html and call window.anyreplay('track', …) where you need events. It loads asynchronously and queues calls made before the recorder arrives. Details are in install with a script tag.

<script>
(function (w, d) {
  w.anyreplay = w.anyreplay || function () {
    (w.anyreplay.q = w.anyreplay.q || []).push(arguments);
  };
  var s = d.createElement('script');
  s.async = 1;
  s.src = 'https://cdn.anyreplay.com/v1/ar.min.js?k=YOUR_PROJECT_KEY';
  d.head.appendChild(s);
})(window, document);

anyreplay('init', {
  projectKey: 'YOUR_PROJECT_KEY',
  ingestUrl: 'https://in.anyreplay.com',
  // Stop recording after this many sessions in a calendar month.
  // maxSessionsPerMonth: 10000,
  // Form fields are masked: what visitors type replays as asterisks.
  // Passwords, one-time codes and card fields are masked either way.
  // Uncomment the first line to record what visitors type, or the
  // second to hide rich-text editors too.
  // maskAllInputs: false,
  // maskAllTyping: true
});
</script>

How do I check it is working?

Run ng serve, move between two routes, and open your project's setup page, which switches to Connected after the first accepted event. The network panel should show POST requests to in.anyreplay.com answered with 202. If nothing arrives, add debug: true to the options and read the console. The npm package page lists every option and method.

Frequently asked questions