What is the right way to setup Sentry Electron SDK with Vite & Vue 3

Versions + Platform

• SDK version - @sentry/electron@v3.0.7
• Electron version - electron@v19.0.8
• Platform - macOS

Description

I am using @sentry/vue package to collect exceptions from renderer process, it is not very straightforward and I have to revise the Sentry event before sending it to server, otherwise source mapping doesn’t work.

import * as Sentry from '@sentry/vue';
Sentry.init({
  app,
  dsn: __SENTRY_DSN__,
  release: __SENTRY_RELEASE__,
  beforeSend: (event: Sentry.Event, hint: Sentry.EventHint) => {

    // update the stacktrace before sending it to Sentry, this will strip out the asar path - i.e. those between two brackets:
    // file:///[myapp.app/Contents/Resources/app.asar/]packages/renderer/dist/index.f3984842.js

    if (event.exception?.values) {
      event.exception.values = event.exception.values.map(e => {
        if (e.stacktrace?.frames) {
          e.stacktrace.frames = e.stacktrace.frames.map(f => {
            if (f.filename) {
              f.filename = f.filename.replace(/.*app\.asar/, 'app://');
            }
            return f;
          });
        }
        return e;
      });
    }
    return event;
  },
});

It works with this approach but I would like to check if there is an easier / better way available. I firstly tried @sentry/electron package but it doesn’t capture exceptions in renderer process for me, maybe it is because I am using Vue 3 and not vanilla.

My other question is, it seems the exceptions in renderer process won’t be printed in console anymore once they are reported to Sentry, is this an intended behavior?

[timfish]

Today I upgraded @sentry/electron to 4.0.0, and sentry/vue to 7.12.1

v4.0.0 of the Electron SDK uses 7.8.1 of the JavaScript SDKs.

We should probably include this version in the readme so it’s obvious from npm!

[timfish]

As everything is now sent from the main process, would BrowserTracing still work?

Yes, BrowserTracing still works, the transaction is just passed through the main process.

Type 'EventToMain' is not assignable to type 'Integration'.

This suggest that you have multiple versions of Sentry SDKs in your dependencies.

@sentry/electron is pinned to a specific version of the underlying JavaScript SDKs because it uses internal APIs that don’t follow semantic versioning.

If you are using the latest Electron SDK release (v3.0.7), you should use v6.19.2 of the @sentry/vue SDK.

v4 of the Electron SDK is on the way (watch this issue to get notified when the beta is published) and this is pinned to v7.3.1 on the JavaScript SDKs.

Unfortunately npm doesn’t appear to surface the dependency versions so the only easy way to get this version is to check package.json at a specific Git tag. I will add the underlying SDK version to the README so this level of digging isn’t required.