fix(store): setup unhandled error handler during NGXS initialization (#…

…2263)

In this commit, we override the RxJS `config.onUnhandledError` within the root store initializer,
but only after other code has already executed.
If users have a custom `config.onUnhandledError`, we might overwrite it too
early and capture the original `config.onUnhandledError` before it is properly set.

CHANGELOG.md

@@ -10,6 +10,7 @@ $ npm install @ngxs/store@dev
 - Refactor: Allow tree-shaking of dev-only code [#2259](https://github.com/ngxs/store/pull/2259)
 - Fix(store): Allow plain functions in `withNgxsPlugin` [#2255](https://github.com/ngxs/store/pull/2255)
 - Fix(store): Run plugins in injection context [#2256](https://github.com/ngxs/store/pull/2256)
+- Fix(store): Setup unhandled error handler during NGXS initialization [#2263](https://github.com/ngxs/store/pull/2263)
 - Fix(websocket-plugin): Do not dispatch action when root injector is destroyed [#2257](https://github.com/ngxs/store/pull/2257)
 - Refactor(store): Replace `exhaustMap` [#2254](https://github.com/ngxs/store/pull/2254)
 - Refactor(store): Tree-shake development options token [#2260](https://github.com/ngxs/store/pull/2260)

packages/store/src/internal/unhandled-rxjs-error-callback.ts

@@ -2,17 +2,26 @@ import { config } from 'rxjs';
 
 const ɵɵunhandledRxjsErrorCallbacks = new WeakMap<any, VoidFunction>();
 
-const existingHandler = config.onUnhandledError;
-config.onUnhandledError = function (error: any) {
-  const unhandledErrorCallback = ɵɵunhandledRxjsErrorCallbacks.get(error);
-  if (unhandledErrorCallback) {
-    unhandledErrorCallback();
-  } else if (existingHandler) {
-    existingHandler.call(this, error);
-  } else {
-    throw error;
+let installed = false;
+export function installOnUnhandhedErrorHandler(): void {
+  if (installed) {
+    return;
   }
-};
+
+  const existingHandler = config.onUnhandledError;
+  config.onUnhandledError = function (error: any) {
+    const unhandledErrorCallback = ɵɵunhandledRxjsErrorCallbacks.get(error);
+    if (unhandledErrorCallback) {
+      unhandledErrorCallback();
+    } else if (existingHandler) {
+      existingHandler.call(this, error);
+    } else {
+      throw error;
+    }
+  };
+
+  installed = true;
+}
 
 export function executeUnhandledCallback(error: any) {
   const unhandledErrorCallback = ɵɵunhandledRxjsErrorCallbacks.get(error);

packages/store/src/standalone-features/initializers.ts

@@ -10,13 +10,20 @@ import { StatesAndDefaults } from '../internal/internals';
 import { SelectFactory } from '../decorators/select/select-factory';
 import { InternalStateOperations } from '../internal/state-operations';
 import { LifecycleStateManager } from '../internal/lifecycle-state-manager';
+import { installOnUnhandhedErrorHandler } from '../internal/unhandled-rxjs-error-callback';
 
 /**
  * This function is shared by both NgModule and standalone features.
  * When using `NgxsModule.forRoot` and `provideStore`, we can depend on the
  * same initialization functionality.
  */
 export function rootStoreInitializer(): void {
+  // Override the RxJS `config.onUnhandledError` within the root store initializer,
+  // but only after other code has already executed.
+  // If users have a custom `config.onUnhandledError`, we might overwrite it too
+  // early and capture the original `config.onUnhandledError` before it is properly set.
+  installOnUnhandhedErrorHandler();
+
   const prebootFns = inject(NGXS_PREBOOT_FNS, { optional: true }) || [];
   prebootFns.forEach(prebootFn => prebootFn());