josunlp / josunlp Goto Github PK

Ohne das Verwenden eines großen Frameworks wie Angular, React oder Vue könntest du den globalen Error-Handler folgendermaßen implementieren:

Erstelle eine Klasse namens GlobalErrorHandler, die die window.onerror-Eigenschaft überschreibt und als Ereignishandler für JavaScript-Fehler dient. Diese Klasse sollte eine Methode handleError() implementieren, die als Parameter ein Objekt vom Typ ErrorEvent erhält und eine Aktion ausführt, wenn ein Fehler auftritt.
Copy code
export class GlobalErrorHandler {
  constructor() {
    // Überschreibe die window.onerror-Eigenschaft mit einer neuen Funktion
    window.onerror = (errorEvent: ErrorEvent) => {
      this.handleError(errorEvent);
    };
  }

  handleError(errorEvent: ErrorEvent) {
    // Hier kannst du die gewünschte Aktion ausführen, wenn ein Fehler auftritt,
    // z.B. das Schreiben des Fehlers in ein Log-File oder das Anzeigen einer Fehlermeldung
    // an den Benutzer.
  }
}
Erstelle eine neue Instanz der GlobalErrorHandler-Klasse, um den globalen Error-Handler zu initialisieren. Dies kannst du zum Beispiel im Haupteinstiegspunkt deiner Anwendung tun.
Copy code
// Erstelle eine neue Instanz des GlobalErrorHandler
const globalErrorHandler = new GlobalErrorHandler();
Um sicherzustellen, dass es nur eine einzige Instanz des GlobalErrorHandler gibt, kannst du das Singleton-Muster verwenden. Dazu musst du eine statische Methode getInstance() in der GlobalErrorHandler-Klasse erstellen, die eine Instanz der Klasse zurückgibt. Wenn die Instanz noch nicht erstellt wurde, wird sie innerhalb der Methode erstellt und zurückgegeben. Wenn sie bereits erstellt wurde, wird dieselbe Instanz zurückgegeben.
Copy code
export class GlobalErrorHandler {
  private static instance: GlobalErrorHandler;

  // Erstelle eine statische Methode, die eine Instanz der Klasse zurückgibt
  public static getInstance() {
    if (!GlobalErrorHandler.instance) {
      GlobalErrorHandler.instance = new GlobalErrorHandler();
    }
    return GlobalErrorHandler.instance;
  }

  constructor() {
    // Überschreibe die window.onerror-Eigenschaft mit einer neuen Funktion
    window.onerror = (errorEvent: ErrorEvent) => {
      this.handleError(