Angular · logzai-js/browser

Automatic error logging for your Angular application

Integrate logzai-js via Angular's ErrorHandler and Router events. Inject NgRx or service state as context on every captured exception.

Get ingest token

npm install logzai-js

No credit card required. 5M events free/month.

What you get out of the box

Angular ErrorHandler integration

Implement Angular's ErrorHandler to forward all uncaught exceptions to LogzAI.

NgRx store context injection

Select user and org state from your NgRx store on every event.

Router navigation tracking

Hooks into NavigationEnd events via spaPlugin automatically.

Environment config support

Uses Angular environment.ts variables directly — no .env files needed.

Tree-shakeable, zero-overhead

logzai-js adds less than 3KB gzipped to your Angular bundle.

logger.service.ts

import { Injectable } from '@angular/core'
import { Router } from '@angular/router'
import { Store } from '@ngrx/store'
import logzai, { browserPlugin, spaPlugin } from 'logzai-js/browser'
import { selectCurrentUser } from './store/auth/auth.selectors'
import { selectSelectedOrg } from './store/org/org.selectors'
import { environment } from '../environments/environment'

@Injectable({ providedIn: 'root' })
export class LogzaiService {
  constructor(private store: Store, private router: Router) {
    this.init()
  }

  private init() {
    logzai.init({
      ingestToken: environment.logzaiToken,
      ingestEndpoint: 'https://ingest.logzai.com',
      serviceName: 'my-angular-app',
      environment: environment.production ? 'production' : 'development',
      mirrorToConsole: !environment.production,
    })

    logzai.plugin('browser', browserPlugin, {
      contextInjector: () => {
        let user: any = null
        let org: any = null
        this.store.select(selectCurrentUser).subscribe(u => (user = u))
        this.store.select(selectSelectedOrg).subscribe(o => (org = o))
        return {
          userId: user?.id,
          userEmail: user?.email,
          orgId: org?.id,
          currentRoute: this.router.url,
        }
      },
    })

    logzai.plugin('spa', spaPlugin, {
      logNavigation: true,
      contextInjector: () => {
        let user: any = null
        this.store.select(selectCurrentUser).subscribe(u => (user = u))
        return { userId: user?.id }
      },
    })
  }
}

// app.config.ts — provide the service at startup
// providers: [LogzaiService]

Every event arrives enriched

When Angular captures an error or navigation, LogzAI receives these fields automatically.

Field	Example value	Captured from
serviceName	my-angular-app	logzai.init
environment	production	environment.production
userId	usr_01j8x...	NgRx selectCurrentUser
userEmail	jane@acme.com	NgRx store
orgId	org_9xk...	NgRx selectSelectedOrg
currentRoute	/settings/billing	router.url
message	Cannot read properties of null	ErrorHandler
level	error	browserPlugin

Start sending events in 2 minutes

Add npm install logzai-js to your Angular app and you're done.

No infrastructure to manage. 5M events free/month.

Analyze your logs with AI

Once events are flowing, ask LogzAI questions in plain English. Find root causes in seconds.

Try LogzAI Free