feat(core): handle and log errors

create main-error component to display error

Author: loktionov129

angular.json

@@ -49,7 +49,7 @@
             ],
             "styles": [
               {
-                "input": "node_modules/@angular/material/prebuilt-themes/purple-green.css"
+                "input": "node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css"
               },
               "src/styles.scss"
             ],

src/app/core/core.module.ts

@@ -1,15 +1,22 @@
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
-import { NgModule } from '@angular/core';
+import { ErrorHandler, NgModule } from '@angular/core';
 
 import { AuthInterceptor } from './services/auth.interceptor';
+import { ErrorsHandler } from './services/errors-handler.service';
+import { ErrorsLogger } from './services/errors-logger.service';
 
 const authInterceptor = {
   multi: true,
   provide: HTTP_INTERCEPTORS,
   useClass: AuthInterceptor,
 };
 
-const providers = [authInterceptor];
+const errorsHandler = {
+  provide: ErrorHandler,
+  useClass: ErrorsHandler,
+};
+
+const providers = [authInterceptor, errorsHandler, ErrorsLogger];
 
 @NgModule({
   providers,

src/app/core/services/auth.interceptor.ts

@@ -1,10 +1,12 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
-import { delay, retryWhen, scan } from 'rxjs/operators';
+import { ErrorHandler, Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { catchError, delay, retryWhen, scan, tap } from 'rxjs/operators';
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
+  constructor(private readonly errorHandler: ErrorHandler) {}
+
   intercept(request: HttpRequest<{}>, next: HttpHandler): Observable<HttpEvent<{}>> {
     const newRequest = request.clone({
       setHeaders: {
@@ -15,13 +17,23 @@ export class AuthInterceptor implements HttpInterceptor {
     return next.handle(newRequest).pipe(
       retryWhen(err =>
         err.pipe(
+          tap(error => {
+            if (error.status !== 503) {
+              throw error;
+            }
+          }),
           scan(retryCount => {
-            if (retryCount < 2) {
+            if (retryCount < 5) {
               return retryCount + 1;
             }
             throw new Error('Retry limit exceeded!');
           }, 0), // tslint:disable-line:align
           delay(2000),
+          catchError(error => {
+            this.errorHandler.handleError(error);
+
+            return of(error);
+          }),
         ),
       ),
     );

src/app/core/services/errors-handler.service.ts

@@ -0,0 +1,55 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
+import { Router } from '@angular/router';
+import { tap } from 'rxjs/operators';
+
+import { ErrorsLogger } from './errors-logger.service';
+
+@Injectable()
+export class ErrorsHandler implements ErrorHandler {
+  // Because the ErrorsHandler is created before the providers,
+  // We’ll have to use the Injector to get them.
+  constructor(private readonly injector: Injector) {}
+
+  handleError(error: Error | HttpErrorResponse): void {
+    if (error instanceof HttpErrorResponse) {
+      this.handleHttpError(error);
+    } else {
+      this.logError(error);
+    }
+  }
+
+  private handleHttpError(error: HttpErrorResponse): void {
+    if (!navigator.onLine) {
+      console.warn('No Internet Connection');
+
+      return;
+    }
+
+    if (error.status === 401) {
+      localStorage.removeItem('auth');
+      const router = this.injector.get(Router);
+      const returnUrl = window.location.pathname + window.location.search;
+      router.navigate(['/account/login'], { queryParams: { returnUrl } });
+    } else if (error.status === 403 || error.status >= 500) {
+      this.logError(error);
+    }
+  }
+
+  private logError(error: Error): void {
+    const zone = this.injector.get(NgZone);
+    zone.run(() => {
+      const logger = this.injector.get(ErrorsLogger);
+      logger
+        .logError(error)
+        .pipe(
+          tap(_ => {
+            setTimeout(() => document.body.click(), 0);
+            const router = this.injector.get(Router);
+            router.navigateByUrl('/error');
+          }),
+        )
+        .toPromise();
+    });
+  }
+}

src/app/core/services/errors-logger.service.ts

@@ -0,0 +1,45 @@
+import { LocationStrategy, PathLocationStrategy } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { environment } from '~/env/environment';
+
+export interface ErrorWithContext extends Error {
+  appId: string;
+  id: string;
+  status: number | null;
+  time: number;
+  url: string;
+  user: string;
+}
+
+@Injectable()
+export class ErrorsLogger {
+  constructor(private readonly locationStrategy: LocationStrategy) {}
+
+  logError(error: Error): Observable<Error> {
+    if (!environment.production) {
+      console.error(error);
+    }
+
+    // TODO: Send error to server.
+    return of(this.addContextInfo(error));
+  }
+
+  private addContextInfo(error: Error): ErrorWithContext {
+    const name = error.name || null;
+    const appId = environment.clientId;
+    const user = '-';
+    const time = new Date().getTime();
+    const id = `${appId}-${user}-${time}`;
+    const location = this.locationStrategy;
+    const url = location instanceof PathLocationStrategy ? location.path() : '';
+    const status = (error as HttpErrorResponse).status || null;
+    const message = error.message || error.toString();
+    const stack = error.stack;
+    const errorWithContext = { name, appId, user, time, id, url, status, message, stack };
+
+    return errorWithContext;
+  }
+}

src/app/main/main-routing.module.ts

@@ -1,10 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { MainErrorComponent } from './pages';
+
 const routes: Routes = [
   { path: '', pathMatch: 'full', redirectTo: 'general' },
+  { path: 'error', component: MainErrorComponent },
   { path: 'general', loadChildren: '../features/general/general.module#GeneralModule' },
-  { path: '**', redirectTo: 'general' },
+  { path: '**', redirectTo: 'error' },
 ];
 
 @NgModule({

src/app/main/main.module.ts

@@ -1,11 +1,6 @@
-import { LayoutModule } from '@angular/cdk/layout';
-import { HttpClientModule } from '@angular/common/http';
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatBadgeModule, MatIconModule, MatListModule, MatMenuModule, MatToolbarModule } from '@angular/material';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { CoreModule } from '~/core/core.module';
 
 import { components } from './components';
 import { containers } from './containers';
@@ -16,13 +11,16 @@ const declarations = [...components, ...containers, ...pages];
 
 export const vendorImports = [MatBadgeModule, MatIconModule, MatListModule, MatMenuModule, MatToolbarModule];
 
-const imports = [MainRoutingModule, BrowserAnimationsModule, BrowserModule, CoreModule, HttpClientModule, LayoutModule, ...vendorImports];
+const imports = [CommonModule, MainRoutingModule, ...vendorImports];
 
 const _exports = [MainRootComponent];
 
+const providers = [];
+
 @NgModule({
   declarations,
   imports,
+  providers,
   exports: _exports,
 })
 export class MainModule {}

src/app/main/pages/index.ts

@@ -1,5 +1,6 @@
+import { MainErrorComponent } from './main-error/main-error.component';
 import { MainRootComponent } from './main-root/main-root.component';
 
-export const pages = [MainRootComponent];
+export const pages = [MainErrorComponent, MainRootComponent];
 
-export { MainRootComponent };
+export { MainErrorComponent, MainRootComponent };

src/app/main/pages/main-error/main-error.component.html

@@ -0,0 +1,10 @@
+<div class="main-error">
+  <h2 class="main-error-title">Oops!</h2>
+  <h3 class="main-error-subtitle">Sorry Something Went Wrong!</h3>
+  <a routerLink="/" mat-raised-button>
+    <mat-icon>home</mat-icon> Go To Home
+  </a>
+  <a href="mailto:loktionov129@gmail.com" mat-raised-button>
+    <mat-icon>mail</mat-icon> Contact Support
+  </a>
+</div>

src/app/main/pages/main-error/main-error.component.scss

@@ -0,0 +1,7 @@
+.main-error {
+  text-align: center;
+
+  .mat-raised-button {
+    margin: 0 4px 0 8px;
+  }
+}