VOOZH about

URL: https://docs.sentry.io/platforms/javascript/guides/electron/

⇱ Electron | Sentry for Electron

Skip to content

Electron

Learn how to manually set up Sentry in your Electron app and capture your first errors.

You need:

Run the command for your preferred package manager to add the Sentry SDK to your application:

Copied
npm install @sentry/electron --save

Choose the features you want to configure, and this guide will show you how:

You should initialize the SDK in both the main process and every renderer process you spawn.

Initialize the SDK in your Electron main process as early as possible:

Copied
import * as Sentry from "@sentry/electron/main";
Sentry.init({
 dsn: "___PUBLIC_DSN___",
 // ___PRODUCT_OPTION_START___ performance
 // Set tracesSampleRate to 1.0 to capture 100%
 // of transactions for performance monitoring.
 // We recommend adjusting this value in production
 // Learn more at
 // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
 tracesSampleRate: 1.0,
 integrations: [Sentry.startupTracingIntegration()],
 // ___PRODUCT_OPTION_END___ performance
 // ___PRODUCT_OPTION_START___ logs
 // Enable logs to be sent to Sentry
 enableLogs: true,
 // ___PRODUCT_OPTION_END___ logs
});

Initialize the SDK in your Electron renderer processes as early as possible. All renderer events are sent through the main process so passing dsn, release or environment to renderer init will have no effect.

Copied
import * as Sentry from "@sentry/electron/renderer";
Sentry.init({
 // Adds request headers and IP for users, for more info visit:
 // https://docs.sentry.io/platforms/javascript/guides/electron/configuration/options/#sendDefaultPii
 sendDefaultPii: true,
 integrations: [
 // ___PRODUCT_OPTION_START___ performance
 Sentry.browserTracingIntegration(),
 // ___PRODUCT_OPTION_END___ performance
 // ___PRODUCT_OPTION_START___ session-replay
 Sentry.replayIntegration(),
 // ___PRODUCT_OPTION_END___ session-replay
 // ___PRODUCT_OPTION_START___ user-feedback
 Sentry.feedbackIntegration({
 // Additional SDK configuration goes in here, for example:
 colorScheme: "system",
 }),
 // ___PRODUCT_OPTION_END___ user-feedback
 ],
 // ___PRODUCT_OPTION_START___ performance
 // Set tracesSampleRate to 1.0 to capture 100%
 // of transactions for performance monitoring.
 // We recommend adjusting this value in production
 // Learn more at
 // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
 tracesSampleRate: 1.0,
 // ___PRODUCT_OPTION_END___ performance
 // ___PRODUCT_OPTION_START___ session-replay
 // Capture Replay for 10% of all sessions,
 // plus for 100% of sessions with an error
 // Learn more at
 // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
 replaysSessionSampleRate: 0.1,
 replaysOnErrorSampleRate: 1.0,
 // ___PRODUCT_OPTION_END___ session-replay
 // ___PRODUCT_OPTION_START___ logs
 // Enable logs to be sent to Sentry
 enableLogs: true,
 // ___PRODUCT_OPTION_END___ logs
});

If your app uses utility processes, initialize Sentry in each one.

Copied
import * as Sentry from "@sentry/electron/utility";
Sentry.init({
 // ___PRODUCT_OPTION_START___ logs
 // Enable logs to be sent to Sentry
 enableLogs: true,
 // ___PRODUCT_OPTION_END___ logs
});
Capturing errors in the preload context

If your app uses a preload script and contextIsolation: true, Sentry can't automatically capture errors that occur in the preload context. To include those, initialize Sentry in your preload script as well:

Copied
import * as Sentry from "@sentry/electron/renderer";
Sentry.init(); // don't forget to add your configuration options

If you're using a framework in your renderers, you can combine the Electron SDK with the framework SDK:

Copied
import { init } from "@sentry/electron/renderer";
import { init as reactInit } from "@sentry/react";
init(
 {
 dsn: "___PUBLIC_DSN___",
 integrations: [
 /* integrations */
 ],
 /* Other Electron and React SDK config */
 },
 reactInit,
);

The stack traces in your Sentry errors probably won't look like your actual code without unminifying them. To fix this, upload your source maps to Sentry. The easiest way to do this is by using the Sentry Wizard.

Alternatively, take a look at our Uploading Source Maps documentation.

Copied
npx @sentry/wizard@latest -i sourcemaps

Let's test your setup and confirm that Sentry is working correctly.

Main process error

Add an event listener that throws an error in your main process:

Copied
import { app } from "electron";
import * as Sentry from "@sentry/electron/main";
app.on("ready", () => {
 throw new Error("Sentry test error in main process");
});

Renderer process error

Add a test button in one of your HTML pages:

index.html
Copied
<button id="testError">Break the world</button>
<script src="renderer.js"></script>

Then, in your renderer, add the following:

Finally, start your app and trigger two errors that Sentry will capture: one from the main process and one from the renderer.

Copied
document.getElementById("testError").addEventListener("click", () => {
 throw new Error("Sentry test error in renderer process");
});

To test tracing in your renderer, start a trace to measure the time it takes to execute your code.

Then, start your app and trigger two errors that Sentry will capture: one from the main process and one from the renderer. It will also start a trace with the defined name.

Copied
document.getElementById("testError").addEventListener("click", () => {
 Sentry.startSpan({ op: "test", name: "Renderer test span" }, () => {
 throw new Error("Sentry test error in renderer process");
 });
});

To verify that Sentry catches your logs, add some log statements to your application:

Copied
Sentry.logger.info("User example action completed");
Sentry.logger.warn("Slow operation detected", {
 operation: "data_fetch",
 duration: 3500,
});
Sentry.logger.error("Validation failed", {
 field: "email",
 reason: "Invalid email",
});

Now, head over to your project on Sentry.io to view the collected data (it takes a couple of moments for the data to appear).

At this point, you should have integrated Sentry into your Electron application and should already be sending data to your Sentry project.

Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:

Was this helpful?
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").