New custom error handler to handle all the unmanaged application errors

src/app/utils/errorHandler.ts

@@ -0,0 +1,44 @@
+import { ErrorHandler, Injectable } from '@angular/core';
+import { MessageBoxService } from '../services/message-box.service';
+
+@Injectable()
+export class CustomErrorHandler implements ErrorHandler {
+
+  private lastMessage = '';
+  private lastStack = '';
+
+  constructor(
+    private mbs: MessageBoxService,
+  ) {
+    window.addEventListener('unhandledrejection', (event) => {
+      this.handleError(event.reason);
+    });
+  }
+
+  handleError(error: any) {
+
+    // extract error data
+    let message = error?.message ? error.message : error.toString();
+    let stack = error?.stack ? error.stack : '';
+
+    // avoid repeated errors (i.e. template errors in a @for loop)
+    if (this.lastMessage === message && this.lastStack === stack) {
+      return;
+    }
+    this.lastMessage = message;
+    this.lastStack = stack;
+
+    // error is logged to console, as usual
+    console.error(error);
+
+    this.mbs.showError({
+      error: message,
+      message: stack,
+      onConfirm: () => {
+        // reset last error
+        this.lastMessage = '';
+        this.lastStack = '';
+      }
+    });
+  }
+}

src/main.ts

@@ -1,12 +1,13 @@
 import { provideHttpClient } from '@angular/common/http';
-import { APP_INITIALIZER, enableProdMode, importProvidersFrom } from '@angular/core';
+import { APP_INITIALIZER, enableProdMode, ErrorHandler, importProvidersFrom } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { provideRouter, RouteReuseStrategy } from '@angular/router';
 import { IonicModule, IonicRouteStrategy, Platform } from '@ionic/angular';
 import { routes } from './app/app-routing.module';
 import { AppComponent } from './app/app.component';
 import { I18nService } from './app/services/i18n.service';
 import { SettingsService } from './app/services/settings.service';
+import { CustomErrorHandler } from './app/utils/errorHandler';
 import version from './app/version';
 import { environment } from './environments/environment';
 
@@ -21,6 +22,10 @@ bootstrapApplication(AppComponent, {
     importProvidersFrom(
       IonicModule.forRoot({ innerHTMLTemplatesEnabled: true }),
     ),
+    {
+      provide: ErrorHandler,
+      useClass: CustomErrorHandler,
+    },
     {
       provide: RouteReuseStrategy,
       useClass: IonicRouteStrategy,
@@ -61,5 +66,14 @@ function initializeApp(i18n: I18nService, settings: SettingsService, platform: P
     await i18n.initialize();
     await i18n.load(settings.culture ? settings.culture : settings.defaultCulture);
 
+    // intercept unmanaged errors
+    window.onerror = function (message, file, line, col, error) {
+      alert("Error occurred: " + error?.message);
+      return false;
+    };
+    window.addEventListener('unhandledrejection', function (e) {
+      alert("Error occurred: " + e.reason.message);
+    })
+
   }
 }