Initial Sentry for Online Bug Tracking (PART 1)

preface

In the last chapter, I introduced why the front end needed an online bug tracking system, and simply registered an account in Sentry, and made a small demo to demonstrate the initial process.

But three sore points remain

  • Code version (release version)
  • Error code file (source map)
  • Restoring user operations

This chapter continues with the previous chapter on how to solve the first two pain points.

Set the release of each release project


Sentry.init({
  dsn: 'https://[email protected]/1511376'.release: '[email protected]'.integrations: [new Integrations.Vue({ Vue, attachProps: true })]
})
Sentry.captureException(new Error('about release'))
Copy the code

Refresh the browser and enter Sentry again and you will see the version number in the [version] button.

Now every time a bug is reported online, we know which release brought it in. Now is how to associate the error with sourceMap.

Upload sourceMap

SourceMap is only used in development environments. If you load sourceMap in an online environment, it is not only bad user experience, but also unsafe. How does Sentry solve this problem?

Sentry requires users to upload sourceMap to the Sentry server, manage sourceMap with each release number, and build a Sentry service if uploading to the Sentry server is not safe.

Sentry officials offer two ways

  • Sentry – cli command line
  • Webpack plug-in

The official document: docs. Sentry. IO/cli/configu…

The first: sentry – cli

A. Generate a. Sentryclirc file


sentry-cli --url https://sentry.io/ login  

Copy the code

Follow the prompts to generate the following files

Org, project This is set manually, commands are not generated automatically

B. Run commands to start uploading

Sentry-cli Releases files <release name > uploads -sourcemaps --url-prefix < online resource URI> < directory where the js file is packaged > Sentry-CLI Releases Files  demo-test001 upload-sourcemaps --url-prefix'~/js' './dist/js' 

Copy the code

On the console, if successful, the following display appears

There is a possibility of upload failure, and there is a solution later in this article

C. Open the Sentry background

D. Refresh the browser and look at the error in Sentry. We can already see exactly what went wrong in the code.

Using the command line is too cumbersome, and not very suitable for front-end engineering, fortunately, the official Webpack plug-in, can better combination.

Upload via webpack plugin (@sentry/webpack-plugin)

Configuration is as follows

When packaging, automatic upload, with some project engineering, more suitable for the current front-end project.

Webpack-sentry-plugin (webpack-sentry-plugin) can automatically delete the generated sourceMap without setting the Sentry config file.

After build, you need to delete the source map file again to prevent these files from being uploaded to the server.

Community provided programs github.com/40thieves/w…

Set the pit encountered when uploading source map

A. Error message “project not found” is sent when sending sourceMap

See solution page github.com/getsentry/s…

B. If Too many sourcemaps are uploaded after setting up sentry, 413 Request Entity Too Large may be caused, as follows

> Analyzing 180 sources
> Adding source map references
> Uploading source maps for release test01
error: API request failed
  caused by: sentry reported an error: unknown error (http status: 413)
Copy the code

Reference solution page blog.csdn.net/fdipzone/ar…

C. Rewrite (‘ no-rewrite ‘or’ –rewrite ‘)

Release numbers and Source maps can now be set automatically, but the context of the bug information is not specified. This is an advanced use of Sentry, and we will continue in the next chapter.

Sentry custom error message for online bug tracking (3)