Let's perform the following steps to add production tracking and monitoring to our Angular application with Sentry:

1. First, we will need to add our Sentry DSN API key to our application's /src/environments/environment.ts and /src/environments/environment.prod.ts configurations. The main difference here is the production flag, which we can set to true for simplicity with testing our integration, for now:

export const environment = {
  production: true,
  sentryDSN: 'https://[email protected]/xxxxx'
  ...
}

2. Before working with any new library in Angular, it's a good idea to add the type definitions to your project's tsconfig.json configuration. raven-js includes its own typescript definitions inside its typescript directory. We'll simply include that in the typeRoots declarations under compilerOptions:

{
  "compileOnSave": false,
  "compilerOptions": {
    ...
    "typeRoots": [
      "node_modules/@types",
      "node_modules/raven-js/typescript"
    ],
    ...
  }
}

3. To integrate Sentry, we will create a /src/app/sentry.provider.ts provider configuration to set up Sentry. This provider will override Angular's default ErrorHandler with a custom one that will bubble up any exceptions or errors to our Sentry service so that we can be notified about them and analyze them later. One important adjustment we want to make is to use Raven.captureException only if we are indeed in the production mode. We do this by simply checking the production flag in our imported environment configuration:

import {ErrorHandler} from '@angular/core';
import * as Raven from 'raven-js';
import { environment } from '../environments/environment';

const SENTRY_DSN:string = environment.sentryDSN;

Raven
  .config(SENTRY_DSN)
  .install();

export class RavenErrorHandler implements ErrorHandler {
  handleError(err:any) : void {
    if (environment.production) {
      Raven.captureException(err);
    } else {
      console.error(err);
    }
  }
}

export default { provide: ErrorHandler, useClass: RavenErrorHandler };

4. We will import and add our provider to our main /src/app/app.module.ts module configuration:

...
import SentryProvider  from './sentry.provider';

...
@NgModule({
  ...
  providers: [
    { provide: LOCALE_ID, useFactory: getLocaleProvider },
    CurrentUserService,
    SentryProvider
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

5. Then, to properly test our error handling, we can introduce a bit of mischief and simply add a throw to our /src/app/posts/create-post-form/create-post-form.component.ts class. This way, whenever we open the modal dialog, it will throw an error that will be caught by raven-js and sent to Sentry:

...
@Component({
  selector: 'app-create-post-form',
  templateUrl: './create-post-form.component.html',
  styleUrls: ['./create-post-form.component.scss'],
})
export class CreatePostFormComponent implements OnInit {
  ...
  open(content) {
    this.model = new BlogPost("New Post Title");
    this.modalService.open(content, {backdrop: "static", size: "lg"});
    throw new Error('fire!');
  }
  ...
}

6. If we build and load our web application with the production flag set to true, we can simply click on the Create New Post button and our error will be thrown. If you have any push notifications for your email on your computer while testing, you will be astonished at how quickly you'll be notified by Sentry that a new error has been discovered.