Abstract: The resource loader failed destroy the product features and user experience ....
- Author: step by step a pit
- Original: to build a front-end monitoring system (c) static load monitoring resource articles
Fundebug authorized reprint, belongs to original author.
Step by step to build a front-end monitoring system Series blog:
- Step by step to build a front-end monitoring system: JS error monitoring articles
- Step by step to build a front-end monitoring system: how to report the webpage screenshots?
- Step by step to build a front-end monitoring system: monitoring interface request an exception papers
- Step by step to build a front-end monitoring system: how to locate the front line of the problem?
- Step by step to build a front-end monitoring system: How to record user behavior?
- Step by step to build a front-end monitoring system: how to monitor resource loading error?
How to locate the front line of the problem has always been, is very troublesome problem, because it occurred after a series of operations of the user. The reason may be due to the wrong type, network environment, interface request, complex operating behavior and so on, when we want to solve the complex is difficult to stand out, naturally can not solve. Of course, these problems are not insurmountable, let's look at how to monitor and positioning of the line now.
background
Front-end monitoring system on the market there are many, full-featured, variety, whether you use or not, it is all there, crowded. I often need to function in someone's home monitoring system, the manual but unfortunately, nothing more, how can we have a private custom front-end monitoring system? Make a lion comes with front-end engineering front-end monitoring system is a kind of experience?
This is the third chapter to build a front-end monitoring systems, mainly how statistical static resource error, follow me to do, step by step, you can also build a front-end monitoring system of their own.
If you feel there is help, or are interested in, please attention or Star Me .
Please move online: front-end monitoring system
The last chapter explains how to do JS error monitoring, there is a static resource loading error error, often the front-end project resource loading error is fatal, because the static resource loading wrong, there might not lead to the front page rendering, the user can only in front of a blank screen in a daze, overwhelmed. Because suddenly one day, our online environment, a lot of black and white burst error, after a long investigation, and finally locate the cause of the problem: CDN path we use do not know how, our all point to the https protocol http protocol, under the security protocol can not access resources non-secure protocol, resulting in a large number of black and white. So I decided to add a static resource monitoring capabilities to respond to future unknowns.
So, we get to the bottom:
How to monitor the front end of a static resource loading situation?
Under normal circumstances, html page consists mainly of static resources: js files, css files, picture files, those files will fail to load on a page or even a direct impact paralysis, we need to put them all figured out. I'm not sure whether you need to load all static information resource file statistics are down, since the load is successful, looks good, it should be no need of statistics, so we only count the load case of an error.
Let me talk about monitoring methods:
1) using the callback method script tags, searched on the web, see some people say can monitor the situation with the onerror error method, but after a test found no error to monitor the situation, at least at the time of static load cross-domain resource can not be obtained.
2) use performance.getEntries () method to get a list of all the resources loaded successfully, walk all the pages in the onload event collection, using the process of elimination to filter out a list of resources to the success of all the collection, that is, the load failed resources. This approach may seem reasonable, but are also able to troubleshoot a static resource fails to load, but check the timing is difficult to grasp, in addition, if they are loaded asynchronously js will break dishes.
3) Adding a Listener (error) to catch the exception of the front end, the method is what I use, more reliable. However, this method monitors a lot of error, from which we selected a static resource loading error of error, code is as follows:
/**
* 监控页面静态资源加载报错
*/
function recordResourceError() {
// 当浏览器不支持 window.performance.getEntries 的时候，用下边这种方式
window.addEventListener('error',function(e){
var typeName = e.target.localName;
var sourceUrl = "";
if (typeName === "link") {
sourceUrl = e.target.href;
} else if (typeName === "script") {
sourceUrl = e.target.src;
}
var resourceLoadInfo = new ResourceLoadInfo(RESOURCE_LOAD, sourceUrl, typeName, "0");
resourceLoadInfo.handleLogInfo(RESOURCE_LOAD, resourceLoadInfo);
}, true);
}Our error is judged according to the properties of e.target it is the link tag or script tag. I am concerned due to the current caused crashes on the front end, so now only monitors the css, js file loading error.
First of all, we have to do real-time monitoring and early warning, still associated with the same time before the end of the seven days of data, if a time period error amount of surge can be warned in time to stop.
Then, we also need to know more detailed information, as shown below. Enlightened, a look surprised. While the online environment has not reported to us so many problems, but you can see, there are still a lot of static resources daily load error, some of which are very important static resource files, page rendering is inevitably lead to failure, it is necessary to solve.
solution
- Statistics per day, every day lists error loading a change, click on the bar chart, you can see the data change daily, for comparison.
- Analysis of the static resource load error occurs mainly on what pages, narrowing the scope of the investigation.
- Analysis of the number of people affected user, perhaps a lot of mistakes occurred in one person, to reduce the blind investigation.
Static resource load monitoring is complete, here are some details need to be addressed, to help troubleshoot the problem, but I could not think of short-lived fad, a temporary stop here.
About Fundebug
Fundebug focus on JavaScript, applets micro-channel, micro-channel games, Alipay small program, React Native, Node.js and Java applications in real-time online monitoring BUG. Since 2016, two-eleven formally launched, Fundebug handled a total of 2 billion + error event, paying customers have Sunshine Insurance, walnut programming, lychee FM, head of the 1-to-1, micro pulse, the Youth League and many other community brands. Welcome to Free Trial!