Renderer fails on 'fs' requirement

[umerkk]

Version

"@sentry/electron": "^2.5.1",

I am integration Sentry to an Electron app using this SDK, so far the Main Process seems to be working fine & sending the event to sentry, but the renderer doesn't work.

I always throw an error

Module not found: Error: Can't resolve 'fs' in '/Users/muhammad.umer/Repo/hub.uw-hub/node_modules/electron' @ ./node_modules/electron/index.js 1:9-22 @ ./node_modules/@sentry/electron/esm/renderer/backend.js @ ./node_modules/@sentry/electron/esm/renderer/index.js @ ./src/renderer/features/downloadDrawer/DownloadDrawer.tsx @ ./src/renderer/layout/AppLayout.tsx @ ./src/renderer/App.tsx @ ./src/renderer/index.tsx @ multi ./src/renderer/index.tsx

I am initializing in the Preload script of my renderer(Browser Window).

Preload.js

const Sentry = require('@sentry/electron/dist/renderer');
Sentry.init({ dsn: 'https://000@000.ingest.sentry.io/000' });

I am explicitly referencing the renderer dist from the SDK in my renderer process, but don't seem to understand why it is referring to nodeFS.

BrowserWindow options
webPreferences: { textAreasAreResizable: false, preload: path.join(__dirname, 'preloads', 'mainWindowPreload.js'), enableRemoteModule: true, },

[timfish]

There is no usage of fs in the SDK renderer code.

The supplied stacktrace seems to suggest that fs is being called from node_modules/electron/index.js

Do you have a repository that reproduces this? None of the existing tests or examples exhibit this behaviour.

[umerkk]

It's Strange because I do not get these errors if i remove Sentry SDK usage from my codebase (Production code).
There must be some dependency using 'fs' using the probably remote module of the electron.

I was able to at least compile the code by changing the webpack target: from from web to 'electron-renderer.
Although it still requires node_modules to be part of the renderer dist otherwise it doesn't work and I am excluding node_modules.

Now after making those above changes, I still get the fs error in console.log of the browser but the events are appearing in Sentry.

My Renderer is in 'React + Typescript' and Main in JS + TS.

This is my webpack config.
`const config: WebpackConfiguration = {

entry: [path.join(__dirname, '..', 'src', 'renderer', 'index.tsx')],

target: 'electron-renderer',

module: {

rules: [

  {

    test: /\.s?[ac]ss$/i,

    include: [rendererLocation, typesLocation, configLocation, /node_modules/],

    use: ['style-loader', 'css-loader', 'sass-loader'],

  },

  {

    test: /\.ts(x?)$/,

    include: [commonLocation, rendererLocation, typesLocation, configLocation],

    use: [

      {

        loader: 'ts-loader',

        options: {

          configFile: path.join(

            __dirname,

            '..',

            'tsconfig',

            'tsconfig.renderer.json'

          ),

        },

      },

    ],

  },

  {

    test: /\.ts(x?)$/,

    include: [commonLocation, rendererLocation, typesLocation, configLocation],

    enforce: 'pre',

    use: [{ loader: 'eslint-loader' }],

    exclude: /node_modules/,

  },

  {

    test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,

    loader: 'url-loader?limit=100000',

  },

],  },

resolve: {

mainFiles: ['index'],

extensions: ['.ts', '.tsx', '.js'],

symlinks: false,

alias: {

  'electron-cookies': path.join(__dirname, '..', 'node_modules', 'electron-cookies', 'dist', 'electron-cookies.js')

}

},
output: {

path: path.join(__dirname, '..', 'build', 'renderer'),

filename: 'index.js',

},`

[umerkk]

Based on the Stack Tree, it looks like Sentry/Renderer is calling Sentry/Backend which in turn may be utilizing the fs module this throwing an error.

Module not found: Error: Can't resolve 'fs' in '/Users/muhammad.umer/Repo/hub.uw-hub/node_modules/electron'
@ ./node_modules/electron/index.js 1:9-22
@ ./node_modules/@sentry/electron/esm/renderer/backend.js
@ ./node_modules/@sentry/electron/esm/renderer/index.js

The originating file is a renderer in the stack trace.

[timfish]

esm/renderer/backend.js attempts to require electron to check whether we are in an isolated renderer or not. electron should be in your webpack externals otherwise webpack will pull in whatever code exists at node_modules/electron/index.js, which in this case is just a small script to get the executable path which happens to require('fs').

Check out the webpack configuration for the isolated test app:
https://github.com/getsentry/sentry-electron/blob/master/test/e2e/isolated-app/webpack.config.js

[umerkk]

Yeah, this seems to fix the issue. Thanks

Although I encountered a few more.
1 - I have to provide two separate implementations of init (in preload.js and Main) because my Main ApmClient (using sentry), doesn't seem to work well in preload.js using the remote modules. It always gives me an error that the signature of init does not match (if i do conditional require based on process.type).

2 - After two init implementations, Sentry.captureError seems to work from main, but Sentry is not capturing unhandled exceptions of the main process. Although it does capture unhandled exceptions of the Renderer process.