Sentry isn't working for me on Angular

Question

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://[email protected]/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?

Answer 1

Sentry has a new SDK for angular apps.

You can find your app dsn link by searching for "Client Keys DSN" on sentry.io navbar search input.