title: Sentry isn't working for me on Angular
body: <p>I installed Sentry on my Angular application by following <a href="https://docs.sentry.io/clients/javascript/integrations/angular/" rel="nofollow noreferrer">their tutorial</a>, given that parts of it are outdated so I kept fixing them up in my code and ended up with this:</p>
  
  <pre><code>        // 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) { }
          }
  </code></pre>
  
  <p>I imported Raven, configured it with my public DSN, initalised the <code>RavenExceptionHandler</code>, imported <code>ErrorHandler</code> and added the provider that uses both handlers.</p>
  
  <p>Now that's setup I went to my component and did threw an error in the constructor:</p>
  
  <pre><code>        // 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');
              }
  
          }
  </code></pre>
  
  <p>I can see the errors coming up on my log but I can't see anything logged in my Sentry dashboard:</p>
  
  <p><a href="https://i.stack.imgur.com/K1yji.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K1yji.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/BSBvo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BSBvo.png" alt="enter image description here"></a></p>
  
  <p><strong>I am running this on my localhost.</strong> 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:
  <a href="https://i.stack.imgur.com/FbhEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FbhEi.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong or not doing?</p>