feat: Add eventLoopBlockIntegration (#1188)

timfish · web-flow · commit 65b46e7669c9 · 2025-07-24T10:08:22.000+02:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,6 +17,7 @@ module.exports = {
     '/renderer/**',
     '/examples/**',
     '/common/**',
+    '/native/**',
     '/index.*',
     '/integrations.*',
     '/utility/**',
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@ stats.json
 /main
 /common
 /utility
+/native
 /index.*
 /integrations.*
 /ipc.*
diff --git a/package.json b/package.json
@@ -14,20 +14,54 @@
       "default": "./esm/renderer/index.js"
     },
     "./main": {
-      "require": "./main/index.js",
-      "import": "./esm/main/index.js"
+      "require": {
+        "types": "./main/index.d.ts",
+        "default": "./main/index.js"
+      },
+      "import": {
+        "types": "./esm/main/index.d.ts",
+        "default": "./esm/main/index.js"
+      }
     },
     "./renderer": {
-      "require": "./renderer/index.js",
-      "import": "./esm/renderer/index.js"
+      "require": {
+        "types": "./renderer/index.d.ts",
+        "default": "./renderer/index.js"
+      },
+      "import": {
+        "types": "./esm/renderer/index.d.ts",
+        "default": "./esm/renderer/index.js"
+      }
     },
     "./preload": {
-      "require": "./preload/index.js",
-      "import": "./esm/preload/index.js"
+      "require": {
+        "types": "./preload/index.d.ts",
+        "default": "./preload/index.js"
+      },
+      "import": {
+        "types": "./esm/preload/index.d.ts",
+        "default": "./esm/preload/index.js"
+      }
     },
     "./utility": {
-      "require": "./utility/index.js",
-      "import": "./esm/utility/index.js"
+      "require": {
+        "types": "./utility/index.d.ts",
+        "default": "./utility/index.js"
+      },
+      "import": {
+        "types": "./esm/utility/index.d.ts",
+        "default": "./esm/utility/index.js"
+      }
+    },
+    "./native": {
+      "require": {
+        "types": "./native/index.d.ts",
+        "default": "./native/index.js"
+      },
+      "import": {
+        "types": "./esm/native/index.d.ts",
+        "default": "./esm/native/index.js"
+      }
     }
   },
   "repository": "https://github.com/getsentry/sentry-electron.git",
@@ -65,9 +99,18 @@
     "@sentry/node": "9.40.0",
     "deepmerge": "4.3.1"
   },
+  "peerDependencies": {
+    "@sentry/node-native": "9.39.0"
+  },
+  "peerDependenciesMeta": {
+    "@sentry/node-native": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@sentry/node-native": "9.40.0",
     "@sentry-internal/eslint-config-sdk": "9.40.0",
     "@sentry-internal/typescript": "9.40.0",
     "@types/busboy": "^1.5.4",
diff --git a/rollup.config.mjs b/rollup.config.mjs
@@ -5,9 +5,9 @@ import { readFileSync } from 'node:fs';
 import typescript from '@rollup/plugin-typescript';
 
 const pkgJson = JSON.parse(readFileSync(resolve(process.cwd(), 'package.json')));
-
 const dependencies = Object.keys(pkgJson.dependencies || {});
-const external = [...builtinModules, /^node:/, 'electron', ...dependencies];
+const peerDependencies = Object.keys(pkgJson.peerDependencies || {});
+const external = [...builtinModules, /^node:/, 'electron', ...dependencies, ...peerDependencies];
 
 const outputOptions = {
   sourcemap: true,
@@ -70,13 +70,17 @@ function bundlePreload(format, input, output) {
   };
 }
 
+const entryPoints = [
+  'src/index.ts',
+  'src/main/index.ts',
+  'src/renderer/index.ts',
+  'src/utility/index.ts',
+  'src/native/index.ts',
+];
+
 export default [
-  transpileFiles('cjs', ['src/index.ts', 'src/main/index.ts', 'src/renderer/index.ts', 'src/utility/index.ts'], '.'),
-  transpileFiles(
-    'esm',
-    ['src/index.ts', 'src/main/index.ts', 'src/renderer/index.ts', 'src/utility/index.ts'],
-    './esm',
-  ),
+  transpileFiles('cjs', entryPoints, '.'),
+  transpileFiles('esm', entryPoints, './esm'),
   bundlePreload('cjs', 'src/preload/index.ts', './preload/index.js'),
   bundlePreload('esm', 'src/preload/index.ts', './esm/preload/index.js'),
 ];
diff --git a/scripts/update-sdk-versions.mjs b/scripts/update-sdk-versions.mjs
@@ -22,6 +22,12 @@ if (current !== latest) {
     }
   }
 
