fix(state): handle error emission in connect using ErrorHandler

rx-angular · edbzn · Apr 26, 2023 · May 25, 2023 · May 25, 2023 · fa72532aa36c314185170c213ea3d106d17a206b
commit fa72532aa36c314185170c213ea3d106d17a206b
diff --git a/libs/state/selections/src/lib/accumulation-observable.ts b/libs/state/selections/src/lib/accumulation-observable.ts
@@ -29,7 +29,7 @@ export function createAccumulationObservable<T extends object>({
   stateObservables = new Subject<Observable<Partial<T>>>(),
   stateSlices = new Subject<Partial<T>>(),
   accumulatorObservable = new BehaviorSubject(defaultAccumulator),
-  handleError = (e: any) => console.error(e),
+  handleError = (e: unknown) => console.error(e),
 } = {}): Accumulator<T> {
   const signal$ = merge(
     stateObservables.pipe(
@@ -49,7 +49,7 @@ export function createAccumulationObservable<T extends object>({
       (error) => handleError(error)
     ),
     // @Notice We catch the error here as it get lost in between `publish` and `publishReplay`. We return empty to
-    catchError((e) => EMPTY),
+    catchError(() => EMPTY),
     publish()
   );
   const state$: Observable<T> = signal$.pipe(publishReplay(1));

diff --git a/libs/state/spec/rx-state.component.spec.ts b/libs/state/spec/rx-state.component.spec.ts
@@ -3,9 +3,10 @@ import {
   ErrorHandler,
   Input,
   Output,
+  Type,
   ViewChild,
 } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { RxState } from '@rx-angular/state';
 import { select } from '@rx-angular/state/selections';
 import { PrimitiveState } from '@test-helpers';
@@ -105,21 +106,17 @@ export class RxStateGlueContainerComponent extends RxState<PrimitiveState> {
 
 describe('LocalProviderTestComponent', () => {
   let component: RxStateInjectionComponent;
-  let fixture: ComponentFixture<RxStateInjectionComponent>;
-  let errorHandlerSpy: any;
+  let errorHandlerSpy: jest.Mock;
 
   beforeEach(() => {
-    const testBed = TestBed.configureTestingModule({
-      declarations: [RxStateInjectionComponent],
+    const { component: c, errorHandler: e } = setupTestComponent({
+      testComponent: RxStateInjectionComponent,
       providers: [
         { provide: ErrorHandler, useValue: { handleError: jest.fn() } },
       ],
-      teardown: { destroyAfterEach: true },
     });
-    fixture = TestBed.createComponent(RxStateInjectionComponent);
-    component = fixture.componentInstance;
-    errorHandlerSpy = testBed.inject(ErrorHandler).handleError;
-    fixture.detectChanges();
+    component = c;
+    errorHandlerSpy = e.handleError as jest.Mock;
   });
 
   it('should create', () => {
@@ -137,21 +134,17 @@ describe('LocalProviderTestComponent', () => {
 
 describe('InheritanceTestComponent', () => {
   let component: RxStateInheritanceComponent;
-  let fixture: ComponentFixture<RxStateInheritanceComponent>;
-  let errorHandlerSpy: any;
+  let errorHandlerSpy: jest.Mock;
 
   beforeEach(() => {
-    const testBed = TestBed.configureTestingModule({
-      declarations: [RxStateInheritanceComponent],
-      teardown: { destroyAfterEach: true },
+    const { component: c, errorHandler: e } = setupTestComponent({
+      testComponent: RxStateInheritanceComponent,
       providers: [
         { provide: ErrorHandler, useValue: { handleError: jest.fn() } },
       ],
     });
-    fixture = TestBed.createComponent(RxStateInheritanceComponent);
-    component = fixture.componentInstance;
-    errorHandlerSpy = testBed.inject(ErrorHandler).handleError;
-    fixture.detectChanges();
+    component = c;
+    errorHandlerSpy = e.handleError as jest.Mock;
   });
 
   it('should create', () => {
@@ -168,3 +161,59 @@ describe('InheritanceTestComponent', () => {
     });
   });
 });
+
+describe('CustomErrorHandler', () => {
+  let component: RxStateInheritanceComponent;
+  let errorHandlerSpy: jest.SpyInstance;
+
+  class CustomErrorHandler implements ErrorHandler {
+    private prod = true;
+    handleError() {
+      if (this.prod) {
+        throw new Error('Prod error');
+      }
+      throw new Error('Dev error');
+    }
+  }
+
+  beforeEach(() => {
+    const { component: c, errorHandler: e } = setupTestComponent({
+      testComponent: RxStateInheritanceComponent,
+      providers: [
+        {
+          provide: ErrorHandler,
+          useClass: CustomErrorHandler,
+        },
+      ],
+    });
+    component = c;
+    errorHandlerSpy = jest.spyOn(e, 'handleError');
+  });
+
+  describe('state.connect', () => {
+    it('should handle error through CustomErrorHandler', () => {
+      const error$ = throwError(() => new Error('whoops'));
+      component.connect('str', error$);
+      expect(errorHandlerSpy).toThrow(new Error('Prod error'));
+    });
+  });
+});
+
+function setupTestComponent({
+  testComponent,
+  providers,
+}: {
+  testComponent: Type<any>;
+  providers: any[];
+}) {
+  const testBed = TestBed.configureTestingModule({
+    declarations: [testComponent],
+    providers: [...providers],
+    teardown: { destroyAfterEach: true },
+  });
+  const fixture = TestBed.createComponent(testComponent);
+  const component = fixture.componentInstance;
+  const errorHandler = testBed.inject(ErrorHandler);
+
+  return { fixture, component, errorHandler };
+}
diff --git a/libs/state/src/lib/rx-state.service.ts b/libs/state/src/lib/rx-state.service.ts
@@ -53,9 +53,9 @@ export type ProjectValueReducer<T, K extends keyof T, V> = (
 @Injectable()
 export class RxState<T extends object> implements OnDestroy, Subscribable<T> {
   private subscription = new Subscription();
-  private handleError = inject(ErrorHandler).handleError;
+  private errorHandler = inje
4F97
ct(ErrorHandler);
   private accumulator = createAccumulationObservable<T>({
-    handleError: this.handleError,
+    handleError: this.errorHandler.handleError.bind(this.errorHandler),
   });
   private effectObservable = createSideEffectObservable();