From 34d7bc0e71ffb258446017fdd7927d8c8ee43fa9 Mon Sep 17 00:00:00 2001 From: eshengsky Date: Fri, 25 Aug 2017 11:59:16 +0800 Subject: [PATCH] =?UTF-8?q?ajax=20=E8=AF=B7=E6=B1=82=E5=A4=B4=E5=8A=A0?= =?UTF-8?q?=E5=85=A5=E8=AF=B7=E6=B1=82id?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 34 +++++++++++++++++++++++++++------- dist/build.js | 18 +++++------------- dist/build.min.js | 2 +- package.json | 4 ++-- src/lajax-module.js | 15 +++++---------- 5 files changed, 40 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index d2c7283..fc9dec2 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ lajax 尝试解决这些问题： * 自动记录 ajax 请求的开始和完成； -* 自动生成基于请求的唯一 id，方便日志定位； +* 自动生成 [请求id](#请求id)，方便日志定位和关联； * 日志会定时批量发送到配置的日志服务器； @@ -218,12 +218,28 @@ try { } ``` -### showQueue() +### queue -实例方法，显示当前的日志队列。 +array 类型属性，当前待发送的日志队列。 ```js -logger.info(logger.showQueue()); +logger.queue +``` + +### reqId + +string 类型属性，当前页面的请求 id。 + +```js +logger.reqId +``` + +### idFromServer + +boolean 类型属性，请求 id 是否来自于服务端生成。 + +```js +logger.idFromServer ``` ### colorEnum{...} @@ -307,13 +323,17 @@ logger.warn('这是一条warn日志'); 发送到服务器的每一条日志，都包含一个请求 id。在同一次请求中，所有日志的请求 id 一定相同；在不同请求中，各自记录的日志的请求 id 一定不同。 -该请求 id 的主要目的：让你能够在服务端精确定位到某次请求过程中的所有相关日志。 +例如：用户甲访问 index.html 过程中 lajax 记录并发送了 10 条日志，这 10 条日志的请求 id 是相同的；用户乙也访问了该页面，同样产生了 10 条日志，这些日志的请求 id 也一定是相同的，但和用户甲的请求 id 不同。 + +请求 id 的主要目的：让你能够在服务端精确定位到某次请求过程中的所有相关日志。 -请求 id 的生成逻辑： +请求 id 的生成和发送： * 如果你的页面是服务器端动态生成的，你想将服务端的日志和前端的日志串联起来，你可以在服务端生成一个请求 id，并发送到前端。lajax 会依次尝试从页面的 `` 内容中或者 `window._reqId` 中寻找请求 id； -* 如果上述的寻找失败了，则认为你的页面是一个纯前端的页面，lajax 将会在初始化时生成一个基于时间的唯一 id 来作为请求 id，在页面卸载之前，所有的日志都将包含该请求 id。 +* 如果上述的寻找失败了，则认为你的页面是一个纯前端的页面，lajax 将会在初始化时生成一个基于时间的唯一 id 来作为请求 id，在页面卸载之前，所有的日志都将包含该请求 id； + +* 对于监听到的 ajax 请求，上述请求 id 会被添加到 `X-Request-Id` 请求头中，你可以在服务端日志中记录该请求 id 以做关联。 ## 服务器示例 diff --git a/dist/build.js b/dist/build.js index 1586536..d5e5540 100644 --- a/dist/build.js +++ b/dist/build.js @@ -378,9 +378,13 @@ // 请求开始时间 var startTime = new Date(); - // 添加一条日志到队列中，排除掉用户自定义不需要记录日志的 ajax + // 排除掉用户自定义不需要记录日志的 ajax if (that.logAjaxFilter(this._lajaxUrl, this._lajaxMethod)) { + // 添加一条日志到队列中 that._pushToQueue(startTime, Lajax.levelEnum.info, '[ajax] \u53D1\u9001' + this._lajaxMethod.toLowerCase() + '\u8BF7\u6C42\uFF1A' + this._lajaxUrl); + + // 请求头中添加请求 id + this.setRequestHeader('X-Request-Id', that.reqId); } // 添加 readystatechange 事件 @@ -797,18 +801,6 @@ this._log.apply(this, [null, Lajax.levelEnum.error].concat(args)); } - - /** - * 显示当前的日志队列 - * - * @memberof Lajax - */ - - }, { - key: 'showQueue', - value: function showQueue() { - this._log(null, Lajax.levelEnum.info, this.queue); - } /* eslint-enable no-console, no-bitwise*/ }]); diff --git a/dist/build.min.js b/dist/build.min.js index 82a18e3..923901b 100644 --- a/dist/build.min.js +++ b/dist/build.min.js @@ -1 +1 @@ -!function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(1)},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}var n=r(2),a=o(n);window.Lajax=a.default},function(e,t){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(){function e(e,t){for(var r=0;r=200&&this.status<400?i.push("接口请求成功。"):i.push("接口请求失败！"),i.push("请求耗时："+a+"s URL："+this._lajaxUrl+" 请求方式："+this._lajaxMethod),"post"===this._lajaxMethod.toLowerCase()&&i.push("表单数据：",JSON.parse(r)),i.push("状态码："+this.status),this.status>=200&&this.status<400?t.info.apply(t,["[ajax]"].concat(i)):t.error.apply(t,["[ajax]"].concat(i)),console&&console.group&&console.groupEnd()}}catch(e){var s=[];s.push("接口请求出错！"),s.push("URL："+this._lajaxUrl+" 请求方式："+this._lajaxMethod),"post"===this._lajaxMethod.toLowerCase()&&s.push("表单数据：",JSON.parse(r)),s.push("状态码："+this.status),s.push("ERROR："+e),t.error.apply(t,["[ajax]"].concat(s))}}),t.xhrSend.call(this,r)}}}},{key:"_storageUnsendData",value:function(){var e=this;window.onunload=function(){e.queue.length&&(navigator.sendBeacon&&navigator.sendBeacon(e.url,JSON.stringify(e.queue))?e.queue=[]:e._isSecret()?e._send():window.localStorage.setItem("lajax",JSON.stringify(e.queue)))}}},{key:"_send",value:function(){var t=this,r=this.queue.length;r&&(this.xhr&&this.xhr.abort(),this.xhr=new XMLHttpRequest,this.xhrOpen.call(this.xhr,"POST",this.url,!0),this.xhr.setRequestHeader("Content-Type","application/json; charset=utf-8"),this.xhrSend.call(this.xhr,JSON.stringify(this.queue)),this.xhr.addEventListener("readystatechange",function(){t.xhr.readyState===XMLHttpRequest.DONE&&(t.xhr.status>=200&&t.xhr.status<400?(t.queue=[],t.errorReq=0,console&&(t.stylize?console.log("%c["+t._getTimeString(null)+"] - "+r+"条日志发送成功！","color: "+e.colorEnum.sendSuccess):console.log(r+"条日志发送成功！"))):(t._printConsole(null,e.levelEnum.error,"发送日志请求失败！配置的接口地址："+t.url+" 状态码："+t.xhr.status),t._checkErrorReq()),t.xhr=null)}))}},{key:"_checkErrorReq",value:function(){this.errorReq++,this.errorReq>=this.maxErrorReq&&(clearInterval(this.timer),window.console&&this._printConsole(null,e.levelEnum.warn,"发送日志请求的连续失败次数过多，已停止发送日志。请检查日志接口 "+this.url+" 是否正常！"))}},{key:"_getTimeString",value:function(e){var t=null===e?new Date:e,r=String(t.getHours());1===r.length&&(r="0"+r);var o=String(t.getMinutes());1===o.length&&(o="0"+o);var n=String(t.getSeconds());1===n.length&&(n="0"+n);var a=String(t.getMilliseconds());return 1===a.length?a="00"+a:2===a.length&&(a="0"+a),r+":"+o+":"+n+"."+a}},{key:"_getDateTimeString",value:function(e){var t=null===e?new Date:e,r=String(t.getFullYear()),o=String(t.getMonth()+1);1===o.length&&(o="0"+o);var n=String(t.getDate());return 1===n.length&&(n="0"+n),r+"-"+o+"-"+n+" "+this._getTimeString(t)}},{key:"_printConsole",value:function(t,r){if(console){for(var o=arguments.length,n=Array(o>2?o-2:0),a=2;a2?r-2:0),n=2;n2?r-2:0),n=2;n=200&&this.status<400?i.push("接口请求成功。"):i.push("接口请求失败！"),i.push("请求耗时："+a+"s URL："+this._lajaxUrl+" 请求方式："+this._lajaxMethod),"post"===this._lajaxMethod.toLowerCase()&&i.push("表单数据：",JSON.parse(r)),i.push("状态码："+this.status),this.status>=200&&this.status<400?t.info.apply(t,["[ajax]"].concat(i)):t.error.apply(t,["[ajax]"].concat(i)),console&&console.group&&console.groupEnd()}}catch(e){var s=[];s.push("接口请求出错！"),s.push("URL："+this._lajaxUrl+" 请求方式："+this._lajaxMethod),"post"===this._lajaxMethod.toLowerCase()&&s.push("表单数据：",JSON.parse(r)),s.push("状态码："+this.status),s.push("ERROR："+e),t.error.apply(t,["[ajax]"].concat(s))}}),t.xhrSend.call(this,r)}}}},{key:"_storageUnsendData",value:function(){var e=this;window.onunload=function(){e.queue.length&&(navigator.sendBeacon&&navigator.sendBeacon(e.url,JSON.stringify(e.queue))?e.queue=[]:e._isSecret()?e._send():window.localStorage.setItem("lajax",JSON.stringify(e.queue)))}}},{key:"_send",value:function(){var t=this,r=this.queue.length;r&&(this.xhr&&this.xhr.abort(),this.xhr=new XMLHttpRequest,this.xhrOpen.call(this.xhr,"POST",this.url,!0),this.xhr.setRequestHeader("Content-Type","application/json; charset=utf-8"),this.xhrSend.call(this.xhr,JSON.stringify(this.queue)),this.xhr.addEventListener("readystatechange",function(){t.xhr.readyState===XMLHttpRequest.DONE&&(t.xhr.status>=200&&t.xhr.status<400?(t.queue=[],t.errorReq=0,console&&(t.stylize?console.log("%c["+t._getTimeString(null)+"] - "+r+"条日志发送成功！","color: "+e.colorEnum.sendSuccess):console.log(r+"条日志发送成功！"))):(t._printConsole(null,e.levelEnum.error,"发送日志请求失败！配置的接口地址："+t.url+" 状态码："+t.xhr.status),t._checkErrorReq()),t.xhr=null)}))}},{key:"_checkErrorReq",value:function(){this.errorReq++,this.errorReq>=this.maxErrorReq&&(clearInterval(this.timer),window.console&&this._printConsole(null,e.levelEnum.warn,"发送日志请求的连续失败次数过多，已停止发送日志。请检查日志接口 "+this.url+" 是否正常！"))}},{key:"_getTimeString",value:function(e){var t=null===e?new Date:e,r=String(t.getHours());1===r.length&&(r="0"+r);var o=String(t.getMinutes());1===o.length&&(o="0"+o);var n=String(t.getSeconds());1===n.length&&(n="0"+n);var a=String(t.getMilliseconds());return 1===a.length?a="00"+a:2===a.length&&(a="0"+a),r+":"+o+":"+n+"."+a}},{key:"_getDateTimeString",value:function(e){var t=null===e?new Date:e,r=String(t.getFullYear()),o=String(t.getMonth()+1);1===o.length&&(o="0"+o);var n=String(t.getDate());return 1===n.length&&(n="0"+n),r+"-"+o+"-"+n+" "+this._getTimeString(t)}},{key:"_printConsole",value:function(t,r){if(console){for(var o=arguments.length,n=Array(o>2?o-2:0),a=2;a2?r-2:0),n=2;n2?r-2:0),n=2;n