Add Vident to Angular

Set up error tracking, session replay, and Web Vitals in Angular applications. Works with any Angular version using standard browser APIs.

Features

Works with any Angular version
Standard browser API — no Angular-specific wrapper needed
Session replay with DOM recording
Core Web Vitals (LCP, CLS, INP)
Angular Router integration for page views

Setup

Install

npm install vident-browser

src/main.ts

import { createVidentBrowser } from 'vident-browser';

createVidentBrowser({
  apiKey: 'your-api-key',
});

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);

Route tracking (Angular Router)

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { trackPageView } from 'vident-browser';

@Component({ selector: 'app-root', template: '<router-outlet />' })
export class AppComponent {
  constructor(router: Router) {
    router.events
      .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
      .subscribe((e) => trackPageView({ path: e.urlAfterRedirects }));
  }
}

Other Frameworks

Add Vident to React

Add Vident to Next.js

Add Vident to Vue

Add Vident to SvelteKit

Start catching errors in minutes

Create your free account and add Vident to your app. Two lines of code, no credit card.

Get started free