1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
Angular
=========
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
<https://angular.io/docs/js/latest/api/core/index/ErrorHandler-class.html>`_ component.
TypeScript Support
------------------
Raven.js ships with a `TypeScript declaration file
<https://github.com/getsentry/raven-js/blob/master/typescript/raven.d.ts>`_, which helps static checking correctness of
Raven.js API calls, and facilitates auto-complete in TypeScript-aware IDEs like Visual Studio Code.
Installation
------------
Raven.js should be installed via npm.
.. code-block:: sh
$ npm install raven-js --save
Configuration
-------------
Configuration depends on which module loader/packager you are using to build your Angular application.
Below are instructions for `SystemJS
<https://github.com/systemjs/systemjs>`__, followed by instructions for `Webpack
<https://webpack.github.io/>`__, Angular CLI, and other module loaders/packagers.
SystemJS
~~~~~~~~
First, configure SystemJS to locate the Raven.js package:
.. code-block:: js
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):
.. code-block:: js
import Raven = require('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.originalError || 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
~~~~~~~~~~~
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):
.. code-block:: js
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.
|
