use client hooks

Author: s1gr1d

packages/browser/src/profiling/index.ts

@@ -1,18 +1,7 @@
-import type { Profiler, ProfilingIntegration } from '@sentry/core';
+import type { Profiler } from '@sentry/core';
 import { debug, getClient } from '@sentry/core';
 import { DEBUG_BUILD } from '../debug-build';
 
-function isProfilingIntegrationWithProfiler(
-  integration: ProfilingIntegration | undefined,
-): integration is ProfilingIntegration {
-  return (
-    !!integration &&
-    typeof integration['_profiler'] !== 'undefined' &&
-    typeof integration['_profiler']['start'] === 'function' &&
-    typeof integration['_profiler']['stop'] === 'function'
-  );
-}
-
 /**
  * Starts the Sentry UI profiler.
  * This mode is exclusive with the transaction profiler and will only work if the profilesSampleRate is set to a falsy value.
@@ -25,19 +14,14 @@ function startProfiler(): void {
     return;
   }
 
-  const integration = client.getIntegrationByName<ProfilingIntegration>('BrowserProfiling');
+  const integration = client.getIntegrationByName('BrowserProfiling');
 
   if (!integration) {
     DEBUG_BUILD && debug.warn('BrowserProfiling integration is not available');
     return;
   }
 
-  if (!isProfilingIntegrationWithProfiler(integration)) {
-    DEBUG_BUILD && debug.warn('Profiler is not available on profiling integration.');
-    return;
-  }
-
-  integration._profiler.start();
+  client.emit('startUIProfiler');
 }
 
 /**
@@ -51,18 +35,13 @@ function stopProfiler(): void {
     return;
   }
 
-  const integration = client.getIntegrationByName<ProfilingIntegration>('BrowserProfiling');
+  const integration = client.getIntegrationByName('BrowserProfiling');
   if (!integration) {
     DEBUG_BUILD && debug.warn('ProfilingIntegration is not available');
     return;
   }
 
-  if (!isProfilingIntegrationWithProfiler(integration)) {
-    DEBUG_BUILD && debug.warn('Profiler is not available on profiling integration.');
-    return;
-  }
-
-  integration._profiler.stop();
+  client.emit('stopUIProfiler');
 }
 
 /**

packages/browser/src/profiling/integration.ts

@@ -1,4 +1,4 @@
-import type { EventEnvelope, Integration, IntegrationFn, Profile, Span } from '@sentry/core';
+import type { EventEnvelope, IntegrationFn, Profile, Span } from '@sentry/core';
 import { debug, defineIntegration, getActiveSpan, getRootSpan, hasSpansEnabled } from '@sentry/core';
 import type { BrowserOptions } from '../client';
 import { DEBUG_BUILD } from '../debug-build';
@@ -23,9 +23,9 @@ const INTEGRATION_NAME = 'BrowserProfiling';
 const _browserProfilingIntegration = (() => {
   return {
     name: INTEGRATION_NAME,
-    _profiler: new UIProfiler(),
     setup(client) {
       const options = client.getOptions() as BrowserOptions;
+      const profiler = new UIProfiler();
 
       if (!hasLegacyProfiling(options) && !options.profileLifecycle) {
         // Set default lifecycle mode
@@ -52,8 +52,12 @@ const _browserProfilingIntegration = (() => {
       if (!hasLegacyProfiling(options)) {
         const lifecycleMode = options.profileLifecycle;
 
+        // Registering hooks in all lifecycle modes to be able to notify users in case they want to start/stop the profiler manually in `trace` mode
+        client.on('startUIProfiler', () => profiler.start());
+        client.on('stopUIProfiler', () => profiler.stop());
+
         if (lifecycleMode === 'manual') {
-          this._profiler.initialize(client);
+          profiler.initialize(client);
         } else if (lifecycleMode === 'trace') {
           if (!hasSpansEnabled(options)) {
             DEBUG_BUILD &&
@@ -63,19 +67,19 @@ const _browserProfilingIntegration = (() => {
             return;
           }
 
-          this._profiler.initialize(client);
+          profiler.initialize(client);
 
           // If there is an active, sampled root span already, notify the profiler
           if (rootSpan) {
-            this._profiler.notifyRootSpanActive(rootSpan);
+            profiler.notifyRootSpanActive(rootSpan);
           }
 
           // In case rootSpan is created slightly after setup -> schedule microtask to re-check and notify.
           WINDOW.setTimeout(() => {
             const laterActiveSpan = getActiveSpan();
             const laterRootSpan = laterActiveSpan && getRootSpan(laterActiveSpan);
             if (laterRootSpan) {
-              this._profiler.notifyRootSpanActive(laterRootSpan);
+              profiler.notifyRootSpanActive(laterRootSpan);
             }
           }, 0);
         }
@@ -151,10 +155,6 @@ const _browserProfilingIntegration = (() => {
       return attachProfiledThreadToEvent(event);
     },
   };
-}) satisfies IntegrationFn<BrowserProfilingIntegration>;
-
-interface BrowserProfilingIntegration extends Integration {
-  _profiler: UIProfiler;
-}
+}) satisfies IntegrationFn;
 
 export const browserProfilingIntegration = defineIntegration(_browserProfilingIntegration);

packages/core/src/client.ts

@@ -794,6 +794,24 @@ export abstract class Client<O extends ClientOptions = ClientOptions> {
     callback: (request: unknown, response: unknown, normalizedRequest: RequestEventData) => void,
   ): () => void;
 
+  /**
+   * A hook that is called when the UI Profiler should start profiling.
+   *
+   * This hook is called when running `Sentry.uiProfiler.startProfiler()`.
+   *
+   * @returns {() => void} A function that, when executed, removes the registered callback.
+   */
+  public on(hook: 'startUIProfiler', callback: () => void): () => void;
+
+  /**
+   * A hook that is called when the UI Profiler should stop profiling.
+   *
+   * This hook is called when running `Sentry.uiProfiler.stopProfiler()`.
+   *
+   * @returns {() => void} A function that, when executed, removes the registered callback.
+   */
+  public on(hook: 'stopUIProfiler', callback: () => void): () => void;
+
   /**
    * Register a hook on this client.
    */
@@ -1003,6 +1021,16 @@ export abstract class Client<O extends ClientOptions = ClientOptions> {
     normalizedRequest: RequestEventData,
   ): void;
 
+  /**
+   * Emit a hook event for starting the UI Profiler.
+   */
+  public emit(hook: 'startUIProfiler'): void;
+
+  /**
+   * Emit a hook event for stopping the UI Profiler.
+   */
+  public emit(hook: 'stopUIProfiler'): void;
+
   /**
    * Emit a hook that was previously registered via `on()`.
    */