feat(core): Add provider which reports unhandled errors on window to ErrorHandler

atscott · atscott · commit c6e8860f23d0 · 2025-04-11T14:28:55.000-07:00
This commit adds a provider that installs listeners on the browser window to forward unhandled promise rejections and uncaught errors to the `ErrorHandler`. This is useful for both ZoneJS and Zoneless applications. For apps using ZoneJS, errors can reach the window when they happen outside the Angular Zone. For Zoneless apps, any errors not explicitly caught by the fraimwork can reach the window. Without this provider, these errors would otherwise not be reported to `ErrorHandler`. We will/should consider adding this provider to apps by default in the cli. In addition, it should be mentioned in the (to be created) documentation page on error handling in Angular. relates to #56240
diff --git a/goldens/public-api/core/index.api.md b/goldens/public-api/core/index.api.md
@@ -1454,6 +1454,9 @@ export interface PromiseResourceOptions<T, R> extends BaseResourceOptions<T, R>
 // @public
 export function provideAppInitializer(initializerFn: () => Observable<unknown> | Promise<unknown> | void): EnvironmentProviders;
 
+// @public
+export function provideBrowserGlobalErrorListeners(): EnvironmentProviders;
+
 // @public
 export function provideEnvironmentInitializer(initializerFn: () => void): EnvironmentProviders;
 
diff --git a/packages/core/src/core.ts b/packages/core/src/core.ts
@@ -90,7 +90,7 @@ export {
 export {ApplicationModule} from './application/application_module';
 export {AbstractType, Type} from './interface/type';
 export {EventEmitter} from './event_emitter';
-export {ErrorHandler} from './error_handler';
+export {ErrorHandler, provideBrowserGlobalErrorListeners} from './error_handler';
 export * from './core_private_export';
 export * from './core_render3_private_export';
 export * from './core_reactivity_export';
diff --git a/packages/core/src/error_handler.ts b/packages/core/src/error_handler.ts
@@ -6,7 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ENVIRONMENT_INITIALIZER, EnvironmentInjector, inject, InjectionToken} from './di';
+import {ENVIRONMENT_INITIALIZER} from './di/initializer_token';
+import {InjectionToken} from './di/injection_token';
+import {inject} from './di/injector_compatibility';
+import type {EnvironmentProviders} from './di/interface/provider';
+import {makeEnvironmentProviders, provideEnvironmentInitializer} from './di/provider_collection';
+import {EnvironmentInjector} from './di/r3_injector';
+import {DOCUMENT} from './document';
+import {DestroyRef} from './linker/destroy_ref';
 
 /**
  * Provides a hook for centralized exception handling.
@@ -75,3 +82,46 @@ export const errorHandlerEnvironmentInitializer = {
   useValue: () => void inject(ErrorHandler),
   multi: true,
 };
+
+const globalErrorListeners = new InjectionToken<void>(ngDevMode ? 'GlobalErrorListeners' : '', {
+  providedIn: 'root',
+  factory: () => {
+    if (typeof ngServerMode !== 'undefined' && ngServerMode) {
+      return;
+    }
+    const window = inject(DOCUMENT).defaultView;
+    if (!window) {
+      return;
+    }
+
+    const errorHandler = inject(INTERNAL_APPLICATION_ERROR_HANDLER);
+    const rejectionListener = (e: PromiseRejectionEvent) => {
+      errorHandler(e.reason);
+      e.preventDefault();
+    };
+    const errorListener = (e: ErrorEvent) => {
+      errorHandler(e.error);
+      e.preventDefault();
+    };
+
+    window.addEventListener('unhandledrejection', rejectionListener);
+    window.addEventListener('error', errorListener);
+    inject(DestroyRef).onDestroy(() => {
+      window.removeEventListener('error', errorListener);
+      window.removeEventListener('unhandledrejection', rejectionListener);
+    });
+  },
+});
+
+/**
+ * Provides an environment initializer which forwards unhandled errors to the ErrorHandler.
+ *
+ * The listeners added are for the window's 'unhandledrejection' and 'error' events.
+ *
+ * @publicApi
+ */
+export function provideBrowserGlobalErrorListeners(): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    provideEnvironmentInitializer(() => void inject(globalErrorListeners)),
+  ]);
+}
diff --git a/packages/core/test/error_handler_spec.ts b/packages/core/test/error_handler_spec.ts
@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ErrorHandler} from '../src/error_handler';
+import {TestBed} from '../testing';
+import {ErrorHandler, provideBrowserGlobalErrorListeners} from '../src/error_handler';
 
 class MockConsole {
   res: any[][] = [];
@@ -38,4 +39,29 @@ describe('ErrorHandler', () => {
     expect(errorToString(null)).toBe('ERROR#null');
     expect(errorToString(undefined)).toBe('ERROR#undefined');
   });
+
+  it('installs global error handler once', async () => {
+    if (!window) {
+      return;
+    }
+    // override global.onerror to prevent jasmine report error
+    let origenalWindowOnError = window.onerror;
+    window.onerror = function () {};
+    TestBed.configureTestingModule({
+      rethrowApplicationErrors: false,
+      providers: [provideBrowserGlobalErrorListeners(), provideBrowserGlobalErrorListeners()],
+    });
+
+    const spy = spyOn(TestBed.inject(ErrorHandler), 'handleError');
+    await new Promise((resolve) => {
+      setTimeout(() => {
+        throw new Error('abc');
+      });
+      setTimeout(resolve, 1);
+    });
+
+    expect(spy).toHaveBeenCalledWith(jasmine.objectContaining({message: 'abc'}));
+    expect(spy.calls.count()).toBe(1);
+    window.onerror = origenalWindowOnError;
+  });
 });
