feat(profiling): allow collecting of profiles that started before sentry had loaded

Author: JonasBa

packages/browser/src/index.ts

@@ -53,4 +53,5 @@ export type { SpanStatusType } from '@sentry/core';
 export type { Span } from '@sentry/types';
 export { makeBrowserOfflineTransport } from './transports/offline';
 export { onProfilingStartRouteTransaction } from './profiling/hubextensions';
+export type {JSSelfProfiler} from "./profiling/jsSelfProfiling"
 export { BrowserProfilingIntegration } from './profiling/integration';

packages/browser/src/profiling/hubextensions.ts

@@ -172,19 +172,9 @@ export function wrapTransactionWithProfiling(transaction: Transaction): Transact
       return null;
     }
 
-    // This is temporary - we will use the collected span data to evaluate
-    // if deferring txn.finish until profiler resolves is a viable approach.
-    const stopProfilerSpan = transaction.startChild({
-      description: 'profiler.stop',
-      op: 'profiler',
-      origin: 'auto.profiler.browser',
-    });
-
     return profiler
       .stop()
       .then((p: JSSelfProfile): null => {
-        stopProfilerSpan.finish();
-
         if (maxDurationTimeoutID) {
           WINDOW.clearTimeout(maxDurationTimeoutID);
           maxDurationTimeoutID = undefined;
@@ -209,7 +199,6 @@ export function wrapTransactionWithProfiling(transaction: Transaction): Transact
         return null;
       })
       .catch(error => {
-        stopProfilerSpan.finish();
         if (__DEBUG_BUILD__) {
           logger.log('[Profiling] error while stopping profiler:', error);
         }

packages/browser/src/profiling/integration.ts

@@ -2,12 +2,14 @@ import type { EventProcessor, Hub, Integration, Transaction } from '@sentry/type
 import type { Profile } from '@sentry/types/src/profiling';
 import { logger } from '@sentry/utils';
 
-import type { BrowserClient } from './../client';
 import { wrapTransactionWithProfiling } from './hubextensions';
-import type { ProfiledEvent } from './utils';
+import { getAutomatedPageLoadProfile, ProfiledEvent, addProfileToMap, AUTOMATED_PAGELOAD_PROFILE_ID } from './utils';
+import { getMainCarrier } from '@sentry/core';
+import { JSSelfProfile } from '../../build/npm/types/profiling/jsSelfProfiling';
 import {
   addProfilesToEnvelope,
   createProfilingEvent,
+  isAutomatedPageLoadTransaction,
   findProfiledTransactionsFromEnvelope,
   PROFILE_MAP,
 } from './utils';
@@ -37,13 +39,58 @@ export class BrowserProfilingIntegration implements Integration {
    */
   public setupOnce(_addGlobalEventProcessor: (callback: EventProcessor) => void, getCurrentHub: () => Hub): void {
     this.getCurrentHub = getCurrentHub;
-    const client = this.getCurrentHub().getClient() as BrowserClient;
+
+    const hub = this.getCurrentHub();
+    const client = hub.getClient();
+    const carrier = getMainCarrier();
 
     if (client && typeof client.on === 'function') {
       client.on('startTransaction', (transaction: Transaction) => {
         wrapTransactionWithProfiling(transaction);
       });
 
+      // If a pageload profile exists, attach finishTransaction handler and set profile_id to the reserved
+      // automated page load profile id so that it will get picked up by the beforeEnvelope hook.
+      const pageLoadProfile = getAutomatedPageLoadProfile(carrier);
+      if (pageLoadProfile) {
+        client.on('finishTransaction', (transaction: Transaction) => {
+          if (!isAutomatedPageLoadTransaction(transaction)) {
+            return;
+          }
+
+          transaction.setContext('profile', { profile_id: AUTOMATED_PAGELOAD_PROFILE_ID });
+          pageLoadProfile
+            .stop()
+            .then((p: JSSelfProfile): null => {
+              if (__DEBUG_BUILD__) {
+                logger.log(
+                  `[Profiling] stopped profiling of transaction: ${transaction.name || transaction.description}`,
+                );
+              }
+
+              // In case of an overlapping transaction, stopProfiling may return null and silently ignore the overlapping profile.
+              if (!p) {
+                if (__DEBUG_BUILD__) {
+                  logger.log(
+                    `[Profiling] profiler returned null profile for: ${transaction.name || transaction.description}`,
+                    'this may indicate an overlapping transaction or a call to stopProfiling with a profile title that was never started',
+                  );
+                }
+                return null;
+              }
+
+              addProfileToMap(AUTOMATED_PAGELOAD_PROFILE_ID, p);
+              return null;
+            })
+            .catch(error => {
+              if (__DEBUG_BUILD__) {
+                logger.log('[Profiling] error while stopping profiler:', error);
+              }
+              return null;
+            });
+        });
+      }
+
       client.on('beforeEnvelope', (envelope): void => {
         // if not profiles are in queue, there is nothing to add to the envelope.
         if (!PROFILE_MAP['size']) {
@@ -59,7 +106,13 @@ export class BrowserProfilingIntegration implements Integration {
 
         for (const profiledTransaction of profiledTransactionEvents) {
           const context = profiledTransaction && profiledTransaction.contexts;
-          const profile_id = context && context['profile'] && (context['profile']['profile_id'] as string);
+          const profile_id = context && context['profile'] && context['profile']['profile_id'];
+
+          if (typeof profile_id !== "string") {
+            __DEBUG_BUILD__ &&
+              logger.log('[Profiling] cannot find profile for a transaction without a profile context');
+            continue;
+          }
 
           if (!profile_id) {
             __DEBUG_BUILD__ &&

packages/browser/src/profiling/utils.ts

@@ -1,18 +1,21 @@
 /* eslint-disable max-lines */
 
-import { DEFAULT_ENVIRONMENT, getCurrentHub } from '@sentry/core';
+import { Carrier, DEFAULT_ENVIRONMENT, getCurrentHub } from '@sentry/core';
 import type { DebugImage, Envelope, Event, StackFrame, StackParser } from '@sentry/types';
 import type { Profile, ThreadCpuProfile } from '@sentry/types/src/profiling';
 import { browserPerformanceTimeOrigin, forEachEnvelopeItem, GLOBAL_OBJ, logger, uuid4 } from '@sentry/utils';
 
 import { WINDOW } from '../helpers';
 import type { JSSelfProfile, JSSelfProfileStack } from './jsSelfProfiling';
+import type { Transaction } from '@sentry/types';
+import { JSSelfProfiler } from '../../build/npm/types/profiling/jsSelfProfiling';
 
 const MS_TO_NS = 1e6;
 // Use 0 as main thread id which is identical to threadId in node:worker_threads
 // where main logs 0 and workers seem to log in increments of 1
 const THREAD_ID_STRING = String(0);
 const THREAD_NAME = 'main';
+export const AUTOMATED_PAGELOAD_PROFILE_ID = "auto.pageload.browser"
 
 // Machine properties (eval only once)
 let OS_PLATFORM = '';
@@ -189,6 +192,29 @@ export function isProfiledTransactionEvent(event: Event): event is ProfiledEvent
   return !!(event.sdkProcessingMetadata && event.sdkProcessingMetadata['profile']);
 }
 
+export function getAutomatedPageLoadProfile(carrier: Carrier): JSSelfProfiler | undefined {
+  const __SENTRY__ = carrier.__SENTRY__;
+  if (
+    __SENTRY__ &&
+    __SENTRY__.profiling &&
+    __SENTRY__.profiling.profiles
+  ) {
+    const profile = __SENTRY__.profiling.profiles[AUTOMATED_PAGELOAD_PROFILE_ID];
+    __SENTRY__.profiling.profiles[AUTOMATED_PAGELOAD_PROFILE_ID] = undefined;
+    return profile;
+  }
+
+  return undefined
+}
+
+/*
+  See packages/tracing-internal/src/browser/router.ts
+*/
+export function isAutomatedPageLoadTransaction(transaction: Transaction): boolean {
+  // @ts-expect-error origin seems untyped
+  return transaction.op === 'pageload' && transaction.origin === AUTOMATED_PAGELOAD_PROFILE_ID
+}
+
 /**
  * Converts a JSSelfProfile to a our sampled format.
  * Does not currently perform stack indexing.

packages/core/src/hub.ts

@@ -25,6 +25,7 @@ import { consoleSandbox, dateTimestampInSeconds, getGlobalSingleton, GLOBAL_OBJ,
 import { DEFAULT_ENVIRONMENT } from './constants';
 import { Scope } from './scope';
 import { closeSession, makeSession, updateSession } from './session';
+import type { JSSelfProfiler } from '@sentry/browser';
 
 /**
  * API compatibility version of this hub.
@@ -89,6 +90,9 @@ export interface Carrier {
       // eslint-disable-next-line @typescript-eslint/ban-types
       [key: string]: Function;
     };
+    profiling?: {
+      profiles?: Record<"auto.pageload.browser", JSSelfProfiler>;
+    }
   };
 }