Issue

I am building an Electron app with React and want to use Sentry.ErrorBoundary in the renderer. I need to know whether that works and how to init the SDKs.

Applies To

All SaaS Customers and Self-Hosted Users
Electron SDK (@sentry/electron)
React SDK (@sentry/react)
Error Monitoring
ErrorBoundary

Resolution

Use Sentry.ErrorBoundary from @sentry/react in your React renderer UI. For the best React + Electron experience, combine the Electron renderer SDK with the React SDK when you call init in the renderer.

Init @sentry/electron/main in the main process.
In each React renderer, call Electron renderer init and pass React’s init as the second argument.
Import ErrorBoundary from @sentry/react and wrap the part of the tree you want to protect.

import { init } from "@sentry/electron/renderer";
import * as Sentry from "@sentry/react";
import { init as reactInit } from "@sentry/react";init(
  {
    // Renderer options (dsn/release/environment on renderer init have no effect;
    // renderer events go through the main process)
    integrations: [
      /* integrations */
    ],
  },
  reactInit,
);function App() {
  return (
    <Sentry.ErrorBoundary fallback={<p>An error has occurred</p>}>
      <YourApp />
    </Sentry.ErrorBoundary>
  );
}

See Using Framework-Specific SDKs and the React Error Boundary guide.

For which packages to use in a React + Electron app in general, see React.JS deployed on Electron.

[Electron] Can Sentry.ErrorBoundary be used in an Electron app made with React?

Issue

Applies To

Resolution