sessionreplay
LoginGet Started

Session Replay for Angular

Session replay for Angular applications. Works with Angular 12+.

Quick Start

1. Install the package

npm install @puppethand/record

2. Initialize recording

app.component.ts
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { record } from '@puppethand/record';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  ngOnInit() {
    record({
      apiKey: 'ph_pub_xxx',
    });
  }
}

3. View sessions in your dashboard

Sessions will appear in your PuppetHand dashboard within seconds of recording.

Angular-Specific Features

  • Angular 12+ support
  • Zone.js compatible
  • NgRx state tracking
  • Router event capture
  • Lazy module support

Configuration Options

Configuration
record({
  apiKey: 'ph_pub_xxx',

  // Optional configuration
  maskAllInputs: true,          // Mask all input values
  maskAllText: false,           // Mask all text content
  blockClass: 'ph-block',       // Block elements with this class
  ignoreClass: 'ph-ignore',     // Ignore elements with this class

  // Sampling (reduce data volume)
  sampling: {
    mousemove: true,            // Record mouse movements
    scroll: 100,                // Throttle scroll events (ms)
    input: 'last',              // Record only last input value
  },

  // Network recording
  recordNetwork: true,          // Record fetch/XHR requests
  recordConsole: true,          // Record console logs
});

Full Documentation

For advanced configuration, troubleshooting, and best practices, check out our full Angular documentation.

View Angular Docs

Ready to add session replay to Angular?

Start free with 10GB storage. Setup takes 30 seconds.

Start FreeView Pricing