We’re here to work with you at all stages.

View all services
Build products using the latest engineering practices and designs that aren’t just functional but beautiful with Launch.
Learn more
Rethink how your product delivery teams build and design your products. Architect to build the building blocks that allow experimentation with Amplify.
Learn more
Gain market share by designing and building product features. Gain velocity by embedding our experts in your team with Catalyse.
Learn more
Take control of your cloud costs and technical debt, and add coverage for DevOps with Control.
Learn more

Articles

From user research, digital strategy to solving bold engineering problems. Our team specialises in providing a suite of services that take an idea from a rough sketch to an enterprise grade product.
View all articles

Tutorials

Learning new technologies and frameworks ensures we are ahead of the curve. Here is a collection of step by step tutorials about things we've learnt. Learn with us!
View all tutorials

Products

We love open source, and we love giving back. Take a look at our open source products and how we're pushing the bounds of Engineering excellence one product at a time
View all products

Culture

We believe the best digital products are built by a diverse and skilled team. We’ve created a safe inclusive workspace, and we believe in diversity. We are a group that believes in software development and design is a craft. This is what unites us.
Learn more

Mission, Vision & Purpose

Our team is diverse. Each coming from a different background and beliefs. We think of product development & design as a craft. We love to learn new ways of improving our craft - be it learning new frameworks, or adding new specialties.
Learn more

White Papers

We believe the best digital products are built by a diverse and skilled team. We’ve created a safe inclusive workspace, and we believe in diversity. We are a group that believes in software development and design is a craft. This is what unites us.
Learn more

Wednesday Wisdom

Our team is diverse. Each coming from a different background and beliefs. We think of product development & design as a craft. We love to learn new ways of improving our craft - be it learning new frameworks, or adding new specialties.
Learn more

White Papers

We believe the best digital products are built by a diverse and skilled team. We’ve created a safe inclusive workspace, and we believe in diversity. We are a group that believes in software development and design is a craft. This is what unites us.
Learn more

Wednesday Wisdom

Our team is diverse. Each coming from a different background and beliefs. We think of product development & design as a craft. We love to learn new ways of improving our craft - be it learning new frameworks, or adding new specialties.
Learn more
View all tutorials
[Part 3] A proactive approach to handling application errors
October 28, 2021
Ritwik Bhanot
Software Engineer
Contents

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


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

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.

Wednesday is a boutique consultancy based in India & Singapore.

Let's talk

Wednesday is a boutique consultancy based in India & Singapore.

Let’s talk

2023