Front-end error classification:

One: timely code run errors: also known as code errors. This error is usually made by the programmer while writing the code, such as syntax errors and logic errors. Such errors are usually found during the testing phase, but there may be some “catch”.

Resource loading error: This error is usually caused by file not found (404) or file loading timeout.

Ways to catch errors:

There are two ways to catch timely code running errors.

Try {// Run possible error code}catch{// catch error}Copy the code

The other is window.onerror

There are three ways to catch resource loading errors.

Object. The onerror,

 var img =document.getElementById('#img');

     img.onerror = function() {// catch an error}Copy the code

Window. The performance. However, (),

When the browser fetches a web page, it makes an HTTP request for each object in the page (script files, style sheets, image files, and so on). And through the window. The performance. However, can be in the form of an array, and returns the request time statistics, each array members are a PerformanceResourceTiming object!

(function() {// the browser does not support it.if(! window.performance && ! window.performance.getEntries) {return false; } var result = []; / / get the current page all requests corresponding PerformanceResourceTiming object analysis window. The performance. However, (). The forEach ((item) = > {result. Push ({'url': item.name,
            'entryType': item.entryType,
            'type': item.initiatorType,
            'duration(ms)': item.duration }); }); // Console output statistics result console.table(result); }) ();Copy the code



Details: developer.mozilla.org/en-US/docs/…

This is the number of loaded resources, and then subtract the total number of loaded resources from the total number of loaded resources, leaving the number of resources that are not loaded.

Catching Error Events

window.addEventListener("error".function(ev){    console.log('capture',ev)// Catch error},true);Copy the code

The third argument to addEventListener must be true, indicating that it is fired during the capture phase. If it is false, it is bubbling, and no error events are fetched.

<! -- a non-existent resource --> <script SRC ="//baidu.com/test.js"></script>Copy the code



Error reporting methods:

Ajax upload, Ajax report is to send error information to the server by making an Ajax request where the error was captured in the comments above.

Two: use Image object to send information

(new Image()).src=”http://post.error.com?data=xxx”


Cross-domain JS file errors can be caught:

The answer is yes, and the error message is script error



Header (‘ access-Control-allow-origin: *’) or domain name (‘ access-Control-allow-origin: *’);