Sentry-based front-end error monitoring log system (sentry server deployed/front-end project deployed)- enables the front-end to locate production problems fastest

background

In this increasingly developed network era, Web applications are becoming more and more complex, especially front-end development, but also more and more attention.

Therefore, after the completion of our front-end development, there will be a series of online verification of Web applications, such as self-testing, QA testing, code review, etc., to ensure that

Applications can be produced without accidents.

However, most of the time we will accept some online problems from customers, and sometimes these problems may be the cause of your own development

This problem can be repeated in the test environment, and we can quickly locate the key position of the problem. But, a lot of times there are problems,

We didn’t find it in the test, but there were some people online, and the problem did exist. At this time, our test environment could not be repeated.

There are also some occasional production problems, which are difficult to locate the cause of the problem, causing our front-end engineers a headache.

At this point, we have to resort to some features to solve a series of headaches.

Front-end error monitoring log system

When the current end code is wrong in production, it is transmitted to the monitoring system in the first time, so as to locate and solve the problem in the first time.

To ensure the stability and security of the front-end code, the project can run healthily.

Monitoring system construction scheme

1, you can plan and define a set of perfect monitoring system. Human redevelopment is needed

2. Use third-party plug-ins (Ali ARMS, Fundebug, BadJS, Sentry, etc.)

Ali ARMS: Is a front-end data monitoring service from Alibaba that appears to charge for it

Fundebug: quite perfect front-end error log service, is also charged

BadJS: An open source project by Tencent team. I haven’t seen it. It should be very good

Sentry: github is an open source project that supports error monitoring on all sides.

Build and use the system

Sentry profile

Sentry is an open source real-time error monitoring project that supports a wide range of configurations, including the Web front end, server side, mobile side, and game side.

Support for various languages, such as Python, OC, Java, Node, javascript, etc. It can also be applied to a variety of different frameworks, such as the front-end framework

Vue, Angular, React, and other popular front-end frameworks.

Provides integration of common development tools from Github, Slack, and Trello. You can install and build your own Sentry application.

Supported languages:

The sentry deployment

The official website provides two deployment solutions:

docker

python

Docker is my first time to use it. After reading the document, I found it easy to understand.

In order to facilitate operation, we choose to use Docker to deploy and build Sentry.

Docker and Docker-compose are required for this method.

1. Docker deployment (MAC version)

To install it, go directly to the Docker installation documentation

Docker installation

Docker-compose is already installed for MAC.

2. Deploy Sentry

Get the Sentry code

The latest Sentry code is available on Github

Once local, go to the project directory.

Follow the readme.md of the project to start the step-by-step build.

　　

Here is the production key, SENTRY_SECRET_KEY, which needs to be added to docker-comemage.yml.

　　

Final step:

　　

At this point, our monitoring system’s back-end server is up and running, accessing the local 9000 port.

Log in to our service backend using the email address and password you created midway.

3. Create projects

After login, we will enter the interface of our monitoring project, such as:

　　

We can create a new project by clicking Add New Project in the upper right corner

　　

Here you can choose the configuration, language, and framework of the project, and choose your own project type

Enter a project name and click Create Project. Determine to create a new project.

　　

Click on the red box to create a simple log.

　　

Error message page, you can go to the official website to learn more information.

4. Front-end deployment and injection of monitoring code

　　

Get a link to the project:

　　

Clicking Install on the project’s home page takes you to the current icon page

We copied the Sentry DSN into our front-end configuration

Using Sentry, inject configuration into our application:

　　

Here is react as an example. We catch errors in componentDidCatch of react root and upload them to our monitoring system.

Here we use sentry DSN to configure our Sentry and initialize the Sentry project.

So at this point, we’re pretty much done with our front-end error monitoring log system.

This section describes the Sentry interface

Project Operation page:

1. View options of the project

Issue: list of issues

-Leonard: Overview

Userfeedback: userfeedback

Resleases: Version list information

Setting: Project setting

2. Question screening

Includes: assign own, mark list, need to sort, today, unprocessed

　　

Set to Resolve, Ignore, Merge, mark, Live Monitor

　　

Introduction and use of the Sentry API

　　

1. Javascript SDK reference and configuration

There are now two ways to reference the Sentry SDK:

Direct quote:

The quickest way to do this is to reference our SDK via the script tag

Then there’s configuration.

　　

NPM package references:

The first is the add package @sentry/[email protected]

Reference to the project and configure it

　　

2. Capture events

Actively catch errors or exceptions

Sentry is common in error catching, which can vary depending on the platform and can pass different error messages.

　　

Capture the message

Another common operation is to capture bare information. A message is just some text that should be sent to Sentry.

　　

3. Perform initial configuration

　　

The Sentry SDK can be configured in many ways.

The primary function for configuring the initial configuration is the init() method, which passes a parameter object to the init() method.

　　

　　

Common parameters:

