feat: set business errors independent of REST API errors to trigger t…

…he error page

src/app/core/facades/app.facade.ts

@@ -5,7 +5,7 @@ import { combineLatest, merge, noop } from 'rxjs';
 import { filter, map, mapTo, shareReplay, startWith, withLatestFrom } from 'rxjs/operators';
 
 import { getAvailableLocales, getCurrentLocale, getDeviceType, getICMBaseURL } from 'ish-core/store/core/configuration';
-import { getGeneralError, getGeneralErrorType } from 'ish-core/store/core/error';
+import { businessError, getGeneralError, getGeneralErrorType } from 'ish-core/store/core/error';
 import { selectPath } from 'ish-core/store/core/router';
 import { getBreadcrumbData, getHeaderType, getWrapperClass, isStickyHeader } from 'ish-core/store/core/viewconf';
 import { getLoggedInCustomer } from 'ish-core/store/customer/user';
@@ -87,6 +87,10 @@ export class AppFacade {
     return isAppTypeREST && !isBusinessCustomer ? 'privatecustomers' : 'customers';
   }
 
+  setBusinessError(error: string) {
+    this.store.dispatch(businessError({ error }));
+  }
+
   /**
    * extracts a specific server setting from the store.
    * @param path the path to the server setting, starting from the serverConfig/_config store.

src/app/core/store/core/error/error.actions.ts

@@ -1,7 +1,9 @@
 import { createAction } from '@ngrx/store';
 
-import { httpError } from 'ish-core/utils/ngrx-creators';
+import { httpError, payload } from 'ish-core/utils/ngrx-creators';
 
 export const communicationTimeoutError = createAction('[Error] Communication Timeout Error', httpError());
 
 export const serverError = createAction('[Error] Server Error (5xx)', httpError());
+
+export const businessError = createAction('[Error] Business Error', payload<{ error: string }>());

src/app/core/store/core/error/error.effects.ts

@@ -20,12 +20,13 @@ export class ErrorEffects {
       .subscribe(status => httpStatusCodeService.setStatusAndRedirect(status));
   }
 
-  private mapStatus(state: HttpError): number {
-    if (state && typeof state.status === 'number') {
-      if (state.status === 0) {
-        return 504;
-      }
-      return state.status;
+  private mapStatus(state: HttpError | string): number {
+    if (!state) {
+      return 500;
+    } else if (typeof state === 'string') {
+      return 400;
+    } else if (typeof state.status === 'number') {
+      return state.status === 0 ? 504 : state.status;
     }
     return 500;
   }

src/app/core/store/core/error/error.reducer.ts

@@ -2,10 +2,10 @@ import { createReducer, on } from '@ngrx/store';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 
-import { communicationTimeoutError, serverError } from './error.actions';
+import { businessError, communicationTimeoutError, serverError } from './error.actions';
 
 export interface ErrorState {
-  current: HttpError;
+  current: HttpError | string;
   type: string;
 }
 
@@ -16,7 +16,7 @@ export const initialState: ErrorState = {
 
 export const errorReducer = createReducer(
   initialState,
-  on(serverError, communicationTimeoutError, (state: ErrorState, action) => ({
+  on(serverError, businessError, communicationTimeoutError, (state: ErrorState, action) => ({
     ...state,
     current: action.payload.error,
     type: action.type,

src/app/extensions/sentry/store/sentry-config/sentry-config.effects.ts

@@ -89,7 +89,7 @@ export class SentryConfigEffects {
         tap(error => {
           Sentry.captureEvent({
             level: Sentry.Severity.Error,
-            message: `${error.code} - ${error.message}`,
+            message: typeof error === 'string' ? error : `${error.code} - ${error.message}`,
             extra: { error },
             tags: { origin: 'Error Page' },
           });

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

@@ -1,5 +1,5 @@
-<ng-container *ngIf="error$ | async as generalError; else businessError">
+<ng-container *ngIf="error$ | async as generalError; else notFoundError">
   <ish-server-error [error]="generalError" [type]="type$ | async"></ish-server-error>
 </ng-container>
 
-<ng-template #businessError><ish-error></ish-error></ng-template>
+<ng-template #notFoundError><ish-error></ish-error></ng-template>

src/app/pages/error/error-page.component.ts

@@ -10,7 +10,7 @@ import { HttpError } from 'ish-core/models/http-error/http-error.model';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ErrorPageComponent implements OnInit {
-  error$: Observable<HttpError>;
+  error$: Observable<HttpError | string>;
   type$: Observable<string>;
 
   constructor(private appFacade: AppFacade) {}

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

@@ -3,10 +3,11 @@ <h1>{{ 'servererror.page.title' | translate }}</h1>
   <div class="error-text">
     <div [ishServerHtml]="'servererror.page.text' | translate"></div>
     <p class="text-muted" (click)="expand()">
-      <ng-container [ngSwitch]="error.status">
+      <ng-container [ngSwitch]="httpError?.status">
+        <ng-container *ngSwitchCase="undefined"> {{ stringError | translate }} </ng-container>
         <ng-container *ngSwitchCase="0"> Server timeout </ng-container>
         <ng-container *ngSwitchDefault>
-          Error code {{ error.status }}<br />
+          Error code {{ httpError.status }}<br />
           {{ type }}
         </ng-container>
       </ng-container>

src/app/pages/error/server-error/server-error.component.ts

@@ -19,11 +19,19 @@ export class ServerErrorComponent {
   /**
    * The occured error.
    */
-  @Input() error: HttpError;
+  @Input() error: HttpError | string;
   @Input() type: string;
 
   expanded = false;
 
+  get httpError() {
+    return this.error as HttpError;
+  }
+
+  get stringError() {
+    return this.error as string;
+  }
+
   expand() {
     this.expanded = true;
   }