[

As a front-end developer, you should be most concerned about Javascript errors (js errors). Js errors are complex and diverse, and the Web can roughly divide them into three categories: caught exceptions, custom exceptions, and unhandled exceptions. Capture method respectively: window. The onerror, console. The error, window. Onunhandledrejection; To catch these exceptions, go to Github and search webfunny_monitor

How is WebFunny implemented

Understand the error trend of online projects

Online items report an error trend

First, we need an overview of the trend of errors. We’re not machines and we can’t just stare at our data and see how many errors we’re making, so we need a trend chart. In the error trend chart, the data of the same period 7 days ago is compared for your reference. In addition, we need an alert system so that we can keep track of the health of our online projects in real time. Finally, I added the scoring function to help us judge the health status of the project.

JavaScript error classification aggregation

1, catch exception is by overwriting window.onerror method, to catch JS runtime exception, earth people know, I will not say what.

2. Get a custom exception by overriding the console.error method, which most people probably ignore. Because many third-party plug-ins and libraries print exceptions this way, and it prints exceptions when we can catch them, I call it a custom exception. So we need to override console.error so that exceptions printed by third parties are not missed.

3, unprocessed anomaly by rewriting window. Get onunhandledrejection method. When you use a Promise and forget to write reject, the system always throws an Unhandled Promise rejection. No stack, no other information, especially when writing a FETCH request can easily happen. So we need to rewrite this method to help us monitor for these types of errors and fill you in.

JavaScript error classification aggregation

Through classification and aggregation, we need to count the number of JS errors reported every day, so that it is clear whether your project is abnormal. Click on different columns (select different dates) to display the aggregation results of JS error categories for a particular day. Help us trace the exact date of the error. At the same time, as the user groups are different and the devices used are also different, it is also necessary to analyze the number of errors on each platform system, the specific number of people affected by the error, and the recent occurrence time, which are all important factors to help us troubleshoot errors.

Stack analysis of JavaScript errors

Js error stack analysis

With the error trend analysis and categorization complete, all that remains is to find out where each problem occurred. So I provide three steps to complete the accurate analysis and location of JS error.

1. The specific time of error reporting. For each kind of error, we need to calculate the specific time of its occurrence. This allows us to directly locate the time when the error occurred, saving us the trouble of looking it up.

The specific time when the JS error occurred

2. SourceMap reverse positioning source code. Now, a lot of surveillance systems have this thing, and I want to say too much. With this technology, we can locate your code snippets so that you know what went wrong and fix it before your boss notices.

SourceMap Location source code

3. User behavior records are reproduced. Well, no matter how good your skills are, you’re going to encounter user errors that you just can’t replicate. But don’t worry, we provide a feature called “View Behavior Track”, we can directly based on this error to find out all of the user’s behavior history, isn’t it cool, come and try it

Behavior records

Ok, so now that we have analyzed JS Erro so thoroughly, what front-end errors can you not solve? If it doesn’t work, then you can deploy a practical experience: please visit the official website ** “****www.webfunny.cn**” **** to try ~

](www.webfunny.cn)