[Part 3] A proactive approach to handling application errors

Ritwik Bhanot
October 28, 2021

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

Animation showing how to navigate  through sentry to get the auth token.

Click on Create New Token

Select project:write under Scopes.

Choice of scopes to select before creating a sentry token.

Finally, click on Create Token

Step 2

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


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


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') {
    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: [

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
  }, []);

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

Report showing the uploaded 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

Source maps on Setry.

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.

Speak with an expert

Looking for help with development, design, or product strategy? We're here to help.

Schedule a meeting
Get in touch

More Tutorials

Schedule a meeting with Wednesday. Tell us about your product development journey and let's figure out a way to work together.
Talk to us
The Wednesday Show - A show about the design, development, and business of digital products. Every week the founders of Wednesday talk about their learnings of building digital products.
Psst! Listen to our podcast The Wednesday Show here
Close Icon