fix error events not working

Author: robin-drexler

.changeset/nasty-spoons-wonder.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/polyfill': patch
+---
+
+fix error events not working

packages/polyfill/source/ErrorEvent.ts

@@ -0,0 +1,20 @@
+import {Event} from './Event.ts';
+
+// https://html.spec.whatwg.org/multipage/webappapis.html#errorevent
+export class ErrorEvent extends Event {
+  readonly message: ErrorEventInit['message'];
+  readonly filename: ErrorEventInit['filename'];
+  readonly lineno: ErrorEventInit['lineno'];
+  readonly colno: ErrorEventInit['colno'];
+  readonly error: ErrorEventInit['error'];
+
+  constructor(type: string, eventInitDict: ErrorEventInit) {
+    super(type, eventInitDict);
+
+    this.message = eventInitDict.message;
+    this.filename = eventInitDict.filename;
+    this.lineno = eventInitDict.lineno;
+    this.colno = eventInitDict.colno;
+    this.error = eventInitDict.error;
+  }
+}

packages/polyfill/source/PromiseRejectionEvent.ts

@@ -0,0 +1,14 @@
+import {Event} from './Event.ts';
+
+//https://html.spec.whatwg.org/multipage/webappapis.html#promiserejectionevent
+export class PromiseRejectionEvent extends Event {
+  readonly promise: PromiseRejectionEventInit['promise'];
+  readonly reason: PromiseRejectionEventInit['reason'];
+
+  constructor(type: string, eventInitDict: PromiseRejectionEventInit) {
+    super(type, eventInitDict);
+
+    this.promise = eventInitDict.promise;
+    this.reason = eventInitDict.reason;
+  }
+}

packages/polyfill/source/Window.ts

@@ -2,6 +2,8 @@ import {Document} from './Document.ts';
 import {Event} from './Event.ts';
 import {EventTarget} from './EventTarget.ts';
 import {CustomEvent} from './CustomEvent.ts';
+import {ErrorEvent} from './ErrorEvent.ts';
+import {PromiseRejectionEvent} from './PromiseRejectionEvent.ts';
 import {Node} from './Node.ts';
 import {ParentNode} from './ParentNode.ts';
 import {ChildNode} from './ChildNode.ts';
@@ -18,6 +20,16 @@ import {MutationObserver} from './MutationObserver.ts';
 import {HOOKS} from './constants.ts';
 import type {Hooks} from './hooks.ts';
 
