Back to Blog Home

Log Angular 2 Errors with Sentry

Ben Vinegar image

Ben Vinegar -

Log Angular 2 Errors with Sentry

Angular 2 is almost here, and so it's with great pleasure that Sentry now officially provides support for Angular 2 error tracking through our browser JavaScript SDK – including full support for use with TypeScript.

Getting Started

Install the sentry/raven-js package:

$ npm install raven-js --save

Configure SystemJS (the new default package manager for Angular 2) to locate the raven-js package:

System.config({ packages: {'raven-js': { main: 'dist/raven.js' }}, paths: {'raven-js': 'node_modules/raven-js'} });

Declare a custom ErrorHandler that calls Raven.captureException, and initiate it as part of your NgModule call:

import Raven from 'raven-js'; import { ErrorHandler } from '@angular/core'; ... Raven.config('your dsn').install(); class RavenErrorHandler { handleError(err:any) { Raven.captureException(err.originalError); } } @NgModule({ imports: [ BrowserModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ], providers: [ { provide: ErrorHandler, useClass: RavenErrorHandler } ] })

Edit: These instructions have been edited to reflect API changes in Angular 2 RC7.

Once you're done, Sentry will now start capturing both native JavaScript errors and errors occurring deep inside your Angular 2 application. For more in-depth instructions, take a look at our dedicated Angular 2 documentation.

TypeScript + Source Maps

The Raven.js project now provides a TypeScript language declaration file for static analysis of Raven.js API calls inside of your Angular 2 projects.

Additionally, Sentry supports Source Maps, which means that you can see your original TypeScript code in error stack traces.

TypeScript stack trace

Check out our documentation to see how to produce source maps as part of your build process and pass them to Sentry. And, whether you need to debug JavaScript or do Angular error tracking, you can get started fast with Sentry.

Share

Share on Twitter
Share on Facebook
Share on HackerNews
Share on LinkedIn

Published

Sentry Sign Up CTA

Code breaks, fix it faster

Sign up for Sentry and monitor your application in minutes.

Try Sentry Free

Topics

Error Monitoring

The best way to debug slow web pages

Listen to the Syntax Podcast

Of course we sponsor a developer podcast. Check it out on your favorite listening platform.

Listen To Syntax
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.