Setting Up Session Replay in Angular

Bug reports saying 'it doesn't work' are useless without context. Session replay for Angular shows you exactly what the user did, saw, and experienced.

Getting Started

Setting up session replay in your Angular project with Bugsly is straightforward. The entire process takes just a few minutes, and you'll immediately start seeing events in your dashboard.

Installation

npm install @bugsly/angular

Configuration

// main.ts
import * as Bugsly from "@bugsly/angular";

Bugsly.init({
  dsn: "YOUR_BUGSLY_DSN",
  tracesSampleRate: 1.0,
});

@NgModule({
  providers: [{ provide: ErrorHandler, useValue: Bugsly.createErrorHandler() }],
})
export class AppModule {}

Verification

After adding the SDK, trigger a test error to confirm everything works. Check your Bugsly dashboard — the event should appear within seconds, complete with stack trace and context data.

Best Practices for Angular Session Replay

Group by fingerprint. Bugsly automatically groups similar errors, but you can customize fingerprinting for Angular-specific patterns like route-based grouping or middleware errors.

Filter noise early. Use beforeSend to drop expected errors — like 404s from bots or network errors from flaky connections — before they consume your event quota.

Track releases consistently. Bugsly correlates errors with specific releases, so always set the release version. This makes it trivial to identify which deploy introduced a regression.

Monitor performance alongside errors. With tracesSampleRate enabled, Bugsly captures transaction data too, connecting slow endpoints with their associated errors for a complete picture of your Angular application's health.

Next Steps

Once session replay is running, configure privacy rules to mask sensitive user data like passwords and credit card fields. Use replay search to find sessions matching specific criteria — like sessions with rage clicks or error events. Connect replays to error reports for instant visual context during debugging.