The fifth period | front-end monitoring: monitoring and buried point development point of view to understand, multiterminal error monitoring implementation

const tracking = require("promise/setimmediate/rejection-tracking");
tracking.disable();
tracking.enable({
allRejections: true,
onHandled: () => {
// We do nothing
},
onUnhandled: (id: any, error: any) => {
const stack = computeStackTrace(error);
stack.mechanism = 'unhandledrejection';
stack.data = {
id
}
// tslint:disable-next-line: strict-type-predicates
if(! stack.stack) { stack.stack = []; } Col.trackError(stringifyMsg(stack)) } });Copy the code

2. Small program (Song Xiaocai)

• Network request: Proxy for the wx.request aspect of the global object WX

• Page jump: overrides the Page object and proxies its lifecycle methods

import "miniprogram-api-typings"
export const wrapRequest = () => {
const originRequest = wx.request;
wx.request = function(... args: any[]): WechatMiniprogram.RequestTask { // get request datareturn originRequest.apply(this, ...args);
//
}
}Copy the code

3. Realization of small program SDK (Song Xiaocai)

/* global Page Component */
function captureOnLoad(args) {
console.log('do what you want to do', args)
}
function captureOnShow(args) {
console.log('do what you want to do', args)
}
function colProxy(target, method, customMethod) {
const originMethod = target[method]
if(target[method]){
target[method] = function() {customMethod (... arguments) originMethod.apply(this, arguments) } } }Copy the code

// Page
const originalPage = Page
Page = function (opt) {
colProxy(opt.methods, 'onLoad', captureOnLoad)
colProxy(opt.methods, 'onShow', captureOnShow)
originalPage.apply(this, arguments)
}
// Component
const originalComponent = Component
Component = function (opt) {
colProxy(opt.methods, 'onLoad', captureOnLoad)
colProxy(opt.methods, 'onShow', captureOnShow)
originalComponent.apply(this, arguments)
}Copy the code

Allan: Author of React+Redux Front-end Development

Beibei Group is very dry goods, here is the post, the environment is faced with a lot of end, 80+ projects.

The following is my PPT excerpt from the original, and add personal part of personal understanding. Mainly because beibei Group’s sharing is too dry.

Go straight to error capture

1. Error capture mechanism

• Window. onerror: Runtime error capture

• Window.addeventListener (‘ unhandledrejection ‘) : Promise has no catch error

• Try /catch handles cross-domain scripting errors

• Error capture in other technology stacks (Vue, React)

• Window.addeventListener (‘ error ‘) : Resource loading error

•… …

2. Listen for window.onError

When JavaScript runtime errors (including syntax errors and exceptions thrown in handlers) occur, the error event using the interface ErrorEvent is raised at the window and called window.onerror()

3. Listen for the unhandledrejection event

When a Promise is rejected and not processed, the unhandledrejection event is emitted. Therefore, you can monitor the event to capture and report the error information.

4, cross-domain Script error: Script error.

[Option 1] : configure access-Control-Allow-Origin at the back end and crossorigin at the script tag at the front end. [Option 2] : hijack the native method and use try/catch to bypass and throw the error

Scheme 2 is used: the advantage is that no errors are reported directly, errors can be caught by try/catch mode, and js execution is not affected. I personally recommend it when dealing with code editing. I learned this from writing eggjs. Working with Primose can greatly simplify the code

5. Other technology stack — vue.js

ErrorHandler (errorHandler) Hijacking Vue.config.errorHandler (errorHandler) Captured errors in Vue entries

6. Other technology stack — React. Js

Listen for componentDidCatch when an error occurs in a React project and report it

7. User behavior collection

This is actually very simple, a lot of times the wrong product is required to reproduce. Just like when we were developing the test would give you the replay. If you don’t know what’s causing the bug, you can’t fix it properly. Maybe you fixed a bug and crashed the system instead?

User behavior can be divided into: user behavior, browser behavior, console printing behavior

We can do the following for

[1] Click behavior (user behavior)

Use addEventListener to listen for click events globally, collecting user actions (click, input) and DOM element names. Report errors and actions when they occur.

[2] Sending request behavior (browser behavior)

Listen to the onReadyStatechange callback of the XMLHttpRequest object and collect data as the callback executes.

[3] Page skipping (browser behavior)

Listen for window. onpopState. This method is triggered when a page jumps to collect information

[4] Console printing (console behavior)

Rewrite the INFO, WARN, and error methods of the console object to collect information during console execution.

Five, error or buried data processing

This is the key, so there’s not a lot of powerpoint. And a little bit of personal understanding

1, the burial site

Buried points belong to business analysis, and more data analysis is based on the direction of business itself.

The key is to make sure that your data is a coherent loop that can fully analyze the user’s behavior from entering to leaving the page.

In doing so, the pCE cloud team basically buried every button.

Finally, a thermal analysis diagram is generated. (pretty cool) to identify areas of the page that are frequently used

2. Error monitoring storage

