feat/handling exceptions from browser window events

Author: piotr-szewczyk

packages/browser/src/client.ts

@@ -1,36 +1,62 @@
-import { IBrowserClient, TraceoOptions } from "./types/client";
+import { IBrowserClient, TraceoBrowserError, TraceoOptions } from "./types/client";
 import { Transport } from "./transport";
 import { utils } from "./utils";
 import { stacktrace } from "./exceptions/stacktrace";
 import { Trace } from "./types/stacktrace";
 import { BrowserIncidentType } from "./types/transport";
+import { EventOnErrorType, EventOnUnhandledRejectionType, windowEventHandlers } from "./handlers";
+import { BrowserInfoType } from "./types/browser";
 
 export abstract class BrowserClient implements IBrowserClient {
   public headers!: { [key: string]: any };
   public options: TraceoOptions;
   public transport: Transport;
+  private browser: BrowserInfoType;
 
   constructor(options: TraceoOptions) {
     this.options = options;
     this.transport = new Transport(this.options);
+    this.browser = utils.browserDetails();
 
     this.initSDK();
   }
 
+  /**
+   * Method to implement dedicated logic only for a specific type of SDK.
+   * Implement in dedicated client.
+   */
   public abstract postInitSDK(): void;
 
-  public sendError(error: Error): void {
+  /**
+   * Method to handle exceptions catched by ErrorBoundary component
+   * Use this method via IBrowserClient interface implmeneted in dedicated clients
+   * @param error
+   */
+  public handleError(error: TraceoBrowserError): void {
     const err = this.constructError(error);
-    this.transport.send<BrowserIncidentType>(err, this.headers);
+    if (err) {
+      this.transport.send<BrowserIncidentType>(err, this.headers);
+    }
   }
 
-  private constructError(error: Error): BrowserIncidentType {
-    const browser = utils.browserDetails();
+  /**
+   * Method to send errors catched by window event handlers like onerror or onunhandledrejection
+   * @param error
+   */
+  private sendError(error: BrowserIncidentType): void {
+    this.transport.send<BrowserIncidentType>(error, this.headers);
+  }
+
+  private constructError(error?: Error): BrowserIncidentType | null {
+    if (!error) {
+      console.debug("-- : --");
+      return null;
+    }
 
-    const type = error.name;
-    const message = error.message;
+    const type = error?.name || "Error";
+    const message = error?.message || "(No message)";
 
-    const stack = error.stack || "";
+    const stack = error?.stack || "";
 
     const traces: Trace[] = stacktrace.parse(stack);
 
@@ -39,13 +65,80 @@ export abstract class BrowserClient implements IBrowserClient {
       message,
       stack,
       traces,
-      browser
+      browser: this.browser
     };
 
     return err;
   }
 
   private initSDK(): void {
+    if (this.isOffline) {
+      return;
+    }
+
+    if (window !== undefined) {
+      this.initWindowEventHandlers();
+    }
+
     this.postInitSDK();
   }
+
+  private initWindowEventHandlers() {
+    /**
+     * Event handlers setup to catch exceptions via native js mechanism
+     */
+
+    windowEventHandlers["onerror"]((data: EventOnErrorType) => this.handleOnErrorEvent(data));
+    windowEventHandlers["unhandledrejection"]((data: EventOnUnhandledRejectionType) =>
+      this.handleOnUnhandledRejectionEvent(data)
+    );
+  }
+
+  private handleOnErrorEvent = (data: EventOnErrorType) => {
+    if (data.error) {
+      const eventError = this.constructError(data?.error);
+      if (!eventError) {
+        console.debug("-- --- --");
+        return;
+      }
+
+      if (data?.event) {
+        eventError.type = data.event.toString();
+      }
+
+      this.sendError(eventError);
+    }
+  };
+
+  private handleOnUnhandledRejectionEvent = (data: EventOnUnhandledRejectionType) => {
+    // Without reason inside event there is no informations about catched exception
+    if ("reason" in data.event) {
+      const reason = data.event.reason;
+
+      const type = "Unhandled rejection";
+      const message = reason.message;
+
+      let stack = "";
+      if ("stack" in reason) {
+        stack = reason.stack;
+      } else {
+        stack = reason.toString();
+      }
+
+      const traces: Trace[] = stacktrace.parse(stack);
+      const err: BrowserIncidentType = {
+        type,
+        message,
+        stack,
+        traces,
+        browser: this.browser
+      };
+
+      this.sendError(err);
+    }
+  };
+
+  private get isOffline(): boolean | undefined {
+    return this.options.offline;
+  }
 }

packages/browser/src/exceptions/stacktrace.ts

@@ -12,7 +12,7 @@ const parse = (stackTrace: string): Trace[] => {
 
   for (const line of lines) {
     const stackTraceLine = parseStackTraceLine(line);
-    if (stackTraceLine) {
+    if (stackTraceLine && stackTraceLine?.filename) {
       traces.push(stackTraceLine);
     }
   }

packages/browser/src/handlers.ts

@@ -0,0 +1,48 @@
+export type WindowEvent = "unhandledrejection" | "onerror";
+
+type EventCallback<T> = (data: T) => void;
+
+export type EventOnUnhandledRejectionType = {
+  window: WindowEventHandlers;
+  event: PromiseRejectionEvent;
+};
+
+export type EventOnErrorType = {
+  event: Event | string;
+  source?: string;
+  lineno?: number;
+  colno?: number;
+  error?: Error;
+};
+
+const handleUnhandledrejection = (callback: EventCallback<EventOnUnhandledRejectionType>) => {
+  window.onunhandledrejection = function (this: WindowEventHandlers, ev: PromiseRejectionEvent) {
+    callback({
+      event: ev,
+      window: this
+    });
+  };
+};
+
+const handleOnError = (callback: EventCallback<EventOnErrorType>) => {
+  window.onerror = function (
+    event: Event | string,
+    source?: string,
+    lineno?: number,
+    colno?: number,
+    error?: Error
+  ) {
+    callback({
+      event,
+      source,
+      lineno,
+      colno,
+      error
+    });
+  };
+};
+
+export const windowEventHandlers: Record<WindowEvent, Function> = {
+  onerror: handleOnError,
+  unhandledrejection: handleUnhandledrejection
+};

packages/browser/src/types/client.ts

@@ -2,12 +2,13 @@ export interface TraceoOptions {
   apiKey: string;
   appId: string;
   url: string;
+  offline?: boolean;
 }
 
 export interface TraceoBrowserError extends Error {}
 
 export interface IBrowserClient {
-  sendError(error: TraceoBrowserError): void;
+  handleError(error: TraceoBrowserError): void;
 }
 
 export type Dictionary<T> = {

packages/browser/src/types/transport.ts

@@ -17,9 +17,9 @@ export type RequestOptions<T> = {
 };
 
 export type BrowserIncidentType = {
-  type: string;
-  message: string;
-  stack: string;
+  type?: string;
+  message?: string;
+  stack?: string;
   browser: BrowserInfoType;
-  traces: Trace[];
+  traces?: Trace[];
 };

packages/react/src/ErrorBoundary.tsx

@@ -28,7 +28,7 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
       onError(error, componentStack);
     }
 
-    traceo.sendError(error);
+    traceo.handleError(error);
     this.setState({ error, stacktrace: componentStack });
   }