pkozlowski-opensource · Dec 20, 2024 · Dec 18, 2024 · Jan 14, 2025
diff --git a/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts b/devtools/projects/ng-devtools-backend/src/lib/hooks/profiler/native.ts
@@ -43,7 +43,7 @@ export class NgProfiler extends Profiler {
 
   private _initialize(): void {
     ngDebugClient().ɵsetProfiler(
-      (event: ɵProfilerEvent, instanceOrLView: {} | null, hookOrListener: any) =>
+      (event: ɵProfilerEvent, instanceOrLView: {} | null = null, hookOrListener: any) =>
         this._callbacks.forEach((cb) => cb(event, instanceOrLView, hookOrListener)),
     );
   }

diff --git a/packages/core/src/application/application_ref.ts b/packages/core/src/application/application_ref.ts
@@ -47,6 +47,8 @@ import {NgZone} from '../zone/ng_zone';
 import {ApplicationInitStatus} from './application_init';
 import {TracingAction, TracingService, TracingSnapshot} from './tracing';
 import {EffectScheduler} from '../render3/reactivity/root_effect_scheduler';
+import {ProfilerEvent} from '../render3/profiler_types';
+import {profiler} from '../render3/profiler';
 
 /**
  * A DI token that provides a set of callbacks to
@@ -531,6 +533,8 @@ export class ApplicationRef {
     componentOrFactory: ComponentFactory<C> | Type<C>,
     rootSelectorOrNode?: string | any,
   ): ComponentRef<C> {
+    profiler(ProfilerEvent.BootstrapComponentStart);
+
     (typeof ngDevMode === 'undefined' || ngDevMode) && warnIfDestroyed(this._destroyed);
     const isComponentFactory = componentOrFactory instanceof ComponentFactory;
     const initStatus = this._injector.get(ApplicationInitStatus);
@@ -576,6 +580,9 @@ export class ApplicationRef {
       const _console = this._injector.get(Console);
       _console.log(`Angular is running in development mode.`);
     }
+
+    profiler(ProfilerEvent.BootstrapComponentEnd, compRef);
+
     return compRef;
   }
 
@@ -598,6 +605,8 @@ export class ApplicationRef {
 
   /** @internal */
   _tick = (): void => {
+    profiler(ProfilerEvent.ChangeDetectionStart);
+
     if (this.tracingSnapshot !== null) {
       const snapshot = this.tracingSnapshot;
       this.tracingSnapshot = null;
@@ -622,7 +631,6 @@ export class ApplicationRef {
     try {
       this._runningTick = true;
       this.synchronize();
-
       if (typeof ngDevMode === 'undefined' || ngDevMode) {
         for (let view of this.allViews) {
           view.checkNoChanges();
@@ -635,6 +643,8 @@ export class ApplicationRef {
       this._runningTick = false;
       setActiveConsumer(prevConsumer);
       this.afterTick.next();
+
+      profiler(ProfilerEvent.ChangeDetectionEnd);
     }
   };
 
@@ -653,7 +663,9 @@ export class ApplicationRef {
 
     let runs = 0;
     while (this.dirtyFlags !== ApplicationRefDirtyFlags.None && runs++ < MAXIMUM_REFRESH_RERUNS) {
+      profiler(ProfilerEvent.ChangeDetectionSyncStart);
       this.synchronizeOnce();
+      profiler(ProfilerEvent.ChangeDetectionSyncEnd);
     }
 
     if ((typeof ngDevMode === 'undefined' || ngDevMode) && runs >= MAXIMUM_REFRESH_RERUNS) {

diff --git a/packages/core/src/application/create_application.ts b/packages/core/src/application/create_application.ts
@@ -13,12 +13,13 @@ import {Type} from '../interface/type';
 import {createOrReusePlatformInjector} from '../platform/platform';
 import {assertStandaloneComponentType} from '../render3/errors';
 import {EnvironmentNgModuleRefAdapter} from '../render3/ng_module_ref';
-import {NgZone} from '../zone/ng_zone';
 
 import {_callAndReportToErrorHandler, ApplicationRef} from './application_ref';
 import {ChangeDetectionScheduler} from '../change_detection/scheduling/zoneless_scheduling';
 import {ChangeDetectionSchedulerImpl} from '../change_detection/scheduling/zoneless_scheduling_impl';
 import {bootstrap} from '../platform/bootstrap';
+import {profiler} from '../render3/profiler';
+import {ProfilerEvent} from '../render3/profiler_types';
 
 /**
  * Internal create application API that implements the core application creation logic and optional
@@ -37,6 +38,7 @@ export function internalCreateApplication(config: {
   appProviders?: Array<Provider | EnvironmentProviders>;
   platformProviders?: Provider[];
 }): Promise<ApplicationRef> {
+  profiler(ProfilerEvent.BootstrapApplicationStart);
   try {
     const {rootComponent, appProviders, platformProviders} = config;
 
@@ -69,5 +71,7 @@ export function internalCreateApplication(config: {
     });
   } catch (e) {
     return Promise.reject(e);
+  } finally {
+    profiler(ProfilerEvent.BootstrapApplicationEnd);
   }
 }
diff --git a/packages/core/src/defer/rendering.ts b/packages/core/src/defer/rendering.ts
@@ -56,6 +56,8 @@ import {
   getTDeferBlockDetails,
   getTemplateIndexForState,
 } from './utils';
+import {profiler} from '../render3/profiler';
+import {ProfilerEvent} from '../render3/profiler_types';
 
 /**
  * **INTERNAL**, avoid referencing it in application code.
@@ -243,6 +245,8 @@ function applyDeferBlockState(
   tNode: TNode,
   hostLView: LView<unknown>,
 ) {
+  profiler(ProfilerEvent.DeferBlockStateStart);
+
   const stateTmplIndex = getTemplateIndexForState(newState, hostLView, tNode);
 
   if (stateTmplIndex !== null) {
@@ -306,6 +310,8 @@ function applyDeferBlockState(
       lDetails[ON_COMPLETE_FNS] = null;
     }
   }
+
+  profiler(ProfilerEvent.DeferBlockStateEnd);
 }
 
 /**

diff --git a/packages/core/src/render3/after_render/manager.ts b/packages/core/src/render3/after_render/manager.ts
@@ -17,6 +17,8 @@ import {
 } from '../../change_detection/scheduling/zoneless_scheduling';
 import {type DestroyRef} from '../../linker/destroy_ref';
 import {TracingAction, TracingService, TracingSnapshot} from '../../application/tracing';
+import {profiler} from '../profiler';
+import {ProfilerEvent} from '../profiler_types';
 
 export class AfterRenderManager {
   impl: AfterRenderImpl | null = null;
@@ -65,6 +67,12 @@ export class AfterRenderImpl {
    * might be scheduled.
    */
   execute(): void {
+    const hasSequencesToExecute = this.sequences.size > 0;
+
+    if (hasSequencesToExecute) {
+      profiler(ProfilerEvent.AfterRenderHooksStart);
+    }
+
     this.executing = true;
     for (const phase of AFTER_RENDER_PHASES) {
       for (const sequence of this.sequences) {
@@ -74,10 +82,11 @@ export class AfterRenderImpl {
 
         try {
           sequence.pipelinedValue = this.ngZone.runOutsideAngular(() =>
-            this.maybeTrace(
-              () => sequence.hooks[phase]!(sequence.pipelinedValue),
-              sequence.snapshot,
-            ),
+            this.maybeTrace(() => {
+              const hookFn = sequence.hooks[phase]!;
+              const value = hookFn(sequence.pipelinedValue);
+              return value;
+            }, sequence.snapshot),
           );
         } catch (err) {
           sequence.erroredOrDestroyed = true;
@@ -105,6 +114,10 @@ export class AfterRenderImpl {
       this.scheduler.notify(NotificationSource.DeferredRenderHook);
     }
     this.deferredRegistrations.clear();
+
+    if (hasSequencesToExecute) {
+      profiler(ProfilerEvent.AfterRenderHooksEnd);
+    }
   }
 
   register(sequence: AfterRenderSequence): void {

diff --git a/packages/core/src/render3/component_ref.ts b/packages/core/src/render3/component_ref.ts
@@ -89,6 +89,8 @@ import {getComponentLViewByIndex, getNativeByTNode, getTNode} from './util/view_
 import {ViewRef} from './view_ref';
 import {ChainedInjector} from './chained_injector';
 import {unregisterLView} from './interfaces/lview_tracking';
+import {profiler} from './profiler';
+import {ProfilerEvent} from './profiler_types';
 
 export class ComponentFactoryResolver extends AbstractComponentFactoryResolver {
   /**
@@ -214,6 +216,8 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
     rootSelectorOrNode?: any,
     environmentInjector?: NgModuleRef<any> | EnvironmentInjector | undefined,
   ): AbstractComponentRef<T> {
+    profiler(ProfilerEvent.DynamicComponentStart);
+
     const prevConsumer = setActiveConsumer(null);
     try {
       // Check if the component is orphan
@@ -397,6 +401,7 @@ export class ComponentFactory<T> extends AbstractComponentFactory<T> {
         unregisterLView(rootLView);
         throw e;
       } finally {
+        profiler(ProfilerEvent.DynamicComponentEnd);
         leaveView();
       }
 

diff --git a/packages/core/src/render3/instructions/change_detection.ts b/packages/core/src/render3/instructions/change_detection.ts
@@ -70,6 +70,8 @@ import {
 } from './shared';
 import {runEffectsInView} from '../reactivity/view_effect_runner';
 import {isDestroyed} from '../interfaces/type_checks';
+import {ProfilerEvent} from '../profiler_types';
+import {profiler} from '../profiler';
 
 /**
  * The maximum number of times the change detection traversal will rerun before throwing an error.
@@ -428,8 +430,12 @@ function detectChangesInComponent(
   mode: ChangeDetectionMode,
 ): void {
   ngDevMode && assertEqual(isCreationMode(hostLView), false, 'Should be run in update mode');
+  profiler(ProfilerEvent.ComponentStart);
+
   const componentView = getComponentLViewByIndex(componentHostIdx, hostLView);
   detectChangesInViewIfAttached(componentView, mode);
+
+  profiler(ProfilerEvent.ComponentEnd, componentView[CONTEXT] as any as {});
 }
 
 /**

diff --git a/packages/core/src/render3/instructions/render.ts b/packages/core/src/render3/instructions/render.ts
@@ -21,6 +21,8 @@ import {
   TVIEW,
   TView,
 } from '../interfaces/view';
+import {profiler} from '../profiler';
+import {ProfilerEvent} from '../profiler_types';
 import {enterView, leaveView} from '../state';
 import {getComponentLViewByIndex, isCreationMode} from '../util/view_utils';
 
@@ -38,7 +40,11 @@ export function renderComponent(hostLView: LView, componentHostIdx: number) {
     componentView[HYDRATION] = retrieveHydrationInfo(hostRNode, componentView[INJECTOR]);
   }
 
+  profiler(ProfilerEvent.ComponentStart);
+
   renderView(componentTView, componentView, componentView[CONTEXT]);
+
+  profiler(ProfilerEvent.ComponentEnd, componentView[CONTEXT] as any as {});
 }
 
 /**

diff --git a/packages/core/src/render3/instructions/shared.ts b/packages/core/src/render3/instructions/shared.ts
@@ -182,7 +182,10 @@ export function processHostBindingOpCodes(tView: TView, lView: LView): void {
         const hostBindingFn = hostBindingOpCodes[++i] as HostBindingsFunction<any>;
         setBindingRootForHostBindings(bindingRootIndx, directiveIdx);
         const context = lView[directiveIdx];
+
+        profiler(ProfilerEvent.HostBindingsUpdateStart, context);
         hostBindingFn(RenderFlags.Update, context);
+        profiler(ProfilerEvent.HostBindingsUpdateEnd, context);
       }
     }
   } finally {

diff --git a/packages/core/src/render3/profiler.ts b/packages/core/src/render3/profiler.ts
@@ -33,7 +33,7 @@ export const setProfiler = (profiler: Profiler | null) => {
  *  execution context
  * @returns
  */
-export const profiler: Profiler = function (event, instance, hookOrListener) {
+export const profiler: Profiler = function (event, instance = null, hookOrListener) {
   if (profilerCallback != null /* both `null` and `undefined` */) {
     profilerCallback(event, instance, hookOrListener);
   }

diff --git a/packages/core/src/render3/profiler_types.ts b/packages/core/src/render3/profiler_types.ts
@@ -160,5 +160,5 @@ export const enum ProfilerEvent {
  * Profiler function which the runtime will invoke before and after user code.
  */
 export interface Profiler {
-  (event: ProfilerEvent, instance: {} | null, hookOrListener?: (e?: any) => any): void;
+  (event: ProfilerEvent, instance?: {} | null, hookOrListener?: (e?: any) => any): void;
 }