This is the highlight section

First of all, I learned several points during the process of participating in video learning

1, ES (ElasticSearch)

Es is a highly extensible, open source, full-text search and analysis engine that can quickly store, search, and analyze massive amounts of data in near-real-time.

Simply put, it is like a Baidu search engine, fast and accurate

Main Points to understand:

Why use ES, because it is full text index, very fast, but mysql is much worse.

ES is used to process data at a time. It is not used as long-term storage and generally only stores data for one month

2, Database storage (MySQl)

After the current data is processed, it will be stored in the database for subsequent analysis and processing

3. Storage process

Error reporting — Data cleaning — Data Persistence — Data visualization — Monitoring alarms

4. Data cleaning

The key is to analyze the data, extract aggregate repeated errors, collate them into smaller pieces of data, and store them

It is also to reduce the pressure on the server and provide a relay station.

For example: Beibei and Ali Dingding both mentioned the need for peak cutting of data, which we can understand literally

Beibei Group’s approach is:

1. Every minute

2. 10,000 pieces of data are obtained per minute: if more than 10,000 pieces of data are obtained, samples will be stored in the database

3. The number of errors of the same type greater than 200 is only recorded

4. Processing useless information, etc. (The uploaded data needs to be processed with string, so there will be garbled characters or meaningless characters)

The core is: eliminate the repetition, leaving the only

5, the alarm

The purpose of an alarm is to quickly notify the responsible person and rectify the system. At the same time, you need to analyze and classify errors according to the situation. Such as: general errors, functional errors, page errors, system errors, and so on an upgrade process

For example: general errors, functional errors can send work group, email

But the system level error is texting

Six, the other end of an error capture processing

Here is mainly extracted from the PPT of Beibei Group, basically screenshots

1. Node error monitoring

1. Initialization

To start a node, obtain the initial ID of the current node. If it is clustered processing, such as the case of Beibei Group ZooKeeper to obtain the corresponding business ID to achieve the initialization of skynet

Error capture mechanism

The Node side uses the Process object to listen for uncaughtExceptions and unhandledRejection events to catch unhandled JS exceptions and Promise exceptions

3. Collect error information

Once the error object is caught, it is parsed using a third-party library stack-Trace, which parses the error stack into groups and retrieves the source code for the in-application files in the stack call link.

The main use of third-party libraries to achieve a visual display of error information

2. Weex error monitoring

1. Multi-terminal compatibility

1) Weex project package has two sets of Webpack configuration, but the unified reference in the business is @WEEx/Skynet

2) Use replace-loader to replace the package with @FE-base/Skynet

2. Error capture

1) The front end provides the business module name for the client

2) Pass the module name to the client through the hybrid interface

3) The client reports weeX errors when they are captured

3. Small program monitoring

I won’t take screenshots of small program monitoring. Too much writing. Let me just summarize

First of all, when the app of the small program starts, there is an error capture function: onError, through which the global error can be caught

Then, since it is the C end, you need to get a unique ID of the applet currently started, except for the APPID, which is related to the user’s information, as a record, and report it as an error log start.

4. Client monitoring

1. Android error reporting mechanism

Use the system to provide the mechanism to realize Thread. UncaughtExceptionHandler interface, obtained by uncaughtException collapse error, replace the default during application initialization callback of collapse

Understanding for fang-poo front-end development:

• uncaughtException: analogous to window.onerror on the front end

• Thread. UncaughtExceptionHandler: callback function

2. Ios error monitoring

Using the error capture mechanism provided by the system, the system registers objective-C exceptions and POSIX signal processing hooks. When a crash occurs, the hook function can record the crash information. The error will be reported the next time the App starts.

5, teasing

I’m from Bebe Group and I almost sent the powerpoint. It feels like there’s so much to learn. The scope of knowledge design is very wide. You can understand that, but let’s make a little bit more sense

7, summarize the self-statement

In fact, I think the most important part is the wrong analysis, and the conclusion part.

Because they’re all holes that other people have stepped on. But I haven’t done this personally. Only to the technical point of view of how to achieve monitoring this start.

When I do it myself then I guess I’ll go back and flip it over.

Here I apologize: this article is basically plagiarism, personal understanding is limited.

On the one hand, personal knowledge is not enough, and on the other hand, teachers are a little high. It’s like aiming high, but the foundation is not strong, and it’s daunting

A small goal: Write an automatic monitoring function that monitors the basic data on the front end, just like the non-invasive code

Thank you

Front-end Early chat conference goal to become useful, understand, copy the technology conference, planned to be held in 2020 >= 15, jointly held by front-end early chat and nuggets, front-end early chat conference schedule dynamic, video recording /PPT/ lecture notes download, please pay attention to the “front-end early chat” public account follow up.

On May 16, held the sixth – front end what play Serverless (Paas | Faas), please stamp: huodongxing.com/go/tl6, posters and lecturer itinerary is as follows:

If you’re inspired, give it a thumbs up