Project background

The web page opened in the Electron project, the technology stack is React

The project’s error monitoring mechanism uses Sentry, but it doesn’t really make sense to have only errors without the error stack in the source code, so you need to upload sourcemap

Then came the pit

Start by listing the Sentry-related dependencies I used in my project and their versions

"@ sentry/browser", "^ 6.7.1", "@ sentry/tracing" : "^ 6.7.2", "@ sentry/webpack - plugin" : "^ 1.16.0",Copy the code

Problems encountered during installing dependencies

@sentry/webpack-plugin will download sentry/ CLI, which is a tool for automatically uploading sourcemap with webpack plug-in, but it cannot be downloaded. Finally, we use the NPM source of the group to solve the problem, as configured in package.json

// package.json
{
... other config
"publishConfig": {
        "registry": "https://npm.mycompany.com/"
    },
}
Copy the code

Problems encountered in uploading sourcemap

Configuring Sentry to collect errors is very simple, just follow the documentation, it is very easy to catch errors in the Sentry background; Sourcemap (sourcemap, sourcemap, sourcemap) :

At first, when I saw that the file was too big to be cached, I took targeted measures and reconfigured the webpack subcontracting strategy. However, after I unpacked the package, there was a second error indicating source Code Not found, which caused a big circle and felt useless. I still had to start from the configuration of the Web project itself. So I carefully checked the document and found the problem. First, the configuration of devtool for Webpack must be source-map or hidden-source-map in sentry document. This is also important if the js resource is loaded with the address: https://wwww.mycompany.com/assets/js/vendor.js, then urlPrefix need to be configured into this appearance: urlPrefix: ‘~ / assets/js’, in which to represent the web root directory

To put it more bluntly, wwww.mycompany.com is the website domain name, which is spelled in urlPrefix

This is not to be confused with include, which sets the directory in which sentry should find packed JS and map files to upload, and has no direct relationship to the actual static resource loading address

Articles on the Internet have different opinions about which permissions need to be checked to generate authToken. At that time, errors were reported during development and could not be solved, so I simply checked all the permissions when generating authToken to exclude its interference

Finally, if release is configured in sentrycli, then sentry.init () should also be passed in business code and must be consistent, such as using version in package.json

Optionally, sourcemap will automatically generate a random string as a “release” for every build upload, and sourcemap will still work

Anyway, if you want to match it, you have to match it in both places, or you don’t have to match the release field, it’s fine

release: '',
url: 'https://sentry.mycompany.com/',
authToken: '',
org: '',
project: '',
include: path.resolve(__dirname, './dist/static/'),
ignore: ['node_modules', 'webpack.common.js', 'webpack.dev.js', 'webpack.prod.js'],
urlPrefix: '~/path/path',
Copy the code

Error status obtained in sentry

  1. Error display caught after uploading sourcemap initially

Sourcemap upload successfully, but sentry itself has an error, so it has no effect at all. As shown in the following figure, we can only show that the error is in the build product, such as vendor.js

  1. PrefixURl error effect

The sourcemap was modified to upload in the correct format. As you can see in the red box at the bottom right of the image below, the error JS file can be expanded to display the error code, but it still does not map correctly to sourcemap

  1. Finished effect

You can get the error location directly in the source code. The original/minimize toggle button appears in the area circled by two red boxes to the right of the image below. At this point, we’re done.