sentry-electron: I update to 0.5.4, error on MODULE_NOT_FOUND

@maplemike Thanks so much. I landed on something similar. What worked for me with a project based on electron-react-boilerplate and Electron 1.7.14.

Use app/package.json in the two-package.json scheme

Add @sentry/electron to app/package.json, not package.json. I think this makes sure that the package is in Webpack externals as directed by @jan-auer.

cd app
yarn add @sentry/electron
cd ..

In main process (app/main.dev.js)

import {
  app,
  BrowserWindow,
  ipcMain,
  globalShortcut,
  Notification,
  crashReporter,
  Menu,
} from 'electron';
import * as Sentry from '@sentry/electron';

// Setup Electron crashReporter
const crashReporterOptions = {
  companyName: 'My Company',
  productName: 'My Product',
  ignoreSystemCrashHandler: true,
  submitURL: process.env.SENTRY_CRASH_REPORT_URL,
};
crashReporter.start(crashReporterOptions);

// Sentry setup (Electron SDK)
Sentry.init({
  dsn: process.env.SENTRY_DSN,
  release: `${process.env.SENTRY_PROJECT}-${app.getVersion()}`,
});

// When my main process receives credentials from the renderer process (user logged in)
ipcMain.on('receive-credentials', (event, credentials) => {
  // Update crashReporter (WARN: macOS/Windows/Linux APIs differ)
  if (process.platform === 'darwin') {
    crashReporter.setExtraParameter('user_id', credentials.id);
    crashReporter.setExtraParameter('user_email', credentials.email);
  } else {
    crashReporter.start({
      ...crashReporterOptions,
      user_id: credentials.id,
      user_email: credentials.email
    });
  }

  Sentry.setUserContext({
    id: credentials.id,
    email: credentials.email,
  });
});

In renderer process (app/index.js)

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

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  release: `${process.env.SENTRY_PROJECT}-${remote.app.getVersion()}`,
});

Script for uploading sourcemaps with sentry-cli

I gave up on using the Webpack plugin since that is confused by electron-react-boilerplate having 2 different Webpack setups (1 for main process, 1 for renderer process). Instead, I just use sentry-cli.

Add sentry-cli to devDependencies in top-level package.json

yarn add --dev @sentry/cli

upload_sourcemaps.sh

#!/bin/bash

echo "Uploading source maps to Sentry"

ENV=$1

if [ -z "$ENV" ] ; then
  echo "No argument supplied, please pass the environment"
  exit 1
elif [ "$ENV" != "development" ] && [ "$ENV" != "production" ] ; then
  echo "Environment must be 'development' or 'production', not '$ENV'"
  exit 1
fi

echo "Environment: $ENV"

ENV_FILE_PATH="./env.$ENV"
echo "env file is $ENV_FILE_PATH"
source "$ENV_FILE_PATH"

echo "SENTRY_AUTH_TOKEN: $SENTRY_AUTH_TOKEN"
echo "SENTRY_PROJECT: $SENTRY_PROJECT"
echo "SENTRY_ORG: $SENTRY_ORG"

export SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
export SENTRY_PROJECT=$SENTRY_PROJECT
export SENTRY_ORG=$SENTRY_ORG

# https://gist.github.com/DarrenN/8c6a5b969481725a4413#gistcomment-1678696
PACKAGE_VERSION=$(cat app/package.json \
  | grep version \
  | head -1 \
  | awk -F: '{ print $2 }' \
  | sed 's/[",]//g' \
  | tr -d '[[:space:]]')

echo "Package version: $PACKAGE_VERSION"

echo "Uploading..."
./node_modules/.bin/sentry-cli releases files $SENTRY_PROJECT-$PACKAGE_VERSION upload-sourcemaps app/dist --url-prefix '~/dist/'

In the top-level package.json

Change yarn release command:

    "release": "yarn && npm run build && ./upload_sourcemaps.sh production && build",

I also added this command so I could easily test by tweaking my env.production (I use dotenv to manage environmental variables)

    "upload-sourcemaps-production": "./upload_sourcemaps.sh production",

With all this setup, running yarn release to ship a new version of the app uploads the sourcemaps to Sentry as a release called myapp-production-1.1.0 before uploading the fully built macOS package to Amazon S3. The release is set similarly in the code. Errors are coming in with sourcemaps working. 👍

Seems like electron-react-boilerplate is causing some confusion with their multiple package.jsons and configuration. I have to admit that I haven’t tried that boilerplate yet, but will give it a go and see whether we can make the integration process easier. Thanks for all the feedback so far.

Having said that, we can probably not account for the seemingly complex way the boilerplate is structured. My goal is to get this SDK to work with webpack, and not this specific boilerplate.

Some general things:

• You should include @sentry/electron in both the main process and renderer javascripts in the exact same way. In the main process webpack configuration, it should be declared external. In renderer webpack configuration it should not be declared external (although it wouldn’t matter as long as you have node integration enabled).
• SentryWebpackPlugin should work in any case. If something does not work as expected, please file an issue here
• There is no need to start the Electron crash reporter manually, as @timfish has pointed out. The SDK does this when you initialize it (and also takes care of platform specifics for you)

one small thing to add to @aguynamedben’s answer about the sourcemaps upload: following the document

add following snippet to your webpack.**.prod.js

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

module.exports = {
  // other configuration
  plugins: [
    new SentryWebpackPlugin({
      include: 'app',
      ignoreFile: '.sentrycliignore',
      ignore: ['node_modules', 'webpack.config.js'],
      configFile: 'sentry.properties'
    })
  ]
};

it will upload for you when you make a release build

@aguynamedben This was a nightmare to get going…I’m a Python developer and have been using Sentry for years

webpack.config.base.js

import path from 'path';
import webpack from 'webpack';
import { dependencies as externals } from './app/package.json';

export default {
  externals: Object.keys(externals || {}),
// ... etc

What I did…

• I removed and uninstalled @sentry/electron from my main package.json/node_modules (it would still fail before I did this)
• Went into the app directory and installed @sentry/electron
• Using the current latest release not the fix/dispatch branch

This resolved the module not found error, source maps were another issue…

Sourcemaps

Updating the latest version of the boilerplate should fix this, it was caused by the boilerplate producing bad sourcemaps

If that is too much:

• Uninstall babili-webpack-plugin and remove it from your webpack configurations
• Install uglifyjs-webpack-plugin
• Under plugins (for both webpack.config.main.prod.js and webpack.config.renderer.prod.js ) you’ll want to add:

new UglifyJSPlugin({
      parallel: true,
      sourceMap: true
    }),

Hope that helps…finally have it all working!