Toward Visualization and Improvement of Quality at Web Front End (Error Monitoring)
Zenelo Day 18
WARNING: This is a Google translated (originally Chinese) and reposted article that probably is mostly comfortably understandable for senior Angular developers.
In this paper we assume that you are monitoring errors in the operation of the Web front end , Performance measurement , testing with various browsers Focused on Various We will introduce the service.
below
I was going to write various things, but since I got tired it will be another opportunity () 'д `() Gessori · · ·
TL; DR
- By using Sentry , it is possible to quickly collect error logs, correct errors, and determine rollback.
- Corresponds to major frameworks and libraries such as Angular, React, Vue.
- Cooperation with Slack and JIRA is also possible.
Sentry's prompt error handling
Overview
Sentry is a service that provides information that gathers error logs and helps them investigate.
Nice place
As a developer, the following is a nice place.
- Obtain browser and OS information of user who accessed
- Maintain application-specific information like userId
- Obtain operation log until encountering error
- Notify Slack when an error occurs
- Ticket can be issued from Sentry in cooperation with JIRA
Actual error screen
Some mosaics are put on due to various circumstances.
BREADCRUMBSThere is operation log that it goes downward .
Obtain browser and OS information of user who accessed
Since Sentry is acquiring the browser and OS information of the user who encountered the error, it knows what kind of combination it is occurring, so it is a clue to reproduce the error. If you want to stop notifications from outside the support browser, you can do it from the settings, so even if you are using a policy application such as "IE not supported".
Maintain application-specific information like userId
You need to explicitly set up, but you can send user information like userId to Sentry. Although there are various nice points in our company, in the case of our company, in cooperation with customer success (hereinafter referred to as CS), if a specific user encounters some kind of error and can not do the expected operation, please contact us It is used in situations such as to tell the method of avoidance by telephone from here before getting it. Or, when someone in your company encounters an error, it also triggers you to ask what action you have taken.
This part is the relevant part.
Raven . Setusercontext ({ id : account . UserId });
By embedding the code, for example, when you log in the success of the code, such as described above idwith the name userIdyou can send. As an aside, I think that it is safe if you do not send information when an emergency case is considered for information that an individual such as a mail address can specify. Here is the document of Sentry which describes the main framework, how to introduce it in the library.
Obtain operation log until encountering error
It was the previous BREADCRUMBStime. In particular
- Which screen transitioned to which screen (SPA compatible)
- Clicked element (including id, class)
- Endpoint and status code of the API you hit
As you know, when trying to reproduce, I will try to operate in the same way.
Notify Slack when an error occurs
Periodically checking with Sentry is troublesome, so if you are going to use it, it is good to work with Slack.
I am sorry that only similar errors are coming out.
Sentry can issue JIRA tickets
I think it was impossible to say that it was JIRA on-premises, but I will put the document on it.
Oleore Sentry Use case (including digression)
Because we do not have case examples of other company's use, it is a story limited to our own company.
Pre-Release Test
As a scenario below.
- Pre-release test run
- Unfamiliar error notice to Slack (Sentry channel for verification environment) => frequent occurrence
- Investigation of cause => correction
- release
Roll-back section
As a scenario below.
- Release execution
- Unfamiliar error notification to Slack
- Investigation of cause
- It turns out that it is frequent error and critical in non-edge case
- Roll back instantly
Today's Sentry charge
This is a complete digression, but if you operate error monitoring by Sentry, you probably have "There is an end today if you look at the error log" It may be better for mental health if you feel like B tomorrow.
♂ ️ Finally ♂ ️
It was a great job in 2018.
Have a good year.