Subchapter 76.3

Angular

references/angular.mdMarkdown8 KBView on GitHub

AI agents: this is one page from PostHog’s docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt (opens in a new tab)

Angular Error Tracking installation

Angular · Instrument Error Tracking · PostHog/skills · Skills Docs

1

Install the package

Required

Install the PostHog JavaScript library using your package manager:

npm
```
npm install posthog-js
```
yarn
```
yarn add posthog-js
```
pnpm
```
pnpm add posthog-js
```
bun
```
bun add posthog-js
```
2

Initialize PostHog

Required

In your src/main.ts, initialize PostHog using your project token and instance address:

Angular 17+

For Angular v17 and above, you can set up PostHog as a singleton service. To do this, start by creating and injecting a PosthogService instance.

Create a service by running ng g service services/posthog. The service should look like this:

src/main.ts
3

Send events

Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.

If you’d like, you can also manually capture custom events:

JavaScript
```
posthog.capture('my_custom_event', { property: 'value' })
```
4

Setting up exception autocapture

Recommended

Exception autocapture can be enabled during initialization of the PostHog client to automatically capture any exception thrown by your Angular application.

This requires overriding Angular’s default ErrorHandler provider:

src/app/posthog-error-handler.ts
5

Manually capture exceptions

Optional

If there are more errors you’d like to capture, you can manually call the captureException method:

TypeScript
```
posthog.captureException(e, additionalProperties)
```
Verify error tracking

Recommended

Confirm events are being sent to PostHog

Before proceeding, let’s make sure exception events are being captured and sent to PostHog. You should see events appear in the activity feed.

Check for exceptions in PostHog (opens in a new tab)
6

Upload source maps

Required

Great, you’re capturing exceptions! If you serve minified bundles, the next step is to upload source maps to generate accurate stack traces.

Let’s continue to the next section.

Upload source maps (opens in a new tab)

// src/app/services/posthog.service.ts
import { DestroyRef, Injectable, NgZone } from "@angular/core";
import posthog from "posthog-js";
import { environment } from "../../environments/environment";
import { Router } from "@angular/router";
@Injectable({ providedIn: "root" })
export class PosthogService {
  constructor(
    private ngZone: NgZone,
    private router: Router,
    private destroyRef: DestroyRef,
  ) {
    this.initPostHog();
  }
  private initPostHog() {
    this.ngZone.runOutsideAngular(() => {
      posthog.init(environment.posthogKey, {
        api_host: environment.posthogHost,
        defaults: '2026-05-30',
      });
    });
  }
}

// src/app/app.component.ts
import { Component } from "@angular/core";
import { RouterOutlet } from "@angular/router";
import { PosthogService } from "./services/posthog.service";
@Component({
  selector: "app-root",
  styleUrls: ["./app.component.scss"],
  template: `
    <router-outlet />`,
  imports: [RouterOutlet],
})
export class AppComponent {
  title = "angular-app";
  constructor(posthogService: PosthogService) {}
}

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { environment } from "./environments/environment";
import posthog from 'posthog-js'
posthog.init(environment.posthogKey, {
  api_host: environment.posthogHost,
  defaults: '2026-05-30'
})
bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

import { ErrorHandler, Injectable, Provider } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';
import posthog from 'posthog-js';

@Injectable({ providedIn: 'root' })
class PostHogErrorHandler implements ErrorHandler {
  public constructor() {}
  public handleError(error: unknown): void {
    const extractedError = this._extractError(error) || 'Unknown error';
    runOutsideAngular(() => posthog.captureException(extractedError));
  }
  protected _extractError(errorCandidate: unknown): unknown {
    const error = tryToUnwrapZonejsError(errorCandidate);
    if (error instanceof HttpErrorResponse) {
      return extractHttpModuleError(error);
    }
    if (typeof error === 'string' || isErrorOrErrorLikeObject(error)) {
      return error;
    }
    return null;
  }
}

function tryToUnwrapZonejsError(error: unknown): unknown | Error {
  return error && (error as { ngOriginalError: Error }).ngOriginalError
    ? (error as { ngOriginalError: Error }).ngOriginalError
    : error;
}

function extractHttpModuleError(error: HttpErrorResponse): string | Error {
  if (isErrorOrErrorLikeObject(error.error)) {
    return error.error;
  }
  if (
    typeof ErrorEvent !== 'undefined' &&
    error.error instanceof ErrorEvent &&
    error.error.message
  ) {
    return error.error.message;
  }
  if (typeof error.error === 'string') {
    return `Server returned code ${error.status} with body "${error.error}"`;
  }
  return error.message;
}

function isErrorOrErrorLikeObject(value: unknown): value is Error {
  if (value instanceof Error) {
    return true;
  }
  if (value === null || typeof value !== 'object' || Array.isArray(value)) {
    return false;
  }
  return 'name' in value && 'message' in value && 'stack' in value;
}

declare const Zone: any;
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
const isNgZoneEnabled = typeof Zone !== 'undefined' && Zone.root?.run;
export function runOutsideAngular<T>(callback: () => T): T {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
  return isNgZoneEnabled ? Zone.root.run(callback) : callback();
}

export function providePostHogErrorHandler(): Provider {
  return {
    provide: ErrorHandler,
    useValue: new PostHogErrorHandler(),
  };
}

// src/app/app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { providePostHogErrorHandler } from './posthog-error-handler';
export const appConfig: ApplicationConfig = {
  providers: [
    ...
    providePostHogErrorHandler(),
  ],
};

Angular

Angular Error Tracking installation

Angular

Angular Error Tracking installation

Install the package

npm

yarn

pnpm

bun

Initialize PostHog

Angular 17+

Send events

Setting up exception autocapture

Manually capture exceptions

Verify error tracking

Upload source maps

Still have questions?

Was this page useful?

Angular 16 and below