fix(component): capture errors from observable when using ngrxPush pipe and ngrxLet directive

Closes #3100

Author: maxime1992

.gitignore

@@ -3,6 +3,7 @@ logs
 *.log
 .nyc
 .nyc_output
+.history
 
 # Runtime data
 pids

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', () => {

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;
         })
       );

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();
   }

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();
   }