DSN: The address of the project, assigned by sentry to collect error information

Debug: Whether to enable the debug mode. If this mode is enabled, information is printed to the console

Release: The code version number

Release Version number, which determines which release the current error/exception belongs to

You can apply sourcemaps to map source code

Environment: indicates the environment name

SampleRate: Indicates whether to enable random event sending to Sentry.1 indicates 100%; 0.1 indicates 10%

AttachStacktrace: indicates whether stack tracing is enabled. After this function is enabled, messages are collected

BeforeSend: Operation before sending

4. Sentry API

　　

CaptureException (Exception) : Catch a JS exception and pass in an Exception object or class object.

CaptureMessage (Message,level) : Captures a message, passing in the content and level of the message

CaptureEvent (sentryEvent) : Captures an event. SentryEvent is manually created and custom

AddBreadcrumb (Breadcrumb) : Adds a Breadcrumb for subsequent capture

ConfigureScope ((scope)=>{}) : Sets the context information to the scope

WithScope ((scope)=>{}) : Sets a zero-time scope information to the context

5. Context Information

　　

Context information includes user, tags, level, fingerprint, and extra data

This information can be defined by setting it on scope.

Scope can be obtained in two ways.

　　

　　

User

SetUser information by setUser.

The information that user can set includes ID, username, IP_address, and email

　　

Tags

Tags define different key/value pairs for events, making them easier to find.

Background lookup, the search options will have an additional option, which is set by tags.

Set a page_local tag with setTag.

There will be a page_local option in the background. Including DE – the at

level

Use this to set the severity of the event.

Possible values are FATAL, ERROR, warning, INFO, and DEBUG. (fatal: error error, error is the default)

Set by setLevel.

Fingerprint

Fingerprints, which divide information into different groups

Extra Data

Pass in additional information. No indexes are created (that is, they cannot be provided for retrieval).

Set it through setExtra.

　　

6, Breadcurumbs

Breadcrumbs are used to record a sequence of actions and are reported along with the next error event uploaded.

The browser javascript SDK will automatically log everything when the location changes.

We can add an action record by adding breadcrumb.

7, the user Feedback

User feedback, Sentry provides a window for customer feedback.

When an error occurs, you can pop up a window to collect some information, such as:

The user name

The user is the email address

A description of the problem, etc.

The framework pops up via showReportDialog.

　　

　　

Sentry implements alerts and email alerts

　　

Email alerts and email alerts are an indispensable part of the production environment. Only effective alerts can help us solve problems quickly.

Select Setting –> Alerts in the project to enter the email alert setting page.

Here are the basic email rules.

The rule in Tabs can customize the rule.

Rule setting:

An event is seen: The time when An event occurs

An issue is first seen: when the first error occurs

Unresolved: An issue changes state from resolved to unresolved: An issue changes state from resolved to unresolved

An event’s tags match {key} {match} {value} : sent when matching the tags’ key/value pairs

An issue is seen more than {value} times in {interval} : An issue is seen more than {value} times in {interval} : An issue is seen more than {value} times in {interval

An issue is seen by more than {value} users in {interval} : An issue is seen by more than {value} users in {interval} : An issue is seen by more than {value} users in {interval} : An issue is seen by more than {value} users in {interval}

An event’s {attribute} value {match} {value} : indicates when An event is matched

An event’s level is {match} {level} : indicates that the event level matches

Sourcemap configuration for sentry production

introduce

A lot of the time in development today, our code uses build tools to merge, compress, obfuscate, and so on.

When this production code is generated, a Sourcemap is generated to facilitate our development debugging and bug fixing.

The main purpose of SourecMap is to link our packaged code together.

Here, Sentry has a good handle on the production sourcemap, which allows us to quickly identify code errors.

The preparatory work

First we need to add sentry’s command-line management tool sentry-CLI

　　

Obtain the authentication token

After selecting the API, tokens can be generated. Remember to check project: Write permission.

The token here is used for login.

　　

landing

Enter the token obtained in the previous step

　　

Create a version

-o: Organization, which can be found in our Organization Settings

-p: The project name, which can be found in projuct

[email protected]: release version number, which can be customized and passed in when the configuration is applied

Configure Release to the application

　　

Upload the Sourcemap file

　　

-o, -p: same as above

Jspath: the location of the JS file

Uri: The location of the JS file relative to the domain name

Special description url-prefix

The map file cannot be found without the map file.

Your js online address is: https://test.com/static/js/test.js

Url prefix: ‘~/static/js/’

Complete ！！！！

Configuration files, sentry supports configuration files when operating on the command line.

Configuration file default file command directory.

Configuration file.sentryclirc

After configuration, there is no need to enter the project name and address again.

www.cnblogs.com/jiebba/p/10…

My Blog: XiaoLong’s Blog

Blog garden subtotal baba: https://www.cnblogs.com/jiebba