I installed Sentry on my Angular application by following their tutorial, given that parts of it are outdated so I kept fixing them up in my code and ended up with this:
// My module.ts
// modules
import { NgModule, Injector, ErrorHandler } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
// import Raven from 'raven-js/src/raven';
import * as Raven from 'raven-js';
Raven.config('https://mypublicDSN@sentry.io/omitted').install();
class RavenExceptionHandler {
call(err:any) {
Raven.captureException(err.originalException);
}
}
// components
import { MyComponent } from './components/my.component';
// services
import { ApiService } from './services/api';
// configuration
import { environment } from 'environments/environment';
// instance
@NgModule({
providers: [
ApiService,
{
provide: ErrorHandler,
useClass: RavenExceptionHandler
}
],
declarations: [
MyComponent,
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
HttpClientModule,
// material design components:
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatFormFieldModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatNativeDateModule,
MatProgressBarModule,
MatRadioModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule,
MatStepperModule,
MatTableModule,
MatToolbarModule,
MatTooltipModule,
],
exports: [
MyComponent,
],
})
export class MyModule {
constructor(private injector: Injector) { }
}
I imported Raven, configured it with my public DSN, initalised the RavenExceptionHandler, imported ErrorHandler and added the provider that uses both handlers.
Now that's setup I went to my component and did threw an error in the constructor:
// my.component.ts
import { Component, Input, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataService } from './data.service';
@Component({
selector: 'my-selector',
templateUrl: './my-selector.template.html',
styleUrls: ['./my-selector.styles.css']
})
export class DataPrepComponent {
@Input() public projectId: string;
@Input() public documentId: string;
constructor(public dataService: DataService) {
console.log("Throwing error");
throw new Error('Throwing error for Sentry');
}
}
I can see the errors coming up on my log but I can't see anything logged in my Sentry dashboard:
I am running this on my localhost. but I couldn't find any documentation that would say that this prevents the logs from coming up, and I also am allowing any domain to send logs:
What am I doing wrong or not doing?
