Sentry Integration (#170)

* Basic version of sentry is implemented

* Enhanced continuous reading to show a warning when we couldn't find the next reading point. This will also short circuit after the first warning is shown

* Implemented Sentry. Currently src maps aren't uploading

angular.json

@@ -30,6 +30,11 @@
  "src/favicon.ico",
  "src/assets"
  ],
+ "sourceMap": {
+ "hidden": false,
+ "scripts": true,
+ "styles": true
+ },
  "styles": [
  "node_modules/ngx-toastr/toastr.css",
  "src/styles.scss",
@@ -47,7 +52,6 @@
  ],
  "optimization": true,
  "outputHashing": "all",
- "sourceMap": false,
  "namedChunks": false,
  "extractLicenses": true,
  "vendorChunk": true,

package.json

@@ -30,6 +30,8 @@
  "@ng-bootstrap/ng-bootstrap": "^9.1.0",
  "@ngx-lite/nav-drawer": "^0.4.6",
  "@ngx-lite/util": "0.0.0",
+ "@sentry/angular": "^6.3.6",
+ "@sentry/integrations": "^6.3.6",
  "@types/file-saver": "^2.0.1",
  "angular-ng-autocomplete": "^2.0.5",
  "bootstrap": "^4.5.0",

src/app/_interceptors/error.interceptor.ts

@@ -6,7 +6,7 @@ import {
  HttpInterceptor
 } from '@angular/common/http';
 import { Observable, throwError } from 'rxjs';
-import { NavigationExtras, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { catchError, take } from 'rxjs/operators';
 import { AccountService } from '../_services/account.service';
@@ -20,7 +20,6 @@ export class ErrorInterceptor implements HttpInterceptor {
  return next.handle(request).pipe(
  catchError(error => {
  if (error && error.status !== 200) {
- console.error('error:', error);
  switch (error.status) {
  case 400:
  // IF type of array, this comes from signin handler
@@ -47,6 +46,7 @@ export class ErrorInterceptor implements HttpInterceptor {
  }
  throw modalStateErrors.flat();
  } else {
+ console.error('error:', error);
  if (error.statusText === 'Bad Request') {
  this.toastr.error(error.error, error.status);
  } else {
@@ -65,9 +65,11 @@ export class ErrorInterceptor implements HttpInterceptor {
  });
  break;
  case 404:
+ console.error('error:', error);
  this.toastr.error('That url does not exist.');
  break;
  case 500:
+ console.error('error:', error);
  this.toastr.error('There was an unknown critical error.');
  break;
  default:

src/app/_services/account.service.ts

@@ -5,6 +5,7 @@ import { map } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
 import { Preferences } from '../_models/preferences/preferences';
 import { User } from '../_models/user';
+import * as Sentry from "@sentry/angular";
 
 @Injectable({
  providedIn: 'root'
@@ -44,6 +45,13 @@ export class AccountService {
  }
 
  localStorage.setItem(this.userKey, JSON.stringify(user));
+ Sentry.configureScope(scope => {
+ scope.setUser({
+ username: user.username
+ });
+ });
+
+ Sentry.setContext('admin', {'admin': this.hasAdminRole(user)});
  this.currentUserSource.next(user);
  this.currentUser = user;
  }

src/app/_services/reader.service.ts

@@ -60,7 +60,6 @@ export class ReaderService {
  }
  for (let c of currentlyReadingVolume.chapters) {
  if (c.pagesRead < c.pages) {
- console.log('Current chapter is: v' + v.number + ' c' + c.number );
  currentlyReadingChapter = c;
  break;
  }

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { APP_INITIALIZER, ErrorHandler, Injectable, NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -25,7 +25,37 @@ import { ReviewSeriesModalComponent } from './_modals/review-series-modal/review
 import { LazyLoadImageModule} from 'ng-lazyload-image';
 import { CarouselModule } from './carousel/carousel.module';
 import { NgxSliderModule } from '@angular-slider/ngx-slider';
-import { SwiperModule } from 'swiper/angular';
+
+import * as Sentry from "@sentry/angular";
+import { environment } from 'src/environments/environment';
+import { version } from 'package.json';
+import { Router } from '@angular/router';
+import { RewriteFrames as RewriteFramesIntegration } from "@sentry/integrations";
+import { Dedupe as DedupeIntegration } from "@sentry/integrations";
+
+Sentry.init({
+ dsn: "https://[email protected]/5757426",
+ environment: environment.production ? 'prod' : 'dev',
+ release: version,
+ integrations: [
+ new Sentry.Integrations.GlobalHandlers({ 
+ onunhandledrejection: true,
+ onerror: true
+ }),
+ new DedupeIntegration(),
+ new RewriteFramesIntegration()
+ ],
+ ignoreErrors: [new RegExp(/\/api\/admin/)],
+ tracesSampleRate: environment.production ? 0 : 1.0,
+});
+
+Sentry.configureScope(scope => {
+ scope.setUser({
+ username: 'Not authorized'
+ });
+ scope.setTag('production', environment.production);
+ scope.setTag('version', version);
+});
 
 
 
@@ -69,6 +99,22 @@ import { SwiperModule } from 'swiper/angular';
  {provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true},
  {provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true},
  //{ provide: LAZYLOAD_IMAGE_HOOKS, useClass: ScrollHooks } // Great, but causes flashing after modals close
+ {
+ provide: ErrorHandler,
+ useValue: Sentry.createErrorHandler({
+ showDialog: false,
+ }),
+ },
+ {
+ provide: Sentry.TraceService,
+ deps: [Router],
+ },
+ {
+ provide: APP_INITIALIZER,
+ useFactory: () => () => {},
+ deps: [Sentry.TraceService],
+ multi: true,
+ }
  ],
  entryComponents: [],
  bootstrap: [AppComponent]