Code _javascript tips for using JavaScript to monitor front-end-related data

This article describes the JavaScript monitoring front-end data, the project development completed outside, there is no monitoring system, we can not understand the release of the code on the user's machine to perform the correct, so need to establish front-end code performance-related monitoring system.

So we need to do some of the following modules:

A. Collect script execution errors

Function error (msg,url,line) {
  var report_url = "xxxx/cgi";///collect information on escalated data
  var m =[msg, url, line, navigator.userage NT, +new date];//collect error message, Error script file network address, user agent information, time
  var url = report_url + m.join (' | | '); /assembly error escalation information content URL
  var img = new Image;
  Img.onload = Img.onerror = function () {
   img = null;
  };
  IMG.SRC = url;//send data to background CGI
}
//Monitor error escalation
window.onerror = function (msg,url,line) {
  error (Msg,url, line);

By managing the backend system, we can see every error on the page, and we can quickly locate and solve the problem with that information.

Ii. Collection of HTML5 performance information

Performance contains the execution time for different execution steps in the entire lifecycle that the page is loaded into execution completion. Performance related articles Click as follows: Use the performance API to monitor page performance

Calculates the time difference between different step times relative to Navigationstart, which can be collected by the corresponding background CGI.

function _performance () {
  var report_url = "xxxx/cgi?perf=";
  var perf = (window.webkitperformance window.webkitPerformance:window.msPerformance),
   points = [' Navigationstart ', ' unloadeventstart ', ' unloadeventend ', ' redirectstart ', ' redirectend ', ' fetchstart ', ' Domainlookupstart ', ' connectstart ', ' requeststart ', ' responsestart ', ' responseend ', ' domloading ', ' domInteractive ', ' Domcontentloadedeventend ', ' domcomplete ', ' loadeventstart ', ' loadeventend '];
  var timing = pref.timing;
  Perf = perf? perf:window.performance;
  If (perf && timing) {
   var arr = [];
   var navigationstart = timing[points[0]];
   for (Var i=0,l=points.length;i<l;i++) {
     arr[i] = timing[points[i]]-navigationstart;
   }
  var url = report_url + arr.join ("-");
  var img = new Image;
  Img.onload = Img.onerror = function () {
   img=null;
  }
  img.src = URL;
}

Through the background interface collection and statistics, we can have a detailed understanding of the performance of the page.

Third, the statistics of each page JS and CSS load time

Before the JS or CSS load time stamp, after loading time stamp, and the data to the background. The load time reflects the screen of the page and the waiting time to operate.

<script>var Cssloadstart = +new date</script> <link rel= "stylesheet" href= "Xxx.css" type= "Text/css"
"Media=" > <link rel= "stylesheet" href= "Xxx1.css" type= "Text/css" media= "all
" > <link rel=
" Stylesheet "href=" Xxx2.css "type=" Text/css "media=" All ">
<sript>
  var cssloadtime = (+new Date)- Cssloadstart;
  var jsloadstart = +new Date;
</script>
<script type= "Text/javascript" src= "xx1.js" ></script>
<script type= "text/" JavaScript "src=" Xx2.js "></script>
<script type=" Text/javascript "src=" Xx3.js "></script" >
<script>
  var jsloadtime = (+new Date)-Jsloadstart;
  var report_url = ' xxx/cgi?data= '
  var img = new Image;
  Img.onload = Img.onerror = function () {
   img = null;
  };
  IMG.SRC = report_url + cssloadtime + '-' + jsloadtime;
</script>

The above is the entire content of this article, I hope to help you learn, but also hope that we have a lot of support