This is the last part in a 3-Part series on proactively handling errors in your application. In this part, we will use the sentry-webpack-plugin to upload source-maps to Sentry.

In Part-2, we had used Github Actions to create our CD pipeline to upload source-maps. There are many different CD tools out there. You could already be using any of those that might need a different configuration. Using the sentry-webpack-plugin, you can upload the source-maps to Sentry. All you need to do is add and configure it using webpack.

You can find the earlier parts below:

Part 1

Part 2

Create sentry auth token

The authentication token is used for all communication with Sentry.

Step 1

Navigate to Sentry → User → API Keys

Click on Create New Token

Select project:write under Scopes.

Finally, click on Create Token

Step 2

Copy the token generated and add it to .env.development and in the .env file

SENTRY_AUTH_TOKEN=123

Similarly, add SENTRY_ORG and SENTRY_PROJECT to the .env.development and in the .env file

SENTRY_ORG=
SENTRY_PROJECT=
SENTRY_AUTH_TOKEN=

Integrate sentry-webpack-plugin into react app

Step 1

Open the terminal and execute the following command, this will install sentry-webpack-plugin

yarn add --dev @sentry/webpack-plugin

Step 2

Paste this snippet into the internals/webpack/webpack.config.prod.js

We are only uploading source-maps on production builds.

const SentryPlugin = require("@sentry/webpack-plugin");
...
const prodPlugins = [];
if (process.env.ENVIRONMENT_NAME === 'production') {
  prodPlugins.push(
    new SentryPlugin({
      authToken: process.env.SENTRY_AUTH_TOKEN,
      org: process.env.SENTRY_ORG,
      project: process.env.SENTRY_PROJECT,
      include: '.',
      ignore: ['node_modules', 'internals', 'build']
    })
  );
}
module.exports = {
  ...
  plugins: [
		...,
		...prodPlugins
  ],
	...
};

Testing your integration and source-maps

Paste this snippet in your app/containers/App/index.js

import React, { useEffect } from 'react';
...

export function App({location}) {
	useEffect(() => {
    if (process.env.NODE_ENV !== 'test') {
      const a = null;
      // eslint-disable-next-line
      console.log(a.a300);
    }
  }, []);
  ...
}
...

Commit your code

git commit -m "add sentry-webpack-plugin"

To test it out locally, run

yarn build

Once completed you should see the upload report in the logs

This will actually upload the source-maps to sentry from your local machine.

However, this isn't recommended. We should ideally never be uploading anything to sentry from our local machine, but rather delegate to the CD pipeline.

If you already have a CD pipeline setup that then push your code on the release branch

git push  

Go to Sentry → Organization Settings → Projects → [your-project-name] → Source Maps

you should see the uploaded source-map release

Navigate to the URL where the website is hosted.

You'll be greeted with a Sorry. Something went wrong! screen. Don't worry; this means your ErrorBoundary has been invoked.

Navigate to the project from the sentry dashboard, and take a look at the issue. We now have support for release mapping

Where to go from here

I recommend going through the Sentry Webpack Plugin documentation if you need a custom config for the plugin. If you run in issues with source-maps check out the troubleshooting guide in sentry docs

I hope you enjoyed reading this series. If you have any questions or comments please feel free to tweet at as here.