feat: Add support for UI profiling

Author: AbhiPrasad

package.json

@@ -105,12 +105,12 @@
     "e2e": "xvfb-maybe vitest run --root=./test/e2e --silent=false --disable-console-intercept"
   },
   "dependencies": {
-    "@sentry/browser": "10.26.0",
-    "@sentry/core": "10.26.0",
-    "@sentry/node": "10.26.0"
+    "@sentry/browser": "10.27.0",
+    "@sentry/core": "10.27.0",
+    "@sentry/node": "10.27.0"
   },
   "peerDependencies": {
-    "@sentry/node-native": "10.26.0"
+    "@sentry/node-native": "10.27.0"
   },
   "peerDependenciesMeta": {
     "@sentry/node-native": {
@@ -119,8 +119,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.1.3",
-    "@sentry/node-native": "10.26.0",
-    "@sentry-internal/eslint-config-sdk": "10.26.0",
+    "@sentry/node-native": "10.27.0",
+    "@sentry-internal/eslint-config-sdk": "10.27.0",
     "@sentry-internal/typescript": "10.26.0",
     "@types/busboy": "^1.5.4",
     "@types/koa": "^2.0.52",

src/common/envelope.ts

@@ -1,4 +1,13 @@
-import { Attachment, AttachmentItem, Envelope, Event, EventItem, forEachEnvelopeItem, Profile } from '@sentry/core';
+import {
+  Attachment,
+  AttachmentItem,
+  Envelope,
+  Event,
+  EventItem,
+  forEachEnvelopeItem,
+  Profile,
+  ProfileChunk,
+} from '@sentry/core';
 
 /** Pulls an event and additional envelope items out of an envelope. Returns undefined if there was no event */
 export function eventFromEnvelope(envelope: Envelope): [Event, Attachment[], Profile | undefined] | undefined {
@@ -25,3 +34,16 @@ export function eventFromEnvelope(envelope: Envelope): [Event, Attachment[], Pro
 
   return event ? [event, attachments, profile] : undefined;
 }
+
+/** Extracts profile_chunk from an envelope if present */
+export function profileChunkFromEnvelope(envelope: Envelope): ProfileChunk | undefined {
+  let profileChunk: ProfileChunk | undefined;
+
+  forEachEnvelopeItem(envelope, (item, type) => {
+    if (type === 'profile_chunk') {
+      profileChunk = item[1] as unknown as ProfileChunk;
+    }
+  });
+
+  return profileChunk;
+}

src/main/ipc.ts

@@ -11,14 +11,14 @@ import {
 } from '@sentry/core';
 import { captureEvent, getClient, getCurrentScope } from '@sentry/node';
 import { app, ipcMain, protocol, WebContents, webContents } from 'electron';
-import { eventFromEnvelope } from '../common/envelope.js';
+import { eventFromEnvelope, profileChunkFromEnvelope } from '../common/envelope.js';
 import { ipcChannelUtils, IPCMode, IpcUtils, RendererStatus } from '../common/ipc.js';
 import { registerProtocol } from './electron-normalize.js';
 import { createRendererEventLoopBlockStatusHandler } from './integrations/renderer-anr.js';
 import { rendererProfileFromIpc } from './integrations/renderer-profiling.js';
 import { getOsDeviceLogAttributes } from './log.js';
 import { mergeEvents } from './merge.js';
-import { normalizeReplayEnvelope } from './normalize.js';
+import { normalizeProfileChunkEnvelope, normalizeReplayEnvelope } from './normalize.js';
 import { ElectronMainOptionsInternal } from './sdk.js';
 import { SDK_VERSION } from './version.js';
 
@@ -114,9 +114,16 @@ function handleEnvelope(
 
     captureEventFromRenderer(options, event, dynamicSamplingContext, attachments, contents);
   } else {
-    const normalizedEnvelope = normalizeReplayEnvelope(options, envelope, app.getAppPath());
-    // Pass other types of envelope straight to the transport
-    void getClient()?.getTransport()?.send(normalizedEnvelope);
+    // Check if this is a profile_chunk envelope (from UI profiling)
+    const profileChunk = profileChunkFromEnvelope(envelope);
+    if (profileChunk) {
+      const normalizedEnvelope = normalizeProfileChunkEnvelope(options, envelope, app.getAppPath());
+      void getClient()?.getTransport()?.send(normalizedEnvelope);
+    } else {
+      const normalizedEnvelope = normalizeReplayEnvelope(options, envelope, app.getAppPath());
+      // Pass other types of envelope straight to the transport
+      void getClient()?.getTransport()?.send(normalizedEnvelope);
+    }
   }
 }
 

src/main/normalize.ts

@@ -7,6 +7,7 @@ import {
   getCurrentScope,
   normalizeUrlToBase,
   Profile,
+  ProfileChunk,
   ReplayEvent,
 } from '@sentry/core';
 import { createGetModuleFromFilename } from '@sentry/node';
@@ -120,3 +121,63 @@ export function normaliseProfile(profile: Profile, basePath: string): void {
     }
   }
 }
