Electron
Learn how to manually set up Sentry in your Electron app and capture your first errors.
You need:
Choose the features you want to configure, and this guide will show you how:
Run the command for your preferred package manager to add the Sentry SDK to your application:
npm install @sentry/electron --save
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:
import * as Sentry from "@sentry/electron/main";
Sentry.init({
dsn: "___PUBLIC_DSN___",
// ___PRODUCT_OPTION_START___ logs
// Enable logs to be sent to Sentry
_experiments: { enableLogs: true },
// ___PRODUCT_OPTION_END___ logs
});
Initialize the SDK in your Electron renderer processes:
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,
// ___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
_experiments: { enableLogs: true },
// ___PRODUCT_OPTION_END___ logs
});
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:
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:
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:
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:
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<button id="testError">Break the world</button>
<script src="renderer.js"></script>
Then, in your renderer, add the following:
document.getElementById("testError").addEventListener("click", () => {
throw new Error("Sentry test error in renderer process");
});
Start your app and trigger two errors that Sentry will capture: one from the main process and one from the renderer.
To test tracing in your renderer, start a trace to measure the time it takes to execute your code:
document.getElementById("testError").addEventListener("click", () => {
Sentry.startSpan({ op: "test", name: "Renderer test span" }, () => {
throw new Error("Sentry test error in renderer process");
});
});
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.
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:
- Continue to customize your configuration
- Learn how to manually capture errors
- Make use of Electron-specific features
- Get familiar with Sentry's product features like tracing, insights, and alerts
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").