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

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 framework 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 angular#56240

PR Close angular#60704

Author: atscott

goldens/public-api/core/index.api.md

@@ -1444,6 +1444,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;
 

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';

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)),
+  ]);
+}

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 (isNode) {
+      return;
+    }
+    // override global.onerror to prevent jasmine report error
+    let originalWindowOnError = 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 = originalWindowOnError;
+  });
 });