Build front-end monitoring System (ii) JS error log Collection Chapter

=================== Code Show ================

Monitoring System Address: Demo Address

page probe code: GitHub address

Analyze the backend address: 　 GitHub address

Display platform Address: GitHub address

=================== Code Show ================

　　For front-end applications, the occurrence of JS errors directly affects the quality of the front-end application. The monitoring of JS Anomaly is an important link in the whole front-end monitoring system. So how to do the JS error monitoring it? How do we analyze the JS errors that we have compiled? How should the results of the analysis be presented? These issues will directly affect the ability to monitor and divide valuable data.

　　first of all , we should have a general understanding of JS Error situation, so as to be able to timely understand the health of the front-end project. So we need to analyze some of the necessary data.

such as: For a period of time, the use of JS Error trends (chart charts), the rate of JS errors, JS errors on the PC side of the probability, JS errors on the iOS side of the probability, JS errors on the Android side of the probability, and JS error classification.

　　then , we go to the JS error in the detailed analysis, assist us to troubleshoot the location of the error and the cause of the error.

such as: JS error type, JS error message, JS error stack, JS error occurred in the location and the location of the code, the probability of JS error, browser type, version number, device model, and other ancillary information

One, JS Error monitoring function (data preview)

　　

In order to get this data, we need to analyze it when we upload it. In many log analyses, many fields and functions are duplicated, so they should be encapsulated.

//set common properties for the Log object class  functionSetcommonproperty () { This. Happentime =NewDate (). GetTime ();//Log Occurrence Time     This. Webmonitorid = web_monitor_id;//unique identity used to differentiate an app (one item)     This. Simpleurl = Window.location.href.split ('? ') [0].replace (' # ', ');//URL of the page     This. Customerkey = Utils.getcustomerkey ();//used to differentiate users, corresponding unique identities, and to clean up local data after failure     This. Pagekey = Utils.getpagekey ();//used to differentiate the page, corresponding to the unique identity, each new page corresponds to a value     This. DeviceName =Device_info.devicename;  This. OS = Device_info.os + (device_info.osversion? "" + Device_info.osversion: "");  This. Browsername =Device_info.browsername;  This. browserversion =device_info.browserversion; //Todo location information, pending processing     This. Monitorip = "";//the IP address of the user     This. Country = "China";//User Country     This. Province = "";//User Province     This. City = "";//The city where the user resides    //user-defined information, initiated by the developer, facilitates accurate positioning on the line     This. UserId =User_info.userid;  This. Firstuserparam =User_info.firstuserparam;  This. Seconduserparam =User_info.seconduserparam; }  //JS error log, inherited from the log base class Monitorbaseinfo  functionJavascripterrorinfo (Uploadtype, errormsg, Errorstack) {setcommonproperty.apply ( This);  This. Uploadtype =Uploadtype;  This. errormessage =encodeURIComponent (errormsg);  This. Errorstack =Errorstack;  This. Browserinfo =Browser_info; } Javascripterrorinfo.prototype=NewMonitorbaseinfo ();

Encapsulates a Jserror object Javascripterrorinfo to save the JS error generated on the page. Where Setcommonproperty is used to set common properties for all log objects.

1) Rewrite the Window.onerror method, we are well-known, the monitoring JS error must be inseparable from it, some people on his test test introduction feeling is also more intentions

2) Rewrite the Console.error method, why to rewrite this method, I can not give a clear answer, if the app first injected into the browser JS code error, Window.onerror is unable to monitor, so can only be captured in this way, there may be a better way to wait for Window.on After the error succeeds, this method no longer needs to be used.

Below is the start JS error monitoring code

