Fix error handling: #36

Author: robisim74

ClientApp/package-lock.json

@@ -23,7 +23,7 @@
     "@angular/platform-browser": "7.0.0",
     "@angular/platform-browser-dynamic": "7.0.0",
     "@angular/router": "7.0.0",
-    "angular-oauth2-oidc": "4.0.3",
+    "angular-oauth2-oidc": "5.0.2",
     "core-js": "2.5.7",
     "hammerjs": "2.0.8",
     "rxjs": "6.3.3",

ClientApp/package.json

@@ -1,4 +1,5 @@
 import { Router } from '@angular/router';
+import { HttpErrorResponse } from '@angular/common/http';
 
 import { OAuthService } from 'angular-oauth2-oidc';
 
@@ -35,22 +36,17 @@ export class Signin {
                 // Redirects the user.
                 this.router.navigate([redirect]);
             })
-            .catch((error: any) => {
+            .catch((errorResponse: HttpErrorResponse) => {
                 // Checks for error in response (error from the Token endpoint).
-                if (error.body !== '') {
-                    const body: any = error.json();
-
-                    switch (body.error) {
+                if (errorResponse.error !== '') {
+                    switch (errorResponse.error.error) {
                         case 'invalid_grant':
                             this.errorMessages.push({ description: 'Invalid email or password.' });
                             break;
                         default:
                             this.errorMessages.push({ description: 'Unexpected error. Try again.' });
                     }
                 } else {
-                    const errMsg = (error.message) ? error.message :
-                        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
-                    console.log(errMsg);
                     this.errorMessages.push({ description: 'Server error. Try later.' });
                 }
             });

ClientApp/src/app/account/signin.ts

@@ -23,21 +23,18 @@ export class SignupComponent extends Signin {
     signup(): void {
         this.identityService.create(this.model)
             .subscribe(
-            (res: any) => {
-                // IdentityResult.
-                if (res.succeeded) {
-                    // Signs in the user.
-                    this.signin();
-                } else {
-                    this.errorMessages = res.errors;
-                }
-            },
-            (error: any) => {
-                const errMsg = (error.message) ? error.message :
-                    error.status ? `${error.status} - ${error.statusText}` : 'Server error';
-                console.log(errMsg);
-                this.errorMessages.push({ description: 'Server error. Try later.' });
-            });
+                (res: any) => {
+                    // IdentityResult.
+                    if (res.succeeded) {
+                        // Signs in the user.
+                        this.signin();
+                    } else {
+                        this.errorMessages = res.errors;
+                    }
+                },
+                (error: any) => {
+                    this.errorMessages.push({ description: 'Server error. Try later.' });
+                });
     }
 
 }

ClientApp/src/app/account/signup/signup.component.ts

@@ -23,16 +23,17 @@ export class ResourcesComponent implements OnInit {
             .get('/api/values', {
                 headers: this.authenticationService.getAuthorizationHeader()
             })
-            .subscribe((data: any) => {
-                this.values = data;
-            },
-            (error: HttpErrorResponse) => {
-                if (error.error instanceof Error) {
-                    console.log('An error occurred:', error.error.message);
-                } else {
-                    console.log(`Backend returned code ${error.status}, body was: ${error.error}`);
-                }
-            });
+            .subscribe(
+                (data: any) => {
+                    this.values = data;
+                },
+                (error: HttpErrorResponse) => {
+                    if (error.error instanceof Error) {
+                        console.log('An error occurred:', error.error.message);
+                    } else {
+                        console.log(`Backend returned code ${error.status}, body was: ${error.error}`);
+                    }
+                });
     }
 
 }

ClientApp/src/app/resources/resources.component.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
-import { BehaviorSubject, Observable, throwError as _throw } from 'rxjs';
+import { BehaviorSubject, Observable, throwError } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
 
 import { AuthenticationService } from './authentication.service';
@@ -26,11 +26,12 @@ import { AuthenticationService } from './authentication.service';
             .get('/api/identity/GetAll', {
                 headers: this.authenticationService.getAuthorizationHeader()
             })
-            .subscribe((data: any) => {
-                this.users.next(data);
-            },
+            .subscribe(
+                (data: any) => {
+                    this.users.next(data);
+                },
                 (error: HttpErrorResponse) => {
-                    if (error.error instanceof Error) {
+                    if (error.error instanceof ErrorEvent) {
                         console.log('An error occurred:', error.error.message);
                     } else {
                         console.log(`Backend returned code ${error.status}, body was: ${error.error}`);
@@ -54,7 +55,7 @@ import { AuthenticationService } from './authentication.service';
                 return response;
             }),
             catchError((error: any) => {
-                return _throw(error);
+                return throwError(error);
             }));
     }
 
@@ -71,12 +72,13 @@ import { AuthenticationService } from './authentication.service';
             .post('/api/identity/Delete', body, {
                 headers: this.authenticationService.getAuthorizationHeader()
             })
-            .subscribe(() => {
-                // Refreshes the users.
-                this.getAll();
-            },
+            .subscribe(
+                () => {
+                    // Refreshes the users.
+                    this.getAll();
+                },
                 (error: HttpErrorResponse) => {
-                    if (error.error instanceof Error) {
+                    if (error.error instanceof ErrorEvent) {
                         console.log('An error occurred:', error.error.message);
                     } else {
                         console.log(`Backend returned code ${error.status}, body was: ${error.error}`);