Unable to get renderer error events to send with @sentry/svelte (or sveltekit) in an Electron app using @sentry/electron under Vite

[motiapp]

Is there an existing issue for this?

• [X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• [X] I have reviewed the documentation https://docs.sentry.io/
• [X] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/svelte

SDK Version

7.101.0

Framework Version

7.101.0

Link to Sentry event

No response

SDK Setup

I use a basic SDK setup just to get errors tracking in the Electron main process and preload process:

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  tracesSampleRate: 1.0,
});

And the same thing with browserTracingIntegration in the renderer:

Sentry.init({
  dsn: import.meta.env.VITE_SENTRY_DSN,
  integrations: [browserTracingIntegration()],
  tracesSampleRate: 1.0,
});

Steps to Reproduce

1. Clone the example repo here https://github.com/motiapp/sentry-electron-vite-svelte-demo
2. Create an .env file using the .env-example as a template and fill in values
3. npm i && npm run dev
4. click the Crash in Renderer button
5. click the Crash in Main button

Expected Result

1) The error 'Renderer crashes are fun' should be reported when clicking the Crash in Renderer button. 2) The app will crash and 2 errors will occur when clicking the Crash in Main button: 'manual exception thrown in main' and a native process crash.

Actual Result

The renderer crashes will not be reported, only the main process crashes.

[timfish]

I think this might be a duplicate of https://github.com/getsentry/sentry-electron/issues/825.

v4.17.0 of the Electron SDK uses v7.92.0 of the JavaScript SDKs whereas you're using v7.101.0. These versions need to match, especially where there have been extensive internal changes and there are a lot happening around the next major version of the JavaScript SDKs.

EDIT

Nope, I've tried using compatible versions as the error doesn't appear to be hitting the global error handler...

[motiapp]

I think this might be a duplicate of getsentry/sentry-electron#825.

v4.17.0 of the Electron SDK uses v7.92.0 of the JavaScript SDKs whereas you're using v7.101.0. These versions need to match, especially where there have been extensive internal changes and there are a lot happening around the next major version of the JavaScript SDKs.

EDIT

Nope, I've tried using compatible versions as the error doesn't appear to be hitting the global error handler...

Oddly enough for me downgrading the @sentry/sveltekit package to 7.92.0 fixes it in development mode (in my actual app, not in the example repo). In production I still don't get anything. Production logs show that beforeSend is receiving data in the main process, but then I see this: Sentry Logger [error]: Transport disabled

I am using {ipcMode: Sentry.IPCMode.Classic} in my production app (inside main and preload), so I'm not sure if that has anything to do with it.

[Lms24]

Hi @motiapp, I don't have much context around Electron but from a Svelte(kit) SDK perspective, I'm a bit surprised about this behaviour. I have a couple of questions/ideas to debug this further:

• The @sentry/svelte SDK is basically just a wrapper around @sentry/browser. Have you tried using @sentry/browser and if yes, is there any difference in behaviour?
• Is there a reason why you tried the @sentry/sveltekit SDK? Are you using Sveltekit in your electron app?
• Regardless of the SDK used, have you tried setting debug: true in Sentry.init? If yes are there any logs around when the error is thrown? For example messages if an event was dropped?
• Given I don't know much about electron, my best guess would be that something between throwing the error and our global window.onerror handler catches the error before our SDK is able to capture it.

[motiapp]

@Lms24 I'm using SvelteKit in my app, however I could conceivably just use Svelte since it's effectively a single page app. I did try using the @sentry/svelte package as well and found that it still won't play nice with Electron. At least the sveltekit version works with my Vite setup and the sourcemaps get built correctly. I have debug turned on everywhere and the logs don't provide any insight into why the transport gets disabled in production on the Electron side. I will probably have to do some hacking into the library code to get to the bottom of it. I was hoping that I wouldn't have to jump through so many hoops since the documentation implies it should just all work, but it's likely only working under the most common setups, which mine is not (since most Electron apps are using webpack because it's still 2019 in Electron land).

[timfish]

Hold fire until next week. I should get a chance this evening or tomorrow to properly dig into what's broken.

since most Electron apps are using webpack because it's still 2019 in Electron land

Webpack gets a lot of stick but none of the newer alternatives support all the same features. None support native node modules the way webpack can which is often key in Electron and many still don't support basic features that webpack has supported for years. For example, esbuild still has a 3+ year old open issue for full code splitting on async import!

[rothfels]

I'm experiencing the same problem: renderer events don't get sent to Sentry, while main process events do. However I'm using React (not Svelte). My code follows the sentry-electron README:

import { init } from '@sentry/electron/renderer';
import { init as reactInit } from '@sentry/react';

init({ /* config */ }, reactInit);

I also tried using @sentry/browser in the renderer process but events still don't show up in Sentry:

import { init } from '@sentry/browser';

init({ /* config */ });

Here are the SDK versions I'm using:

• @sentry/electron@4.18.0
• @sentry/react@7.102.1
• electron@28.2.0

[motiapp]

@rothfels I'm just curious, are you also using Vite? What did you use to start your project (like cloning a repo, or from a CLI tool)? I ask because I was considering trying a Webpack based build system and see if it would make any difference, but I'm so far into my project that changing from Vite is going to take time and research.

[rothfels]

Yes, I'm using Vite. Started the project from here: https://electron-vite.github.io/

Turns out I was half wrong, I'm actually able to see exceptions captured from the renderer process! I got confused because in my testing I tried manually logging an exception to Sentry through Chrome dev tools, which does not work for some reason.

import * as Sentry from '@sentry/electron/renderer'

Sentry.init({ ... })
window.Sentry = Sentry // expose for testing via Chrome dev tools (see below)

setTimeout(() => {
    // shows up just fine in Sentry
    window.Sentry.captureException(new Error('test from renderer'))
}, 1000)

Then in the Chrome dev tools console I did:

let res = window.Sentry.captureException(new Error('test from Chrome dev tools')) 
// res is an id like '0faa83ef2824df389a4c4edb10c8516', everything looks fine but the exception never shows up

I see test from renderer in Sentry, but not test from Chrome dev tools! I'm not sure why there's a difference.

[Lms24]

Realizing this is a late reply, sorry for that!

I tried manually logging an exception to Sentry through Chrome dev tools, which does not work for some reason.

throwing errors in the console is (fortunately) sandboxed, meaning they don't get picked up by window.onerror and other global handlers that the Sentry SDK listens to. So something like throw new Error() won't end up in Sentry.

window.Sentry.captureException(new Error('test from Chrome dev tools'))

This should work but I guess that window.Sentry isn't defined (unless the Electron SDK does this in addition?). If you still want to try it from the console I suggest:

window.__SENTRY__.hub.captureException('test');