/** * Page JS error monitoring*/  functionRecordjavascripterror () {//rewrite the Console.error to capture more comprehensive error messages    varOlderror =Console.error; Console.error=function () {      //The length of the arguments is 2 o'clock, which is the time for error escalation.      //if (Arguments.length < 2) return;      varErrorMsg = arguments[0] && arguments[0].message; varURL =web_location; varlinenumber = 0; varColumnNumber = 0; varErrorobj = arguments[0] && arguments[0].stack; if(!errorobj) Errorobj = arguments[0]; //if the onerror rewrite succeeds, there's no need to escalate here.!jsmonitorstarted &&siftandmakeupmessage (errormsg, URL, linenumber, ColumnNumber, errorobj); returnolderror.apply (console, arguments);    }; //rewrite the onerror for jserror monitoringWindow.onerror =function(errormsg, URL, linenumber, ColumnNumber, errorobj) {jsmonitorstarted=true; varErrorstack = errorobj? Errorobj.stack:NULL;    Siftandmakeupmessage (errormsg, URL, linenumber, ColumnNumber, Errorstack);    }; functionsiftandmakeupmessage (origin_errormsg, Origin_url, Origin_linenumber, Origin_columnnumber, ORIGIN_ERROROBJ) {varErrorMsg = origin_errormsg? Origin_errormsg: "; varErrorobj = origin_errorobj? Origin_errorobj: "; varErrorType = ""; if(errormsg) {varErrorstackstr =json.stringify (errorobj) ErrorType= Errorstackstr.split (":") [0].replace (' "'," ""); }      varJavascripterrorinfo =NewJavascripterrorinfo (Js_error, ErrorType + ":" +errormsg, errorobj);    Javascripterrorinfo.handleloginfo (Js_error, javascripterrorinfo);  }; };

OK, the error log has, how to calculate the error rate?

　　js Error Rate = JS Error number (one access page, all JS errors are counted once)/PV (Pc,ios,android platform)

So we need to write down the PV record of the page.

 //User Access behavior log (PV)    functionCUSTOMERPV (Uploadtype, Loadtype, loadtime) {setcommonproperty.apply ( This);  This. Uploadtype =Uploadtype;  This. Loadtype = Loadtype;//To differentiate the first load       This. loadtime = Loadtime;//Load Time} customerpv.prototype=NewMonitorbaseinfo (); /** * Add a timer to upload the data * 3 seconds to make a URL change detection * 15 seconds to check the data and upload*/    varDefaultLocation = Window.location.href.split ('? ') [0].replace (' # ', ' '); varTimecount = 0; SetInterval (function () {      //if it's a single page app, just change the URL      varWeblocation = Window.location.href.split ('? ') [0].replace (' # ', ' '); //If the URL changes, record the updated URL as defaultLocation and reset the Pagekey      if(DefaultLocation! =weblocation)        {RECORDPV (); DefaultLocation=weblocation; }      //Loop 5 to upload at a later time      if(Timecount >= 5) {        varLoginfo = Localstorage[ele_behavior] | | "" +Localstorage[js_error]|| "" +LOCALSTORAGE[CUSTOMER_PV]|| ""; if(loginfo) {Utils.ajax ("POST", Http_upload_log_info, {loginfo:loginfo},function(res) {//when the upload is complete, clear the local record            if(Res.code = = 200) {Localstorage[ele_behavior]= ""; Localstorage[js_error]= ""; LOCALSTORAGE[CUSTOMER_PV]= ""; }})} Timecount= 0; } Timecount++; }, 3000);

　　The above code I used the timer, about 3 seconds to do a URL change check, 15 to check the data, if there is data to upload, and empty the last data. Why use a timer, because in a single page application, the change of Routing and address bar can not be monitored, I really did not think of a particularly good way to monitor, so in this way, if someone has a better way, please leave me a message, thank you

To this, has collected the JS error log most of the information, just to upload it, storage, and then analyze the display, you can see the preview of JS error message, so we go to deploy the background code.

Next chapter: Building the front-end monitoring System (iii) NODEJS Server Deployment Chapter

　　

In order to upload this data to our servers, we can't always use XMLHttpRequest to send AJAX requests.

So we need to encapsulate a simple Ajax

/** * * @param method request type (UPPERCASE) get/post * @param URL request URL * @param param request parameter * @param SUCC Esscallback Successful callback method * @param failcallback Failure callback method*/     This. Ajax =function(method, URL, param, successcallback, failcallback) {varxmlHttp = window. XMLHttpRequest?NewXMLHttpRequest ():NewActiveXObject (' Microsoft.XMLHTTP '); Xmlhttp.open (method, URL,true); Xmlhttp.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded '); Xmlhttp.onreadystatechange=function () {        if(Xmlhttp.readystate = = 4 && xmlhttp.status = 200) {          varres =Json.parse (Xmlhttp.responsetext); typeofSuccesscallback = = ' function ' &&Successcallback (RES); } Else {          typeofFailcallback = = ' function ' &&Failcallback ();      }      }; Xmlhttp.send ("Data=" +json.stringify (param)); }

Build front-end monitoring System (ii) JS error log Collection Chapter