+  for (const dep of Object.keys(packageJson.peerDependencies)) {
+    if (dep.match(re)) {
+      packageJson.peerDependencies[dep] = latest;
+    }
+  }
+
   for (const dep of Object.keys(packageJson.devDependencies)) {
     if (dep.match(re)) {
       packageJson.devDependencies[dep] = latest;
diff --git a/src/index.ts b/src/index.ts
@@ -3,7 +3,7 @@ throw new Error(`The Sentry Electron SDK uses different code for the main and re
 In the Electron main process you should import '@sentry/electron/main'
 In the Electron renderer process you should import '@sentry/electron/renderer'
 
-https://github.com/getsentry/sentry-electron/blob/master/MIGRATION.md#initializing-the-sdk-in-v5
+https://docs.sentry.io/platforms/javascript/guides/electron/#configure
 `);
 
 export {};
diff --git a/src/main/integrations/anr.ts b/src/main/integrations/anr.ts
@@ -8,6 +8,9 @@ type Options = Parameters<typeof nodeAnrIntegration>[0];
 
 /**
  * Starts a worker thread to detect App Not Responding (ANR) events
+ *
+ * @deprecated The ANR integration has been deprecated. Use `eventLoopBlockIntegration` from `@sentry/electron/native`
+ * instead. You will need to install `@sentry/node-native` as a dependency.
  */
 export const anrIntegration: (options: Options) => Integration = defineIntegration((options: Options = {}) => {
   if (ELECTRON_MAJOR_VERSION < 22) {
diff --git a/src/native/event-loop-blocked-integration.ts b/src/native/event-loop-blocked-integration.ts
@@ -0,0 +1,78 @@
+import { defineIntegration, Integration } from '@sentry/core';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  disableBlockDetectionForCallback,
+  eventLoopBlockIntegration as nodeEventLoopBlockIntegration,
+  pauseEventLoopBlockDetection,
+  restartEventLoopBlockDetection,
+} from '@sentry/node-native';
+import { app, powerMonitor } from 'electron';
+
+type IntegrationInternal = { start: () => void; stop: () => void };
+
+type Options = Parameters<typeof nodeEventLoopBlockIntegration>[0];
+
+/**
+ * > **Note**
+ * >
+ * > You should add `@sentry/node-native` to your dependencies to use this integration.
+ *
+ * Monitors the Node.js event loop for blocking behavior and reports blocked events to Sentry.
+ *
+ * Uses a background worker and native module to detect when the main thread is blocked for longer than the configured
+ * threshold (default: 1 second). When a block is detected, it captures an event with stack traces for every thread.
+ *
+ * ```js
+ * import * as Sentry from '@sentry/electron/main';
+ * import { eventLoopBlockIntegration } from '@sentry/electron/native';
+ *
+ * Sentry.init({
+ *   dsn: '__YOUR_DSN__',
+ *   integrations: [
+ *     eventLoopBlockIntegration({
+ *       threshold: 500, // Report blocks longer than 500ms
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export const eventLoopBlockIntegration: (options: Options) => Integration = defineIntegration(
+  (options: Options = {}) => {
+    if (process.type === 'renderer') {
+      throw new Error(
+        'Detected `eventLoopBlockIntegration` in renderer process. This integration should only be used in the Electron main process.',
+      );
+    }
+
+    const integration = nodeEventLoopBlockIntegration({
+      ...options,
+      staticTags: {
+        'event.environment': 'javascript',
+        'event.origin': 'electron',
+        'event.process': 'browser',
+        ...options.staticTags,
+      },
+      appRootPath: app.getAppPath(),
+    }) as Integration & IntegrationInternal;
+
+    powerMonitor.on('suspend', () => {
+      integration.stop();
+    });
+
+    powerMonitor.on('lock-screen', () => {
+      integration.stop();
+    });
+
+    powerMonitor.on('resume', () => {
+      integration.start();
+    });
+
+    powerMonitor.on('unlock-screen', () => {
+      integration.start();
+    });
+
+    return integration;
+  },
+);
+
+export { disableBlockDetectionForCallback, pauseEventLoopBlockDetection, restartEventLoopBlockDetection };
diff --git a/src/native/index.ts b/src/native/index.ts
@@ -0,0 +1,6 @@
+export {
+  disableBlockDetectionForCallback,
+  eventLoopBlockIntegration,
+  pauseEventLoopBlockDetection,
+  restartEventLoopBlockDetection,
+} from './event-loop-blocked-integration';
diff --git a/test/e2e/prepare.ts b/test/e2e/prepare.ts
@@ -71,6 +71,7 @@ export async function prepareTestFiles(
   logger: TestLogger,
   testBasePath: string,
   executionBasePath: string,
+  electronVersion: string,
   port: number,
   convertFilesToEsm: boolean,
 ): Promise<void> {
@@ -100,9 +101,11 @@ export async function prepareTestFiles(
         // We replace the Sentry JavaScript dependency versions to match that of @sentry/core
         .replace(/"@sentry\/replay": ".*"/, `"@sentry/replay": "${JS_SDK_VERSION}"`)
         .replace(/"@sentry\/react": ".*"/, `"@sentry/react": "${JS_SDK_VERSION}"`)
+        .replace(/"@sentry\/node-native": ".*"/, `"@sentry/node-native": "${JS_SDK_VERSION}"`)
         .replace(/"@sentry\/profiling-node": ".*"/, `"@sentry/profiling-node": "${JS_SDK_VERSION}"`)
         .replace(/"@sentry\/integrations": ".*"/, `"@sentry/integrations": "${JS_SDK_VERSION}"`)
-        .replace(/"@sentry\/vue": ".*"/, `"@sentry/vue": "${JS_SDK_VERSION}"`);
+        .replace(/"@sentry\/vue": ".*"/, `"@sentry/vue": "${JS_SDK_VERSION}"`)
+        .replace(/"electron": ".*"/, `"electron": "${electronVersion}"`);
     }
 
     if (convertFilesToEsm) {
diff --git a/test/e2e/runner.ts b/test/e2e/runner.ts
@@ -185,7 +185,7 @@ export function electronTestRunner(
     electronPath = await downloadElectron(electronVersion.string);
     server = createSentryTestServer(logger, ignoreOrder ? onNewServerEventIgnoreOrder : onNewServerEvent);
 
-    await prepareTestFiles(logger, testPath, testExecutionRoot, server.port, convertToEsm);
+    await prepareTestFiles(logger, testPath, testExecutionRoot, electronVersion.string, server.port, convertToEsm);
     await installDepsAndBuild(logger, options.packageManager || 'yarn', testExecutionRoot, hasBuildScript);
 
     const executionPath = options.appExecutionPath
diff --git a/test/e2e/test-apps/anr/anr-main-native/package.json b/test/e2e/test-apps/anr/anr-main-native/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "anr-main-native",
+  "description": "Event Loop Blocked Main Event",
+  "version": "1.0.0",
+  "main": "src/main.js",
+  "scripts": {
+    "build": "electron-rebuild --force"
+  },
+  "dependencies": {
+    "@electron/rebuild":"^3.7.1",
+    "@sentry/electron": "5.6.0",
+    "@sentry/node-native": "6.8.0",
+    "electron": "^37.2.2"
+  }
+}
diff --git a/test/e2e/test-apps/anr/anr-main-native/src/main.js b/test/e2e/test-apps/anr/anr-main-native/src/main.js
@@ -0,0 +1,28 @@
+const crypto = require('crypto');
+
+const { app } = require('electron');
+const { init } = require('@sentry/electron/main');
+const { eventLoopBlockIntegration } = require('@sentry/electron/native');
+
+global._sentryDebugIds = { [new Error().stack]: 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaa' };
+
+init({
+  dsn: '__DSN__',
+  debug: true,
+  onFatalError: () => {},
+  integrations: [eventLoopBlockIntegration()],
+});
+
+function longWork() {
+  for (let i = 0; i < 100; i++) {
+    const salt = crypto.randomBytes(128).toString('base64');
+    // eslint-disable-next-line no-unused-vars
+    const hash = crypto.pbkdf2Sync('myPassword', salt, 10000, 512, 'sha512');
+  }
+}
+
+app.on('ready', () => {
+  setTimeout(() => {
+    longWork();
+  }, 2000);
+});
diff --git a/test/e2e/test-apps/anr/anr-main-native/test.ts b/test/e2e/test-apps/anr/anr-main-native/test.ts
diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,12 @@ if (current !== latest) {`
`22`	`22`	`}`
`23`	`23`	`}`
`24`	`24`
	`25`	`+ for (const dep of Object.keys(packageJson.peerDependencies)) {`
	`26`	`+ if (dep.match(re)) {`
	`27`	`+ packageJson.peerDependencies[dep] = latest;`
	`28`	`+ }`
	`29`	`+ }`
	`30`	`+`
`25`	`31`	`for (const dep of Object.keys(packageJson.devDependencies)) {`
`26`	`32`	`if (dep.match(re)) {`
`27`	`33`	`packageJson.devDependencies[dep] = latest;`