Introduction to the

The following are some of the problems that new front-end systems encounter when they come online

  • The front end reported an error, the user use function is abnormal, there is no channel to inform the developer
  • After learning of the error, the source map was deleted because the front-end code was confused and compressed, so it was impossible to accurately locate the error position
  • If the user’s operating system, browser, request content, and storage information are not known, the problem cannot be recur

At present, there is a unified solution to the above problems, which is to use the Web bug tracking system. Currently, the open source free and easy to use system is the Sentry introduced today

The characteristics of the sentry

Sentry can be used to view bug tracking information directly on its website, https://sentry.io/, as well as to support internal enterprise construction

Functionally, Sentry supports

  • Send error notification
  • Provides information about the client, including the browser version, operating system, and request content
  • Code version (release version)
  • Upload code source map

How do I use Sentry

The following uses a React project as an example to show how to use Sentry

1. Register an account and create a project

Visit sentry’s website at https://sentry.io/

After registering, create a project. Select React to create a project


After creation, there is an official guide to how to use the code


Just follow the steps, which should pay attention to the addition of DSN, this is unique to each project, do not put wrong

The default interface is in English, and the time zone is not China’s time zone, there will be a time difference of 8 hours, it is recommended to change, change the location in the user’s specific project Settings



2. Front-end start

Start by installing the Sentry browser package

$yarn add @sentry/browser

Copy the code

Then initialize the project and throw an error

import React from 'react';

import ReactDOM from 'react-dom';

import * as Sentry from '@sentry/browser';

import App from './App';



Sentry.init({dsn: "your dsn"});



ReactDOM.render(<App />.document.getElementById('root'));

Copy the code

Then, a button was added to the App, and an error code would appear after the button was clicked, causing the program to report an error

<button

  onClick={() => {

    const a = {}



    // An error is also reported here

    console.log(a.name.name)



    // Throw an error

    new Error('Throw an error')

  }}

>

  throw error

</button>

Copy the code

Start the project, click button, and check console to see that an error has been reported



Check Chrome’s Network to see that Sentry has sent a request to our system


Then go to our system to check, a new issue will be found in the problem navigation


After opening, you can see the detailed information, which will find that the source code can not accurately find the error location, but there will be the entire error path and the operating system of the error person, browser information, etc


If this error is triggered several times in a row, you will find that the number of errors does not increase as long as it is the same error, but only in the number of events and users


3. Set the release number of the release project

As mentioned above, there is currently no way to determine the exact source code location where the user error occurred because source Map did not upload sentry

The essence of setting the release version number is to prepare for the subsequent upload of Source Map, which is used to distinguish different versions of Source Map and facilitate code mapping reporting errors

Specify release as follows

import * as Sentry from '@sentry/browser'



Sentry.init({

  release: 'test004'.

  dsn: 'https://<key>@sentry.io/<project>'

})

Copy the code

Test004 is the release number. If the button is clicked to trigger an exception, the sentry will display the content in the version position. If the release number is not specified, n/ A will be displayed


3. Upload source Map

SourceMap is only used in the development environment, and loading sourceMap in the online environment not only affects the user experience, but also exposes the source code.

Here are a few ways to upload sourceMap to Sentry

Sentry – CLI command line upload

First install Sentry-CLI

$yarn global add sentry-cli

Copy the code

Then modify the generated ~/.sentryclirc, you must add org and project

[auth]

token=<token>



[defaults]

url=https://sentry.io/

org=mdnice

project=test004

Copy the code

Then package the application, generate a build directory, and upload the. Map file in the directory with instructions

$Sentry -cli releases Files 
      
        uploads -sourcemaps --url-prefix < online resource URI> < directory where js files are packaged >
      



$ sentry-cli releases files test004 upload-sourcemaps --url-prefix '~/static/js' './build/static/js'

Copy the code

After success, open the version of the Sentry console to see the uploaded file


Click on the button to trigger the exception, and you can see that the map is already mapped to the specific code line location, which is the reason for uploading the Source map


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

The command line approach is not enough engineering, the official Webpack plug-in can be used

Start by installing the following two packages

$yarn add @sentry/cli

$yarn add @sentry/webpack-plugin

Copy the code

Then configure the following code in the webpack.config.js code

const SentryPlugin = require('@sentry/webpack-plugin');



new SentryPlugin({

  release: 'test004'.

  include: './build'.

  urlPrefix: '~ /'.

  ignore: ['node_modules'.'webpack.config.js'].

})

Copy the code

This allows you to upload sentry directly when packaging, instead of executing a separate command to do so

This plugin does not delete the configuration items of the packaged file. Map

4. Other sentry features

If the basics aren’t enough, there are other advanced features

  • Configure beforeSend to pop up a dialog box for more detailed information feedback
Sentry.init({

  dsn: "your dsn".

  release: "test004".

  beforeSend(event, hint) {

    // Check if it is an exception, and if so, show the report dialog

    if (event.exception) {

      Sentry.showReportDialog({ eventId: event.event_id });

    }

    return event;

  },

});

Copy the code

  • You can also customize bug context information
Sentry.setUser({"email": "[email protected]"});

Sentry.setTag('api'.'api/list/get')

Sentry.setLevel('error');

Sentry.setExtra('data', {

  req: {a:1},

  res: {b:1},

  header:headers

})

Sentry.captureException(new Error('throw new api'))

Copy the code


conclusion

Sentry is an excellent bug-tracking system that makes a great contribution to getting bug information for live applications and hiding source maps. You are welcome to use it

This article is formatted using MDNICE