Electron + Sentry: Monitoring your production app with sourcemaps
Tags: sentry, electron, monitoring, sourcemaps
Published: 2020-08-16 12:36:10

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ml75cqiyji6fyvi8323m.png)

## What is Sentry?

### Actual Meaning
> A soldier stationed to keep guard or to control access to a place. 💂‍♂️

### Technical Meaning
> Self-hosted and cloud-based error monitoring that helps software teams discover, triage, and prioritize errors in real-time.

## Why [@sentry/electron](https://docs.sentry.io/platforms/javascript/electron/)?

[@sentry/electron](https://docs.sentry.io/platforms/javascript/electron/) is the official Sentry SDK for Electron applications. It can capture JavaScript exceptions in the main process and renderers, as well as collect native crash reports (Minidumps).

## How to add sentry to your electron app?

1. Create a new file `sentryInit.js` which initialize sentry for both main and renderer process using `webpack.DefinePlugin`.

    ```
        // sentryInit.js

        const { init } = (process.type === 'browser'
            ? require('@sentry/electron/dist/main')
            : require('@sentry/electron/dist/renderer'));
        
        init({dsn: '__DSN__'});
    ```

    `__DSN__` : Change __DSN__ with your sentry DSN key for 
    the project.

    You can get your sentry DSN key for the project from 
    `https://sentry.io/settings/<org-name>/projects/<app-name>/keys/`

2. In your webpack config files for main and renderer process, add this plugin. with the following configuration.

    ```    
        plugins: [
            // main process
            new webpack.DefinePlugin({
                'process.type': '"browser"'
            }),

            // renderer process
            new webpack.DefinePlugin({
                'process.type': '"renderer"'
            }),
        ]
    ```

    This will `require('@sentry/electron/dist/main')` for main process and `require('@sentry/electron/dist/renderer')` in case of renderer process so that sentry can be initialized.

3. Finally, import `sentryInit.js` in your Main and Renderer Processes as early as possible.

    ```
        // main.js
        import 'sentryInit.js';

        // background.renderer.js
        import 'sentryInit.js';
    ```

4. [Optional] Test whether sentry is catching exceptions.

    Add `unhandledException()` at the end of your main and renderer process.

That’s it. Now you will see issues coming in your sentry dashboard 🎉

## Why we should add SourceMap to Sentry?

Your errors will start coming in you sentry but they are still unusable if you have minified your code. Your errors will look like this right now:

![No Sourcemap](https://dev-to-uploads.s3.amazonaws.com/i/lzno6ii1vx988xfpu85u.png)

To see the line number of the actual code from where the error came, you need to upload sourcemaps to sentry. After that, you will be able to see the actual line no. of the errors

![With Sourcemap](https://dev-to-uploads.s3.amazonaws.com/i/hrxcgwx2dfkebvad6w4a.png)


![](https://dev-to-uploads.s3.amazonaws.com/i/b8cthfawsz94k99tvqw4.gif)

## How to add SourceMap in your app?

To add sourcemaps to sentry, you can either use `sentry-cli` or `@sentry/webpack-plugin`. We will be using `sentry-cli`. You can find more about sentry sourcemaps from [here](https://docs.sentry.io/sdks/javascript/config/sourcemaps/).

For sourcemaps to work on sentry, you need to upload sourcemaps as well as their minified files too (Also if your sourecemaps doesn’t contain sourcesContent for the source files, you need to upload them too).

1. Install `sentry-cli`. Follow the steps [here](https://docs.sentry.io/cli/installation/) to install sentry-cli.

2. Upload sourcemaps.

    ```
    $ sentry-cli releases files <release_name> upload-sourcemaps \
 path/to/sourcemaps/and/min/files --url-prefix '/url-prefix'
    ```

    Note: Don’t forget to add proper url-prefix for files uploaded using sentry-cli else they won’t work properly.

    Eg. If stack traces show `app:///app/dist/background.min.js` , then you need to add url-prefix `'~/app/dist'` while uploading the file background.min.js.

3. Enjoy stack traces with original source code.

    ![With Sourcemap](https://dev-to-uploads.s3.amazonaws.com/i/hrxcgwx2dfkebvad6w4a.png)

    ![](https://dev-to-uploads.s3.amazonaws.com/i/ivj71cmgipbxstcrs0aq.gif)

### What we do at [Requestly](https://requestly.com/)

* Requestly lets you supercharge your web development by allowing you to setup redirects, modify headers, switch hosts, insert user scripts, cancel requests and much more.

* We are in the process of building our desktop app which lets you intercept request of desktop apps like Spotify, Postman, Slack etc. You can try it out from [here](https://requestly.com/desktop).