fix(core): notify profiler events in case of errors

Profiler events are expected to be symmetric, yet in the case of errors this symmetry may break
if events aren't always kept in sync with their corresponding start event. This commit moves
various end events to be run from a finally-block, allowing them to notify the profiler even
when an error has occurred.

Fixes angular#62947

Author: JoostK

packages/core/src/application/application_ref.ts

@@ -590,6 +590,7 @@ export class ApplicationRef {
   private tickImpl = (): void => {
     (typeof ngDevMode === 'undefined' || ngDevMode) && warnIfDestroyed(this._destroyed);
     if (this._runningTick) {
+      profiler(ProfilerEvent.ChangeDetectionEnd);
       throw new RuntimeError(
         RuntimeErrorCode.RECURSIVE_APPLICATION_REF_TICK,
         ngDevMode && 'ApplicationRef.tick is called recursively',
@@ -628,8 +629,11 @@ export class ApplicationRef {
     let runs = 0;
     while (this.dirtyFlags !== ApplicationRefDirtyFlags.None && runs++ < MAXIMUM_REFRESH_RERUNS) {
       profiler(ProfilerEvent.ChangeDetectionSyncStart);
-      this.synchronizeOnce();
-      profiler(ProfilerEvent.ChangeDetectionSyncEnd);
+      try {
+        this.synchronizeOnce();
+      } finally {
+        profiler(ProfilerEvent.ChangeDetectionSyncEnd);
+      }
     }
 
     if ((typeof ngDevMode === 'undefined' || ngDevMode) && runs >= MAXIMUM_REFRESH_RERUNS) {

packages/core/src/render3/instructions/change_detection.ts

@@ -426,9 +426,11 @@ function detectChangesInComponent(
   profiler(ProfilerEvent.ComponentStart);
 
   const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
-  detectChangesInViewIfAttached(componentView, mode);
-
-  profiler(ProfilerEvent.ComponentEnd, componentView[CONTEXT] as any as {});
+  try {
+    detectChangesInViewIfAttached(componentView, mode);
+  } finally {
+    profiler(ProfilerEvent.ComponentEnd, componentView[CONTEXT] as any as {});
+  }
 }
 
 /**
@@ -551,8 +553,11 @@ function processHostBindingOpCodes(tView: TView, lView: LView): void {
         setBindingRootForHostBindings(bindingRootIndx, directiveIdx);
         const context = lView[directiveIdx];
         profiler(ProfilerEvent.HostBindingsUpdateStart, context);
-        hostBindingFn(RenderFlags.Update, context);
-        profiler(ProfilerEvent.HostBindingsUpdateEnd, context);
+        try {
+          hostBindingFn(RenderFlags.Update, context);
+        } finally {
+          profiler(ProfilerEvent.HostBindingsUpdateEnd, context);
+        }
       }
     }
   } finally {

packages/core/src/render3/instructions/render.ts

@@ -43,9 +43,11 @@ export function renderComponent(hostLView: LView, componentHostIdx: number) {
 
   profiler(ProfilerEvent.ComponentStart);
 
-  renderView(componentTView, componentView, componentView[CONTEXT]);
-
-  profiler(ProfilerEvent.ComponentEnd, componentView[CONTEXT] as any as {});
+  try {
+    renderView(componentTView, componentView, componentView[CONTEXT]);
+  } finally {
+    profiler(ProfilerEvent.ComponentEnd, componentView[CONTEXT] as any as {});
+  }
 }
 
 /**

packages/core/test/acceptance/profiler_spec.ts

@@ -492,6 +492,117 @@ describe('profiler', () => {
       ).toBeTrue();
     });
 
+    it('should capture child component creation events when a template error occurs', () => {
+      @Component({selector: 'my-child', template: '{{ error() }}'})
+      class ChildComponent {
+        constructor() {
+          throw new Error('Simulated error');
+        }
+      }
+      @Component({selector: 'my-comp', imports: [ChildComponent], template: '<my-child/>'})
+      class MyComponent {}
+
+      expect(() => TestBed.createComponent(MyComponent)).toThrow();
+
+      expect(p.hasEvents(ProfilerEvent.ComponentStart, ProfilerEvent.ComponentEnd)).toBeTrue();
+    });
+
+    it('should capture child component change detection events when a template error occurs', () => {
+      @Component({selector: 'my-child', template: '{{ error() }}'})
+      class ChildComponent {
+        error() {
+          throw new Error('Simulated error');
+        }
+      }
+      @Component({selector: 'my-comp', imports: [ChildComponent], template: '<my-child/>'})
+      class MyComponent {}
+
+      const fixture = TestBed.createComponent(MyComponent);
+
+      p.clearEvents();
+
+      expect(() => fixture.detectChanges(false)).toThrow();
+
+      expect(p.hasEvents(ProfilerEvent.ComponentStart, ProfilerEvent.ComponentEnd)).toBeTrue();
+    });
+
+    it('should capture child component change detection events when a template error occurs', () => {
+      @Component({selector: 'my-child', template: '{{ error() }}'})
+      class ChildComponent {
+        error() {
+          throw new Error('Simulated error');
+        }
+      }
+      @Component({selector: 'my-comp', imports: [ChildComponent], template: '<my-child/>'})
+      class MyComponent {}
+
+      TestBed.createComponent(MyComponent);
+
+      p.clearEvents();
+
+      expect(() => TestBed.tick()).toThrow();
+      expect(p.events).toEqual([
+        ProfilerEvent.ChangeDetectionStart,
+        ProfilerEvent.ChangeDetectionSyncStart,
+        ProfilerEvent.ComponentStart,
+        ProfilerEvent.TemplateUpdateStart,
+        ProfilerEvent.TemplateUpdateEnd,
+        ProfilerEvent.ComponentStart,
+        ProfilerEvent.TemplateUpdateStart,
+        ProfilerEvent.TemplateUpdateEnd,
+        ProfilerEvent.ComponentEnd,
+        ProfilerEvent.ComponentEnd,
+        ProfilerEvent.ChangeDetectionSyncEnd,
+        ProfilerEvent.ChangeDetectionEnd,
+      ]);
+    });
+
+    it('should capture host binding events when an error occurs', () => {
+      @Component({selector: 'my-comp', host: {'[a]': 'error()'}, template: ''})
+      class MyComponent {
+        error() {
+          throw new Error('Simulated error');
+        }
+      }
+
+      const fixture = TestBed.createComponent(MyComponent);
+
+      p.clearEvents();
+
+      expect(() => fixture.detectChanges(false)).toThrow();
+
+      expect(
+        p.hasEvents(ProfilerEvent.HostBindingsUpdateEnd, ProfilerEvent.HostBindingsUpdateEnd),
+      ).toBeTrue();
+    });
+
+    it('should capture symmetric tick events when incorrectly called recursively', () => {
+      @Component({selector: 'my-comp', template: '{{ illegalTick() }}'})
+      class MyComponent {
+        illegalTick() {
+          TestBed.tick();
+        }
+      }
+
+      TestBed.createComponent(MyComponent);
+      p.clearEvents();
+
+      expect(() => TestBed.tick()).toThrow();
+
+      expect(p.events).toEqual([
+        ProfilerEvent.ChangeDetectionStart,
+        ProfilerEvent.ChangeDetectionSyncStart,
+        ProfilerEvent.ComponentStart,
+        ProfilerEvent.TemplateUpdateStart,
+        ProfilerEvent.ChangeDetectionStart,
+        ProfilerEvent.ChangeDetectionEnd,
+        ProfilerEvent.TemplateUpdateEnd,
+        ProfilerEvent.ComponentEnd,
+        ProfilerEvent.ChangeDetectionSyncEnd,
+        ProfilerEvent.ChangeDetectionEnd,
+      ]);
+    });
+
     it('should invoke a profiler when host bindings are evaluated', () => {
       @Component({
         selector: 'my-comp',
@@ -533,7 +644,7 @@ describe('profiler', () => {
         template: `
           @defer (on immediate) {
             nothing to see here...
-          } 
+          }
         `,
       })
       class MyComponent {}