preface

Recently, I wrote the front-end monitoring system again. After about two months of writing, the overall system can stumble and run. The monitoring system obtains HTTP request page performance through SDK and reports js errors to the server. However, THE JS error makes me very worried, because I don’t know how to restore the reported error.

Until I discovered the amazing source-map-js package!

This picture was captured by me through SDKjsAn error is reported and passedsource-map-js error-stack-parserReduction of

The preparatory work

  1. Let’s create an empty onevueProject, and then delete some of the useless stuff.
  2. inApp.vueWrite this code in
export default {
  name: "App".data() {
    return {
      testNumber: 1,}},created() {
    this.testNumber = null;
    if (this.testNumber.length > 1) {
      console.log("Wrong!"); }}}Copy the code

After starting the project, the console can see the JS error, and we can also see the exact location of the error by clicking the next error.

So can you see the location of the error report once the package is online?

Tips: Here I use PHPStudy to build the internal network environment

Oh, my God. Flipped over? Why can I see it online?

No, I also put source-Map into the server environment during deployment.

What does source-Map do? In a word: mapping source code

When deploying a project, you will rarely deploy source-Map. Although it can restore the wrong location, but put on the project volume straight up!

And source-map shouldn’t be on the server. It’s like your code is running naked. No one wants their code to be seen by people with ulterior motives.

So how do I restore js error in production?

Restore js errors together!

  1. In the firstmain.jsIn the configurationvueError capture.
Vue.config.errorHandler = (err, vm, info) = > {
  console.log(err,"err");
  console.log(vm, "vm");
  console.log(info, "info");
}
Copy the code

Js is no longer red

  1. Introduce error-stack-parser restorejsExecution stack
import ErrorStackParser  from "error-stack-parser"

Vue.config.errorHandler = (err, vm, info) = > {
  const parseError = ErrorStackParser.parse(err);
  console.log(parseError,"err");
  console.log(vm, "vm");
  console.log(info, "info");
}
Copy the code

  1. source-mapCome on stage reductionTrue, jsAn error location

Be sure to turn on source-Map and deploy the project to the server!

Be sure to turn on source-Map and deploy the project to the server!

Be sure to turn on source-Map and deploy the project to the server!

We need to install the AXIOS package first to get our source-map file


import ErrorStackParser  from "error-stack-parser"
import sourceMap  from "source-map-js"
import axios from "axios"

const LoadSourceMap = (url) = > axios.get(url)

Vue.config.errorHandler = async (err, vm, info) => {
  const stackFrame = ErrorStackParser.parse(err);
  console.log(stackFrame, Error stack);
  findCodeBySourceMap(stackFrame[0])
  console.log(vm);
  console.log(info);
}

// stackframe. fileName is the Js code that reported the error and needs to obtain the corresponding source-map according to this Js code
const findCodeBySourceMap = async (stackFrame) => {
  const sourceData = await LoadSourceMap(stackFrame.fileName + ".map")
  const fileContent = sourceData.data;
 
  const consumer = await new sourceMap.SourceMapConsumer(fileContent)
  // Find the source file name and the number of lines
  const lookUpResult = consumer.originalPositionFor({
    line: stackFrame.lineNumber,
    column: stackFrame.columnNumber
  })
  // You can use sourceContentFor to find the source code for the error
  const code = consumer.sourceContentFor(lookUpResult.source)

  console.log(code, "Restored code")
  // return {
  // code,
  // line: lookupresult. line, // specify the number of error lines
  // column: lookupresult. column, // Specify the number of error columns
  // name: lookUpResult.name
  // }}...Copy the code

Function and Function

  1. ErrorStackParser Parses error messages

    ErrorStackParser parses an array, and each element of the array can be parsed. I’m not going to parse it one by one for the sake of demonstration, so you can try it yourself.

  2. Axios gets the srouce-map file

    Axios is used to get our source-map files. I don’t recommend putting source-Map directly on the server, because someone with an “ulterior purpose” can download your source-Map and restore your code…

    I put it on the server for demonstration purposes, and you can get the source-map content via input upload (implementation in the next article)

  3. Source-map-js restores the source code

    Srouce-map-js is used to restore the source code. As long as you have source-map file can restore! Very powerful!

conclusion

The next article will take you through the implementation of Koa data reporting and show the specific error locations on the front page.

Tell us more about how to build our own front-end monitoring system and the journey of these two months…

reference

In no particular order

  1. srouce-map-js
  2. Initial Sentry for Online Bug Tracking (PART 1)
  3. Restoring front-end code with SourceMap this article always feels like crawling from somewhere, without finding a specific author.
  4. Noerror Readme. md has two articles you should check out!