+
+/**
+ * Normalizes all URLs in a profile chunk and sets release/environment
+ */
+export function normaliseProfileChunk(
+  profileChunk: ProfileChunk,
+  basePath: string,
+  options: ElectronMainOptionsInternal,
+): void {
+  // Override release and environment with main process values
+  if (options.release) {
+    profileChunk.release = options.release;
+  }
+  if (options.environment) {
+    profileChunk.environment = options.environment;
+  }
+
+  // Normalize paths in profile frames
+  const profile = profileChunk.profile as { frames?: Array<{ abs_path?: string; filename?: string; module?: string }> };
+  if (profile?.frames) {
+    for (const frame of profile.frames) {
+      if (frame.abs_path) {
+        frame.abs_path = normalizeUrlToBase(frame.abs_path, basePath);
+      }
+
+      if (frame.filename) {
+        frame.filename = normalizeUrlToBase(frame.filename, basePath);
+      }
+
+      if (frame.module) {
+        frame.module = getModuleFromFilename(frame.abs_path);
+      }
+    }
+  }
+}
+
+/**
+ * Normalizes profile_chunk envelope items and returns the modified envelope
+ */
+export function normalizeProfileChunkEnvelope(
+  options: ElectronMainOptionsInternal,
+  envelope: Envelope,
+  basePath: string,
+): Envelope {
+  let modifiedEnvelope = createEnvelope(envelope[0]);
+  let isProfileChunk = false;
+
+  forEachEnvelopeItem(envelope, (item, type) => {
+    if (type === 'profile_chunk') {
+      isProfileChunk = true;
+      const [headers, chunk] = item as [{ type: 'profile_chunk' }, ProfileChunk];
+
+      normaliseProfileChunk(chunk, basePath, options);
+
+      modifiedEnvelope = addItemToEnvelope(modifiedEnvelope, [headers, chunk]);
+    }
+  });
+
+  return isProfileChunk ? modifiedEnvelope : envelope;
+}

src/renderer/index.ts

@@ -129,6 +129,7 @@ export {
   supabaseIntegration,
   suppressTracing,
   thirdPartyErrorFilterIntegration,
+  uiProfiler,
   unleashIntegration,
   updateSpanName,
   webWorkerIntegration,

src/renderer/sdk.ts

@@ -51,7 +51,7 @@ interface ElectronRendererOptions extends Partial<ElectronRendererOptionsInterna
 export function init<O extends ElectronRendererOptions>(
   options: ElectronRendererOptions & O = {} as ElectronRendererOptions & O,
   // This parameter name ensures that TypeScript error messages contain a hint for fixing SDK version mismatches
-  originalInit: (if_you_get_a_typescript_error_ensure_sdks_use_version_v10_26_0: O) => void = browserInit,
+  originalInit: (if_you_get_a_typescript_error_ensure_sdks_use_version_v10_27_0: O) => void = browserInit,
 ): void {
   // Ensure the browser SDK is only init'ed once.
   if (window?.__SENTRY__RENDERER_INIT__) {

test/e2e/index.ts

@@ -11,6 +11,7 @@ export {
   feedbackEnvelope,
   getEventFromEnvelope,
   getSessionFromEnvelope,
+  profileChunkEnvelope,
   sessionEnvelope,
   transactionEnvelope,
 } from './utils';

test/e2e/test-apps/other/browser-profiling/src/index.html

@@ -6,17 +6,14 @@
   <body>
     <script>
       const crypto = require('crypto');
-      const {
-        init,
-        browserProfilingIntegration,
-        startSpan,
-      } = require('@sentry/electron/renderer');
+      const { init, browserProfilingIntegration, startSpan, uiProfiler } = require('@sentry/electron/renderer');
 
       init({
         debug: true,
         integrations: [browserProfilingIntegration()],
         tracesSampleRate: 1,
-        profilesSampleRate: 1,
+        profileSessionSampleRate: 1,
+        profileLifecycle: 'manual',
       });
 
       function pbkdf2() {
@@ -34,10 +31,16 @@
         }
       }
 
-      setTimeout(() => {
-        startSpan({ name: 'Long work' }, async () => {
+      setTimeout(async () => {
+        // Start UI profiling manually
+        uiProfiler.startProfiler();
+
+        await startSpan({ name: 'Long work' }, async () => {
           await longWork();
         });
+
+        // Stop profiling - this will send a profile_chunk
+        uiProfiler.stopProfiler();
       }, 500);
     </script>
   </body>