preface

Now the front end of the project, if once published online, code tends to confuse, compressed encryption, even if there isn’t a bug tracking system online, once the client error, front can’t timely perception, this time will need to use the staff report, layers of reporting to the technical side, technology if you want to debug or for more specific information, there is no way, In most cases, there is only one image, but sometimes it is difficult to trace the cause of the bug with only one image, and when you really find out, the day lily is cold.

No one can guarantee that code will be bug-free, especially if a project is written by a team. Similarly, no matter how good QA is, there is no guarantee of coverage on a compact scheduled project for an Internet company, so bugs are normal.

The key is how to detect online bugs in the first time, analyze the causes, and go online in time. If I do this well, I can minimize the loss of the company, avoid further deterioration, improve the influence of the technical team in the company, and save myself from having to kill a product every time (😂 bill (´∀ ‘) devoured 😂).

The demand has, that looks for the solution, in the Internet this domain, as long as has the pain point, especially about the programmer, affirmation has already had the mature program.

Various Web bug tracking systems

Frontjs and Fundebug are popular in China these two years. Trackjs is used by StackOverflow abroad, and Microsoft and Google are also said to have some systems in use. Instabug, which PayPal and Yahoo use; Rollbar for Uber and WeWork; Sentry can be deployed on your own system and is open source for free.

  • frontjs www.frontjs.com/pricing
  • fundebug www.fundebug.com/
  • trackjs trackjs.com/
  • instabug instabug.com/
  • rollbar rollbar.com/
  • sentry sentry.io

With the exception of Sentry, which can choose to build its own service, other large-scale commercial use of the system requires money.

After a certain scale, there is a fee to deploy the project to the official Sentry system, and of course there are many benefits: cool charts, intuitive data, no need to invest in research and development, management of the data, you can pay enough money (500-5000 months), and all the features you want.

However, many small and medium-sized companies do not necessarily have the budget for this aspect. Our company does not have the budget for this aspect at present, so we built the Sentry system by ourselves.

What pain points do these online bug tracking systems solve?

Personally, a bug tracking system should be able to solve the following problems

  • First notice
  • The url of the error
  • The specific error text and type
  • Some information about the client (browser version, operating system, user behavior)
  • Code version (release version)
  • Error code file (source map)
  • Restoring user operations

If all of the above can be solved, what bugs can’t be solved in time?

We’re going to talk about how to build a bug tracking system with Sentry.

Enter the theme stage

Step 1: Register an account and create a project

To get off to a fast start, we can quickly register a Sentry account using our Github account and create a VUE based [test project], as shown below

The sentry’s official website sentry. IO

Step 2: Front-end deployment, manually raising an exception

Deploy the following code into the VUE project according to the code given in the official Installation Guide

import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'https://[email protected]/xxx'.integrations: [new Integrations.Vue({Vue, attachProps: true})]});// Raise an exception
Sentry.captureException(new Error('First mistake'))

Copy the code

The front end of the installation guide docs. All about javascript projects sentry. IO/platforms/j…

Open the Chrome type http://localhost:8080/index, monitoring network, you will see the following data

If you open the background of Sentry, you can see that there is already a message (the mailbox should also receive an email).

By default, sentry logs are logged by URL. For example, refresh Chrome, open Safari again, and then look at sentry statistics

You can clearly see that the message was only recorded three times.

If you change the URL, such as http://localhost:8080/, Sentry creates a new record

As you can see from the image above, although the error message is the same, sentry thinks it is another error because the URL has changed.

The following information is the variety of information collected by Sentry

Isn’t it powerful? So far, we have simply deployed Sentry and solved four important problems

  • First notice
  • The url of the error
  • The specific error text and type
  • Some information about the client (browser version, operating system, user behavior)
  • Code version (release version)
  • Error code file (source map)
  • Restoring user operations

The last three problems can be solved quickly by simply adding some configuration to the Sentry, which will be covered in detail in the next chapter.

Sentry Release +sourceMap (2)

Sentry custom error message for online bug tracking (3)