+type OnErrorHandler =
+  | ((
+      message: string,
+      filename?: string,
+      lineno?: number,
+      colno?: number,
+      error?: any,
+    ) => void)
+  | null;
+
 export class Window extends EventTarget {
   [HOOKS]: Partial<Hooks> = {};
   name = '';
@@ -30,6 +42,8 @@ export class Window extends EventTarget {
   location = globalThis.location;
   navigator = globalThis.navigator;
   Event = Event;
+  ErrorEvent = ErrorEvent;
+  PromiseRejectionEvent = PromiseRejectionEvent;
   EventTarget = EventTarget;
   CustomEvent = CustomEvent;
   Node = Node;
@@ -46,6 +60,59 @@ export class Window extends EventTarget {
   HTMLTemplateElement = HTMLTemplateElement;
   MutationObserver = MutationObserver;
 
+  #currentOnErrorHandler: ((event: any) => void) | null = null;
+  #currentOriginalOnErrorHandler: OnErrorHandler = null;
+  #currentOnUnhandledRejectionHandler: WindowEventHandlers['onunhandledrejection'] =
+    null;
+
+  get onerror() {
+    return this.#currentOriginalOnErrorHandler as OnErrorEventHandler;
+  }
+  set onerror(handler: OnErrorHandler) {
+    if (this.#currentOnErrorHandler) {
+      this.removeEventListener('error', this.#currentOnErrorHandler);
+    }
+    if (handler && typeof handler === 'function') {
+      this.#currentOriginalOnErrorHandler = handler;
+      this.#currentOnErrorHandler = (event: ErrorEvent) => {
+        handler(
+          event.message ?? 'Error',
+          event.filename,
+          event.lineno,
+          event.colno,
+          event.error,
+        );
+      };
+      this.addEventListener('error', this.#currentOnErrorHandler);
+    } else {
+      this.#currentOnErrorHandler = null;
+      this.#currentOriginalOnErrorHandler = null;
+    }
+  }
+
+  get onunhandledrejection() {
+    return this.#currentOnUnhandledRejectionHandler;
+  }
+  set onunhandledrejection(
+    handler: WindowEventHandlers['onunhandledrejection'],
+  ) {
+    if (this.#currentOnUnhandledRejectionHandler) {
+      this.removeEventListener(
+        'unhandledrejection',
+        this.#currentOnUnhandledRejectionHandler as any,
+      );
+    }
+    if (handler && typeof handler === 'function') {
+      this.#currentOnUnhandledRejectionHandler = handler;
+      this.addEventListener(
+        'unhandledrejection',
+        this.#currentOnUnhandledRejectionHandler as any,
+      );
+    } else {
+      this.#currentOnUnhandledRejectionHandler = null;
+    }
+  }
+
   static setGlobal(window: Window) {
     const properties = Object.getOwnPropertyDescriptors(window);
 

packages/polyfill/source/tests/global-errors.test.ts

@@ -0,0 +1,149 @@
+import {ErrorEvent} from '../ErrorEvent.ts';
+import {PromiseRejectionEvent} from '../PromiseRejectionEvent.ts';
+import {Window} from '../Window.ts';
+import {describe, it, expect, beforeEach, afterEach, vi} from 'vitest';
+
+describe('global errors', () => {
+  describe('onerror', () => {
+    let originalOnerror: any;
+
+    beforeEach(() => {
+      originalOnerror = globalThis.onerror;
+    });
+
+    afterEach(() => {
+      globalThis.onerror = originalOnerror;
+    });
+
+    it('sets onerror handler on window instance', () => {
+      const handler = vi.fn();
+      const window = new Window();
+
+      window.onerror = handler;
+      expect(window.onerror).toBe(handler);
+    });
+
+    it('overrides onerror handler on window instance', () => {
+      const handler = vi.fn();
+      const handler2 = vi.fn();
+
+      const window = new Window();
+      window.onerror = handler;
+      window.onerror = handler2;
+
+      expect(window.onerror).toBe(handler2);
+    });
+
+    it('calls handler when error occurs', () => {
+      const handler = vi.fn();
+      const window = new Window();
+
+      const error = new Error('test');
+
+      window.onerror = handler;
+      window.dispatchEvent(
+        new ErrorEvent('error', {
+          error,
+          filename: 'test.ts',
+          lineno: 1,
+          colno: 1,
+        }),
+      );
+
+      expect(handler).toHaveBeenCalledWith('Error', 'test.ts', 1, 1, error);
+    });
+
+    it('allows null assignment', () => {
+      const handler = vi.fn();
+      const window = new Window();
+      window.onerror = handler;
+      expect(window.onerror).toBe(handler);
+
+      window.onerror = null;
+      expect(window.onerror).toBe(null);
+    });
+
+    it('works when window is set as global', () => {
+      const window = new Window();
+      Window.setGlobalThis(window);
+      const handler = vi.fn();
+      window.onerror = handler;
+
+      expect(window.onerror).toBe(handler);
+    });
+  });
+
+  describe('onunhandledrejection', () => {
+    let originalOnunhandledrejection: any;
+
+    beforeEach(() => {
+      originalOnunhandledrejection = globalThis.onunhandledrejection;
+    });
+
+    afterEach(() => {
+      globalThis.onunhandledrejection = originalOnunhandledrejection;
+    });
+
+    it('sets onunhandledrejection handler on window instance', () => {
+      const handler = vi.fn();
+      const window = new Window();
+
+      window.onunhandledrejection = handler;
+      expect(window.onunhandledrejection).toBe(handler);
+    });
+
+    it('overrides onunhandledrejection handler on window instance', () => {
+      const handler = vi.fn();
+      const handler2 = vi.fn();
+      const window = new Window();
+
+      window.onunhandledrejection = handler;
+      window.onunhandledrejection = handler2;
+      expect(window.onunhandledrejection).toBe(handler2);
+    });
+
+    it('calls handler when unhandled rejection occurs', () => {
+      const handler = vi.fn();
+      const window = new Window();
+      window.onunhandledrejection = handler;
+
+      const error = new Error('test');
+      const promise = Promise.resolve();
+
+      window.dispatchEvent(
+        new PromiseRejectionEvent('unhandledrejection', {
+          promise: promise,
+          reason: error,
+        }),
+      );
+
+      expect(handler).toHaveBeenCalledWith(
+        expect.objectContaining({
+          promise,
+          reason: error,
+        }),
+      );
+
+      expect(handler).toHaveBeenCalledWith(expect.any(PromiseRejectionEvent));
+    });
+
+    it('allows null assignment', () => {
+      const handler = vi.fn();
+      const window = new Window();
+      window.onunhandledrejection = handler;
+      expect(window.onunhandledrejection).toBe(handler);
+
+      window.onunhandledrejection = null;
+      expect(window.onunhandledrejection).toBe(null);
+    });
+
+    it('works when window is set as global', () => {
+      const window = new Window();
+      Window.setGlobalThis(window);
+      const handler = vi.fn();
+      window.onunhandledrejection = handler;
+
+      expect(window.onunhandledrejection).toBe(handler);
+    });
+  });
+});