Merge pull request #516 from bcgov/oleks

DSS-695: handle errors that occure before the main application has been loaded
bcgov · Aug 8, 2024 · ca540e9 · ca540e9
2 parents f90c114 + e60f47f
commit ca540e9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -1,5 +1,17 @@
 <app-layout *ngIf="currentUserLoaded"></app-layout>
-<div *ngIf="!currentUserLoaded">Loading...</div>
+<div *ngIf="!currentUserLoaded && !isCurrentUserLoadedWithError">Loading...</div>
+<div class="error-block" *ngIf="isCurrentUserLoadedWithError">
+    <h2 class="error">
+        Internal error
+    </h2>
+    <h3 class="error"> Please try again later</h3>
+    <h4> If additional support is required, contact us at <a
+            href="mailto:DSSadmin@gov.bc.ca">{{'DSSadmin@gov.bc.ca'}}</a></h4>
+    <div class="error-details">
+        {{errorText}}
+    </div>
+</div>
+
 <div class="loader" *ngIf="isLoading">
     <div class="spinner">
         <div class="lds-ring">

diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
@@ -1,6 +1,13 @@
 :host {
     overflow: auto;
 
+    .error-block {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        align-items: center;
+    }
+
     .loader {
         position: fixed;
         top: 0;

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -18,6 +18,8 @@ export class AppComponent implements OnInit {
     currentUserLoaded = false;
     isLoading = true;
     loaderTitle? = 'Loading'
+    isCurrentUserLoadedWithError = false;
+    errorText = '';
 
     constructor(
         private userService: UserDataService,
@@ -38,6 +40,15 @@ export class AppComponent implements OnInit {
             next: (user) => {
                 this.currentUserLoaded = !!user;
             },
+            error: (err) => {
+                if (err.error) {
+                    this.errorText = `${err.error.detail}: ${err.error.instance}`
+                }
+
+                this.isCurrentUserLoadedWithError = true;
+                this.loaderService.loadingEnd();
+                this.cd.detectChanges();
+            },
             complete: () => {
                 this.loaderService.loadingEnd();
             },

diff --git a/frontend/src/app/common/consts/error-interceptor.const.ts b/frontend/src/app/common/consts/error-interceptor.const.ts
@@ -16,7 +16,7 @@ export const errorInterceptor: HttpInterceptorFn = (req, next) => {
                         return EMPTY;
                     case 500:
                         errorService.showErrorFromBackend(err as any);
-                        return EMPTY;
+                        return throwError(() => err);
 
                     default:
                         break;