SyntaxError: Named export 'app' not found. Sentry + Electron + Next js

[andirsun]

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)

Electron SDK Version

^4.15.1

Electron Version

27.1.0

What platform are you using?

MacOS

Link to Sentry event

No response

Steps to Reproduce

Context: I am using electron to run a Next js application loading static html + js files. I am trying to setup Sentry on both main and rendered process, the main process was properly loaded with

import {init} from '@sentry/electron/main'

init({
 DSN: xxxx
})

And when I fired manually an error is properly visible in the sentry dashboard.

But I am having problems with setup for rendered process, as you know when you have a next js app + Sentry, you have a sentry.client.config.js file at the root of the folder where you have to load the sentry init function. So I am initializing my library there:

/// Importing sentry for renderer process
import * as Sentry from '@sentry/electron/renderer'

try {
    Sentry.init({
      dsn: config.SENTRY_DSN_DESKTOP,
    })
    console.debug('Initializing Sentry for desktop')
  } catch (error) {
    console.log(`Error initializing Sentry: ${error}`)
  }

Project is being initialized but when I try to send an error from one of my next js files for example:

import * as Sentry from '@sentry/electron'

...
Sentry.captureException(new Error(`Testing error from inside`))

I am facing an error related to app entry

file:///Users/andirsun/projects/streamline/streamline-mono/node_modules/@sentry/electron/esm/main/electron-normalize.js:3
import { app, crashReporter } from 'electron';
         ^^^
SyntaxError: Named export 'app' not found. The requested module 'electron' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'electron';
const { app, crashReporter } = pkg;

I dont know if I have to import the library differently for next js renderer process.

Expected Result

Capture errors from next js files

Actual Result

Already attached

[timfish]

The Electron SDK uses the node SDK for the main process and browser SDK for the renderers. Importing from @sentry/electron can often work but bundlers can cause the wrong entry point to be picked up.

For this reason you should import from @sentry/electron/renderer in the renderer processes.

[andirsun]

@timfish Thanks for the help! Sadly still not working I am initializing the project on the sentry.client.config.js

/// Importing sentry for renderer process
import * as Sentry from '@sentry/electron/renderer'

try {
    Sentry.init({
      dsn: config.SENTRY_DSN_DESKTOP,
    })
    console.debug('Initializing Sentry for desktop')
  } catch (error) {
    console.log(`Error initializing Sentry: ${error}`)
  }

then throwing an error

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

const log = Sentry.captureException(new Error('viewAssetSet'))
console.log('log', log)

I can see the returned string but the error is not capgtured in the project.

Also I tried to send the error using ipcMain protocol to use it from main process files and it worked but the error is not getting any context files.

// Sending error from renderer files using ipcMain protocol
window.StreamlineDesktopAPI.sendErrorToSentry(error)

/// receiving the error on main process and sending it to sentry
import * as Sentry from '@sentry/electron'

ipcMain.on('sendErrorToSentry', (_event, error: any) => {
  try {
    Sentry.captureException(error)
    console.log('Error sent to Sentry')
  } catch (error) {
    console.log('Error while trying to send error to Sentry')
    log.error(error)
  }
})

This is how to error looks like

[lforst]

Hm, I am not sure if our Next.js and Electron SDKs allow for interoperability like that...

[andirsun]

@lforst What to you recommend me to use it then ?

[lforst]

@andirsun honestly I don't know. Gut feeling wise you should pick either or - probably electron. Ofc you're gonna miss out on some features but the two SDKs are not desinged to interoperate. Can you try using just the electron SDK first and see if that captures errors? Thanks!

[andirsun]

@idosun Still not working, is interesting because the sentry.captureException is not throwing any error and it seems like the error was sent but for some reason is not displayed on sentry dashboard (Errors from main process are being reported normally)

This is my initialization code

import {init as initElectron} from '@sentry/electron/renderer'

try {
    initElectron({
      dsn: config.SENTRY_DSN_DESKTOP,
    })
    console.debug('Initializing Sentry for desktop')
  } catch (error) {
    console.debug(`Error initializing Sentry: ${error}`)
  }

And this is how I am throwing the error

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

try {
      if (typeof window !== 'undefined' && window.StreamlineDesktopAPI) {
        const isDeprecated =
          await window.StreamlineDesktopAPI.isDeprecatedAppVersion()

        throw new Error('Deprecated version')
        if (isDeprecated) setIsOpen(true)
      }
    } catch (error) {
      try {
        console.log(`Sending error ${error}`)
        Sentry.captureException (error as any)
        console.log(`Error sent`)
      } catch (error) {
        console.debug(error)
      }
      // const errorMessage = handleError(error)
      // message.error(errorMessage)
    }

The console of electron app

[lforst]

@andirsun If the error is sent looking at the network tab, something else might be going on. Maybe you have filters in place or you are out of quota.