Angular

On its own, @sentry/browser will report any uncaught exceptions triggered from your application. Additionally, @sentry/browser can be configured to catch any Angular-specific (2.x) exceptions reported through the @angular/core/ErrorHandler component. This is also a great opportunity to collect user feedback by using Sentry.showReportDialog.

First, install @sentry/browser:

# Using yarn
yarn add @sentry/browser

# Using npm
npm install @sentry/browser

import { BrowserModule } from "@angular/platform-browser";
import { NgModule, ErrorHandler, Injectable } from "@angular/core";

import { AppComponent } from "./app.component";

import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "___PUBLIC_DSN___"
});

@Injectable()
export class SentryErrorHandler implements ErrorHandler {
  constructor() {}
  handleError(error) {
    const eventId = Sentry.captureException(error.originalError || error);
    Sentry.showReportDialog({ eventId });
  }
}

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [{ provide: ErrorHandler, useClass: SentryErrorHandler }],
  bootstrap: [AppComponent]
})

export class AppModule {}

AngularJS 1.x

If you’re using AngularJS 1.x, you can use Sentry’s AngularJS integration.

First, install @sentry/browser and @sentry/integrations:

# Using yarn
yarn add @sentry/browser @sentry/integrations

# Using npm
npm install @sentry/browser @sentry/integrations

import angular from 'angular';
import * as Sentry from '@sentry/browser';
import { Angular as AngularIntegration } from '@sentry/integrations';

// Make sure to call Sentry.init after importing AngularJS. 
// You can also pass {angular: AngularInstance} to the Integrations.Angular() constructor.
Sentry.init({
  dsn: '___PUBLIC_DSN___',
  integrations: [
    new AngularIntegration(),
  ],
});

// Finally require ngSentry as a dependency in your application module.
angular.module('yourApplicationModule', ['ngSentry']);

In case you’re using the CDN version or the Loader, Sentry provides a standalone file for every integration:

<!-- Note that we now also provide a es6 build only -->
<!-- <script src="https://browser.sentry-cdn.com/5.15.5/bundle.es6.min.js" integrity="sha384-1j+5vVyRyfONtCTzlIVBy580d/lK8kWuZQq7y0p6Mgyhe+jYIII/d0TS0lWS4F8M" crossorigin="anonymous"></script> -->
<script src="https://browser.sentry-cdn.com/5.15.5/bundle.min.js" integrity="sha384-wF7Jc4ZlWVxe/L8Ji3hOIBeTgo/HwFuaeEfjGmS3EXAG7Y+7Kjjr91gJpJtr+PAT" crossorigin="anonymous"></script>

<!-- If you include the integration it will be available under Sentry.Integrations.Angular -->
<script src="https://browser.sentry-cdn.com/5.15.5/angular.min.js" crossorigin="anonymous"></script>

<script>
  Sentry.init({
    dsn: '___PUBLIC_DSN___',
    integrations: [
      new Sentry.Integrations.Angular(),
    ],
  });
</script>
On this page