feat: Add support for UI profiling (#1267)

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,11 +7,13 @@ import {
   getCurrentScope,
   normalizeUrlToBase,
   Profile,
+  ProfileChunk,
   ReplayEvent,
 } from '@sentry/core';
 import { createGetModuleFromFilename } from '@sentry/node';
 import { app } from 'electron';
 import { ElectronMainOptionsInternal } from './sdk.js';
+import { SDK_VERSION } from './version.js';
 
 const getModuleFromFilename = createGetModuleFromFilename(app.getAppPath());
 
@@ -120,3 +122,70 @@ 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 {
+  // Override the SDK info in the envelope header to use Electron SDK
+  const [originalHeader] = envelope;
+  const modifiedHeader = {
+    ...originalHeader,
+    sdk: { name: 'sentry.javascript.electron', version: SDK_VERSION },
+  };
+
+  let modifiedEnvelope = createEnvelope(modifiedHeader);
+  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';

…pps/other/browser-profiling/package.json …er/browser-profiling-manual/package.jsontest/e2e/test-apps/other/browser-profiling/package.json renamed to test/e2e/test-apps/other/browser-profiling-manual/package.json test/e2e/test-apps/other/browser-profiling/package.json renamed to test/e2e/test-apps/other/browser-profiling-manual/package.json

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <script>
+      const crypto = require('crypto');
+      const { init, browserProfilingIntegration, startSpan, uiProfiler } = require('@sentry/electron/renderer');
+
+      init({
+        debug: true,
+        integrations: [browserProfilingIntegration()],
+        tracesSampleRate: 1,
+        profileSessionSampleRate: 1,
+        profileLifecycle: 'manual',
+      });
+
+      function pbkdf2() {
+        return new Promise((resolve) => {
+          const salt = crypto.randomBytes(128).toString('base64');
+          crypto.pbkdf2('myPassword', salt, 10000, 512, 'sha512', resolve);
+        });
+      }
+
+      async function longWork() {
+        for (let i = 0; i < 10; i++) {
+          await startSpan({ name: 'PBKDF2' }, async () => {
+            await pbkdf2();
+          });
+        }
+      }
+
+      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>
+</html>