fix(component): capture errors from observable when using ngrxPush …

…pipe and `ngrxLet` directive Closes #3100
ngrx · Jul 28, 2021 · 23c846b · 23c846b
1 parent b67af2f
commit 23c846b
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@ logs
 *.log
 .nyc
 .nyc_output
+.history
 
 # Runtime data
 pids

diff --git a/modules/component/spec/core/cd-aware/cd-aware_creator.spec.ts b/modules/component/spec/core/cd-aware/cd-aware_creator.spec.ts
@@ -1,4 +1,4 @@
-import { OnDestroy } from '@angular/core';
+import { ErrorHandler, OnDestroy } from '@angular/core';
 import {
  concat,
  EMPTY,
@@ -9,7 +9,6 @@ import {
  throwError,
  Unsubscribable,
 } from 'rxjs';
-
 import {
  CdAware,
  createCdAware,
@@ -35,14 +34,15 @@ class CdAwareImplementation<U> implements OnDestroy {
  complete: () => (this.completed = true),
  };
 
- constructor() {
+ constructor(errorHandler: ErrorHandler) {
  this.cdAware = createCdAware<U>({
  render: createRender({
  ngZone: manualInstanceNgZone,
  cdRef: new MockChangeDetectorRef(),
  }),
  updateViewContextObserver: this.updateViewContextObserver,
  resetContextObserver: this.resetContextObserver,
+ errorHandler,
  });
  this.subscription = this.cdAware.subscribe();
  }
@@ -53,16 +53,19 @@ class CdAwareImplementation<U> implements OnDestroy {
 }
 
 let cdAwareImplementation: CdAwareImplementation<any>;
-const setupCdAwareImplementation = () => {
- cdAwareImplementation = new CdAwareImplementation();
+const setupCdAwareImplementation = (errorHandler: ErrorHandler) => {
+ cdAwareImplementation = new CdAwareImplementation(errorHandler);
  cdAwareImplementation.renderedValue = undefined;
  cdAwareImplementation.error = undefined;
  cdAwareImplementation.completed = false;
 };
 
 describe('CdAware', () => {
+ let errorHandlerCb: jest.Mock;
+
  beforeEach(() => {
- setupCdAwareImplementation();
+ errorHandlerCb = jest.fn();
+ setupCdAwareImplementation({ handleError: errorHandlerCb });
  });
 
  it('should be implementable', () => {
@@ -145,12 +148,12 @@ describe('CdAware', () => {
  });
 
  it('error handling', () => {
- cdAwareImplementation.cdAware.nextPotentialObservable(
- throwError('Error!')
- );
+ const error = 'Error!';
+ cdAwareImplementation.cdAware.nextPotentialObservable(throwError(error));
  expect(cdAwareImplementation.renderedValue).toBe(undefined);
- expect(cdAwareImplementation.error).toBe('Error!');
+ expect(cdAwareImplementation.error).toBe(error);
  expect(cdAwareImplementation.completed).toBe(false);
+ expect(errorHandlerCb).toHaveBeenCalledWith(error);
  });
 
  it('completion handling', () => {

diff --git a/modules/component/src/core/cd-aware/cd-aware_creator.ts b/modules/component/src/core/cd-aware/cd-aware_creator.ts
@@ -1,3 +1,4 @@
+import { ErrorHandler } from '@angular/core';
 import {
  EMPTY,
  from,
@@ -35,6 +36,7 @@ export function createCdAware<U>(cfg: {
  render: () => void;
  resetContextObserver: NextObserver<void>;
  updateViewContextObserver: NextObserver<U | undefined | null>;
+ errorHandler: ErrorHandler;
 }): CdAware<U | undefined | null> {
  const potentialObservablesSubject: Subject<
  ObservableInput<U> | undefined | null
@@ -72,6 +74,7 @@ export function createCdAware<U>(cfg: {
  tap(cfg.updateViewContextObserver),
  tap(() => cfg.render()),
  catchError((e) => {
+ cfg.errorHandler.handleError(e);
  return EMPTY;
  })
  );

diff --git a/modules/component/src/let/let.directive.ts b/modules/component/src/let/let.directive.ts
@@ -1,15 +1,14 @@
 import {
  ChangeDetectorRef,
  Directive,
+ ErrorHandler,
  Input,
  NgZone,
  OnDestroy,
  TemplateRef,
  ViewContainerRef,
 } from '@angular/core';
-
 import { NextObserver, ObservableInput, Observer, Unsubscribable } from 'rxjs';
-
 import { CdAware, createCdAware } from '../core/cd-aware/cd-aware_creator';
 import { createRender } from '../core/cd-aware/creator_render';
 
@@ -157,12 +156,14 @@ export class LetDirective<U> implements OnDestroy {
  cdRef: ChangeDetectorRef,
  ngZone: NgZone,
  private readonly templateRef: TemplateRef<LetViewContext<U>>,
- private readonly viewContainerRef: ViewContainerRef
+ private readonly viewContainerRef: ViewContainerRef,
+ errorHandler: ErrorHandler
  ) {
  this.cdAware = createCdAware<U>({
  render: createRender({ cdRef, ngZone }),
  resetContextObserver: this.resetContextObserver,
  updateViewContextObserver: this.updateViewContextObserver,
+ errorHandler,
  });
  this.subscription = this.cdAware.subscribe();
  }

diff --git a/modules/component/src/push/push.pipe.ts b/modules/component/src/push/push.pipe.ts
@@ -1,12 +1,12 @@
 import {
  ChangeDetectorRef,
+ ErrorHandler,
  NgZone,
  OnDestroy,
  Pipe,
  PipeTransform,
 } from '@angular/core';
 import { NextObserver, ObservableInput, Unsubscribable } from 'rxjs';
-
 import { CdAware, createCdAware } from '../core/cd-aware/cd-aware_creator';
 import { createRender } from '../core/cd-aware/creator_render';
 
@@ -68,11 +68,16 @@ export class PushPipe<S> implements PipeTransform, OnDestroy {
  next: (value: S | null | undefined) => (this.renderedValue = value),
  };
 
- constructor(cdRef: ChangeDetectorRef, ngZone: NgZone) {
+ constructor(
+ cdRef: ChangeDetectorRef,
+ ngZone: NgZone,
+ errorHandler: ErrorHandler
+ ) {
  this.cdAware = createCdAware<S>({
  render: createRender({ cdRef, ngZone }),
  updateViewContextObserver: this.updateViewContextObserver,
  resetContextObserver: this.resetContextObserver,
+ errorHandler,
  });
  this.subscription = this.cdAware.subscribe();
  }