This document uses Angular to refer to Angular 2+. On its own, Raven.js will report any uncaught exceptions triggered from your application. For advanced usage examples of Raven.js, please read :doc:`Raven.js usage <../usage>`.
Additionally, Raven.js can be configured to catch any Angular-specific (2.x) exceptions reported through the @angular/core/ErrorHandler component.
Raven.js ships with a TypeScript declaration file, which helps static checking correctness of Raven.js API calls, and facilitates auto-complete in TypeScript-aware IDEs like Visual Studio Code.
Raven.js should be installed via npm.
$ npm install raven-js --saveConfiguration depends on which module loader/packager you are using to build your Angular application.
Below are instructions for SystemJS, followed by instructions for Webpack, Angular CLI, and other module loaders/packagers.
First, configure SystemJS to locate the Raven.js package:
System.config({
packages: {
/* ... existing packages above ... */
'raven-js': {
main: 'dist/raven.js'
}
},
paths: {
/* ... existing paths above ... */
'raven-js': 'node_modules/raven-js'
}
});Then, in your main module file (where @NgModule is called, e.g. app.module.ts):
import Raven = require('raven-js');
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
Raven
.config('___PUBLIC_DSN___')
.install();
export class RavenErrorHandler implements ErrorHandler {
handleError(err:any) : void {
Raven.captureException(err.originalError || err);
if(!environment.production) {
super.handleError(err);
}
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ { provide: ErrorHandler, useClass: RavenErrorHandler } ]
})
export class AppModule { }Once you've completed these two steps, you are done.
Angular CLI now uses Webpack to build instead of SystemJS. All you need to do is modify your main module file (where @NgModule is called, e.g. app.module.ts):
import * as Raven from 'raven-js';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler } from '@angular/core';
import { AppComponent } from './app.component';
Raven
.config('___PUBLIC_DSN___')
.install();
export class RavenErrorHandler implements ErrorHandler {
handleError(err:any) : void {
Raven.captureException(err);
}
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ { provide: ErrorHandler, useClass: RavenErrorHandler } ]
})
export class AppModule { }Once you've completed that step, you are done.