[Turn] JS intercepts/captures global errors Global Error onerror

In the process of mobile web development, when testing on a real machine, we often encounter some problems that cannot be reproduced by PC debugging. At this time, we need to intercept errors on the mobile phone and have corresponding output. There are similar tools/class libraries in the company and on the Internet, but if it is purely a simple debugging, it may not be necessary to introduce tools or class libraries, we only need to know the principle of global interception.

In fact, it is very simple, it is the window.onerror

syntax:

onerror=handleErr
function handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

Whether the browser displays a standard error message depends on the return value of onerror. If the return value is false, an error message is displayed in the console (JavaScript console). Not otherwise.

Example:
The following example shows how to use the onerror event to catch errors:

<html>
<head>
<script type="text/javascript">
onerror=handleErr
var txt=""


function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}


function message()
{
adddlert("Welcome guest!")
}
</script>
</head>


<body>
<input type="button" value="View message" onclick="message()" />
</body>
</html>

In addition, if we want to simulate this process directly in the chrome console, we will find that the onerror cannot be triggered by directly using throw new Error. This may be because the console environment is different from the page environment.

But in another way, it can be triggered:

setTimeout(function(){throw new Error}, 1000)

In fact, to do a good job in bug monitoring, onerror alone is not enough.

Where are the compatible browser pits?

The properties of Error objects are different. For example, the famous Chrome Error object does not have fileName, lineNumber and columnNumber properties;
The parameters of the Onerror event are different. For example, the old version of Firefox does not have columnNumber and error parameters.
The API is different, for example, the old version of IE does not have JSON objects ;
The same attribute name has different meanings in different browsers;
The same attribute has different names in different browsers;
The IE compatibility mode of domestic browsers is also slightly different from the real IE;
……

Front-end engineers will probably feel the same way about these issues.

Error Smart Aggregation

For the same error generated by the same code, the error message on different browsers is different. Errors with different names may be the same error, such as SyntaxError and ReferenceError ; errors with different messages may be the same error, such as can not find variable fundebug and fundebug is not defined . Moreover, the lineNumber, columnNumber, stack, and url of the same error may be different in different browsers.

For this problem, we intelligently aggregate the collected errors using machine learning algorithms, and try to aggregate the same errors together to reduce repeated alarms. According to our preliminary estimates, the current aggregation algorithm can successfully aggregate 90% of repeated errors, which greatly improves the efficiency of user analysis of errors.

Fundebug is a real-time monitoring platform for front-end JavaScript errors. After a lot of compatibility debugging, Fundebug's JavaScript monitoring plug-in has been able to automatically capture errors in various mainstream browsers, and can obtain the most comprehensive error information to help developers debug faster.