Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to solve the front-end error monitoring problem". In daily operation, I believe many people have doubts about how to solve the front-end error monitoring problem. The editor consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to solve the front-end error monitoring problem"! Next, please follow the small series to learn together!

In today's Internet era, web development is getting more and more attention, web pages can achieve more and more functions, before only running on the client program, but also gradually transferred to the web page, in the face of thousands of users, the probability of errors is also greater. The large-granularity errors in the early stage of the project will be found in self-test and QA test, but the errors after the launch are not so easy to find. At the same time, mobile development also faces a problem that is not easy to debug, so error monitoring for web development is a very useful measure. What are the methods of error monitoring at the front end?

I. Misclassification

Common web errors fall into two main categories:

1. Run-time errors: This error is often caused by us writing code, such as syntax errors, logic errors, such errors are usually found in the testing phase, but there may be "fish".

2. Resource Load Error: This error is usually caused by a file not found or a file load timeout.

II. Error Capture

Based on the above two error types, there are also different ways to catch errors:

1. Code Error Capture:

// try... catch...

try {

//run code that might be wrong

} catch(e){

//catch error

}

// windown.onerror

_window.onerror = function () {

//catch error

}

2. Resource loading error

// Object.onerror

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

img.onerror = function () {

//catch error

}

Use the Error event proxy of window, but it should be noted that the error event is not bubbling, we can use event capture for proxy.

window.addEventListener("error",function(){

//catch error

},true);

III. False reporting

There are two common error reports: ajax and image objects (recommended).

AJAX reporting is to send an error message to the server by issuing an AJAX request where the error was captured in the comment above.

Using image objects

(new Image()).src ="http://post.error.com? ";

IV. Cross-domain js file error acquisition

Cross-domain js file acquisition is limited, if you want to obtain js errors under other domains, you need to add the crossigin attribute to the script tag.

And then the server has to set

header ('Access-Control-Allow-Origin: *'); At this point, the study of "how to solve the front-end error monitoring problem" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.