preface

How often do you encounter business feedback, a small online program a page can not open, orders can not settle, but when you tested it was fine.

Due to the complexity of the online environment, some problems can only occur in a specific network environment or device. For such problems, collecting exception information is particularly important. We hope to collect not only the stack information of errors, but also the user operation process and device information to reproduce errors.

Easy to collect

The applet App() life cycle provides the onError function, which can collect exception information in the onError

App({// listen for error onError:function(err) {// Error reported wx.request({url:"https://url"// Define the reporting server method:"POST",
      errMsg: err
    })
  }
})
Copy the code

User operation path collection

Some of the more hidden errors if only the error stack information, it will be more difficult to troubleshoot, if there is a user operation path, in the troubleshooting will be more convenient.

Method 1: violence collection method

Pros: Simple and straightforward

Disadvantages: pollute business code, resulting in more garbage code

Method 2: Function hijacking (recommended)

We need to insert monitoring code in the App function onLaunch, onShow and onHide life cycle by rewriting the App life cycle function.

App = function(app) {
    ["onLaunch"."onShow"."onHide"].forEach(methodName => {
        app[methodName] = functionVar breadcrumb = {var breadcrumb = {type: "function",
            time: utils.now(),
            belong: "App", // source method: methodName, path: options && options.path, // page path query: options && options.query, // page parameters scene: Options && options. Scene number}; self.pushToBreadcrumb(breadcrumb); // Add the object to the breadcrumbs})}Copy the code

However, this will overwrite the user-defined content, so we also need to merge the user-defined functions with the monitoring code.

Var originApp = App // Save the original object App =function(app) { // .... The monitoring code //.... is omitted here // Execute user-defined methods}Copy the code

Records of the results

The user goes to the detail page and executes onLoad => getDetail => onReady => buy.

[{"method":"onLoad"."route":"pages/film/detail"."options": {"id":"4206"}},
{"method":"getDetail"."route":"pages/film/detail"."options": {"id":"4206"}},
{"method":"onReady"."route":"pages/film/detail"."options": {"id":"4206"}},
{"method":"buy"."route":"pages/film/detail"."options": {"id":"4206"}}]
Copy the code

Report the strategy

Considering the large amount of logs in large-scale applications, we adopt sampling, merging and filtering to reduce the output of logs. For code implementation, please refer to lib/report.js

Code organization

The project uses rollup as the construction work to realize the transformation from ES6 to ES5 and module loading function.

The project catalog is as follows:

Events. js // listen for custom events report-js // report class utils.js // utility classCopy the code

🌟 like to click a star:

https://github.com/zhengguorong/xbossdebug-wechat

The resources

fundebug

The front-end abnormal monitoring system lands