对于布景开拓来说，刷新刷新记实日志是后之后一种颇为罕有的开拓习气，个别咱们会运用try...catch代码块来自动捉拿失误、页面页面对于每一次接口调用，白屏也会记实下每一次接口调用的满满光阴破费，以便咱们监控效率器接口功能，干货妨碍下场排查。刷新刷新

 

点击上方蓝字,记患上关注咱们！本文5240字，页面页面估量浏览需要24分钟

对于布景开拓来说，记实日志是满满一种颇为罕有的开拓习气，个别咱们会运用try...catch代码块来自动捉拿失误、干货对于每一次接口调用，刷新刷新也会记实下每一次接口调用的后之后光阴破费，以便咱们监控效率器接口功能，页面页面妨碍下场排查。

刚进公司时，在妨碍Node.js的接口开拓时，我不太习气每一次排查下场都要经由跳板机登上效率器看日志，其后逐渐习气了这种方式举个例子：/** * 取患上列表数据 * @parma req, res */exports.getList =

asyncfunction (req, res) { //取患上恳求参数const openId = req.session.userinfo.openId; logger.info(`handler getList, user openId is

${ openId}`);try { // 拿到列表数据const startTime = newDate().getTime();let res = await ListService.getListFromDB(openId);

logger.info(`handler getList, ListService.getListFromDB cost time ${ newDate().getTime() - startDate}

`);// 对于数据处置，返回给前端// ... } catch(error) { logger.error(`handler getList is error, ${ JSON.stringify(error)}

`); }};如下代码每一每一会出往罕用Node.js的接口中，在接口中会统计查问DB所耗光阴、亦或者是统计RPC效率调用所耗光阴，以便监测功能瓶颈，对于功能做优化；又或者是对于颇为运用try ... catch自动捉拿，以便随时对于下场妨碍回溯、复原下场的场景，妨碍bug的修复。

而对于前端来说呢？可能看如下的场景最近在妨碍一个需要开拓时，无意偶尔发现webgl渲染影像挫折的情景，概况说影像会泛起剖析挫折的情景，咱们可能根基不知道哪张影像会剖析或者渲染挫折；又或者如最近开拓的另一个需要，咱们会做一个对于webgl渲染光阴的优化以及影像预加载的需要，假如缺少功能监控，该若何统计所做的渲染优化以及影像预加载优化的优化比例，若何证实自己所做的使命具备价钱呢？可能是经由测试同砚的黑盒测试，对于优化先后的光阴妨碍录屏，合成从进入页面到影像渲染实现事实经由了多少多帧图像。

这样的数据，可能既禁绝确、又较为周全，想象测试同砚并非真正的用户，也无奈复原简直的用户他们所处的收集情景回偏激来发现，咱们的名目，尽管在效率端层面做好了日志以及功能统计，但在前端对于颇为的监控以及功能的统计。

对于前真个功能与颇为上报的可行性探究是有需要的颇为捉拿措施对于前端来说，咱们需要的颇为捉拿不外为如下两种：接口调用情景；页面逻辑是否失误，好比，用户进入页面后页面展现白屏；对于接口调用情景，在前端个别需要上报客户审察关参数，好比：用户OS与浏览器版本、恳求参数（如页面ID）；而对于页面逻辑是否失误下场，个别除了用户OS与浏览器版本外，需要的是报错的货仓信息及详细报错位置。

颇为捉拿措施全局捉拿可能经由全局监听颇为来捉拿，经由window.onerror概况addEventListener，看如下例子：window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error

) { console.log(errorMessage: + errorMessage); // 颇为信息console.log(scriptURI: + scriptURI); // 颇为文件道路

console.log(lineNo: + lineNo); // 颇为行号console.log(columnNo: + columnNo); // 颇为列号console.log(error:

+ error); // 颇为货仓信息// ...// 颇为上报};thrownewError(这是一个失误);

经由window.onerror使命，可能患上到详细的颇为信息、颇为文件的URL、颇为的行号与列号及颇为的货仓信息，再捉拿颇为后，不同上报至咱们的日志效率器亦或者是，经由window.addEventListener措施来妨碍颇为上报，道理同理：。

window.addEventListener(error, function() { console.log(error);// ...// 颇为上报});thrownewError(这是一个失误);

try... catch运用try... catch尽管可能较好地妨碍颇为捉拿，不至于使患上页面由于一处失误挂掉，但try ... catch捉拿方式显患上过于臃肿，大多代码运用try ... catch包裹，影响代码可读性。

罕有下场跨域剧本无奈精确捉拿颇为个别情景下，咱们会把动态资源，如JavaScript剧本放到特意的动态资源效率器，亦概况CDN，看如下例子：

>// 在index.htmlwindow.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error

) { console.log(errorMessage: + errorMessage); // 颇为信息console.log(scriptURI: + scriptURI); // 颇为文件道路

console.log(lineNo: + lineNo); // 颇为行号console.log(columnNo: + columnNo); // 颇为列号console.log(error:

+ error); // 颇为货仓信息// ...// 颇为上报 };// error.js

thrownewError(这是一个失误);

服从展现，跨域之后window.onerror根基捉拿不到精确的颇为信息，而是不同返回一个Script error，处置妄想：对于script标签削减一个crossorigin=”anonymous”，而且效率器削减Access-Control-Allow-Origin。

sourceMap个别在破费情景下的代码是经由webpack打包后缩短混合的代码，以是咱们可能会碰着这样的下场，如图所示：

咱们发现所有的报错的代码行数都在第一行了，为甚么呢？这是由于在破费情景下，咱们的代码被缩短成为了一行：!function(e){ var n={ };functionr(o){ if(n[o])return n[o].exports;

var t=n[o]={ i:o,l:!1,exports:{ }};return e[o].call(t.exports,t,t.exports,r),t.l=!0,t.exports}r.m=e,r.c=n,r.d=

function(e,n,o){ r.o(e,n)||Object.defineProperty(e,n,{ enumerable:!0,get:o})},r.r=function(e){ "undefined"

!=typeofSymbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{ value:"Module"}),Object

.defineProperty(e,"__esModule",{ value:!0})},r.t=function(e,n){ if(1&n&&(e=r(e)),8&n)return e;if(4&n&&"object"

==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(r.r(o),Object.defineProperty(o,"default"

,{ enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var t in e)r.d(o,t,function(n){ return e[n]}.bind(

null,t));return o},r.n=function(e){ var n=e&&e.__esModule?function(){ return e.default}:function(){ return

 e};return r.d(n,"a",n),n},r.o=function(e,n){ returnObject.prototype.hasOwnProperty.call(e,n)},r.p="",r(r.s=

0)}([function(e,n){ throwwindow.onerror=function(e,n,r,o,t){ console.log("errorMessage: "+e),console.log(

"scriptURI: "+n),console.log("lineNo: "+r),console.log("columnNo: "+o),console.log("error: "+t);var l={

errorMessage:e||null,scriptURI:n||null,lineNo:r||null,columnNo:o||null,stack:t&&t.stack?t.stack:null};

if(XMLHttpRequest){ var u=new XMLHttpRequest;u.open("post","/middleware/errorMsg",!0),u.setRequestHeader(

"Content-Type","application/json"),u.send(JSON.stringify(l))}},newError("这是一个失误")}]);在我的开拓历程中也碰着过这个下场，我在开拓一个功能组件库的时候，运用npm link了我的组件库，可是由于组件库被npm link后是打包后的破费情景下的代码，所有的报错都定位到了第一行。

处置措施是开启webpack的source-map，咱们运用webpack打包后的天生的一份.map的剧本文件就能让浏览器对于失误位置妨碍追踪了此处可能参考webpack document着实便是webpack.config.js中加之一行devtool: source-map，如下所示，为示例的webpack.config.js：。

var path = require(path);module.exports = { devtool: source-map,mode: development,entry: ./client/index.js

,output: { filename: bundle.js,path: path.resolve(__dirname, client) }}在webpack打包先天生对于应的source-map，这样浏览器就能定位到详细失误的位置：

开启source-map的缺陷是兼容性，当初惟独Chrome浏览器以及Firefox浏览器才对于source-map反对于不外咱们对于这一类情景也有处置措施可能运用引入npm库来反对于source-map，可能参考mozilla/source-map。

这个npm库既可能运行在客户端也可能运行在效率端，不外加倍推选的是在效率端运用Node.js对于接管到的日志信息时运用source-map剖析，以防止源代码的激进组成危害，如下代码所示：const express =

require(express);const fs = require(fs);const router = express.Router();const sourceMap = require(source-map

);const path = require(path);const resolve = file => path.resolve(__dirname, file);// 界说post接口router.get(

/error/, asyncfunction(req, res) { // 取患上前端传以前的报错工具let error = JSON.parse(req.query.error);let url = error.scriptURI;

// 缩短文件道路if (url) { let fileUrl = url.slice(url.indexOf(client/)) + .map; // map文件道路// 剖析sourceMaplet consumer =

awaitnew sourceMap.SourceMapConsumer(fs.readFileSync(resolve(../ + fileUrl), utf8)); // 返回一个promise工具

// 剖析原始报错数据let result = consumer.originalPositionFor({ line: error.lineNo, // 缩短后的行号 column: error.columnNo

// 缩短后的列号 });console.log(result); }});module.exports = router;如下图所示，咱们已经可能看到，在效率端已经乐成剖析出了详细失误的行号、列号，咱们可能经由日志的方式妨碍记实，抵达了前端颇为监控的目的。

Vue捉拿颇为在我的名目中就碰着这样的下场，运用了js-tracker这样的插件来不同妨碍全局的颇为捉拿以及日志上报，服从发现咱们根基捉拿不到Vue组件的颇为，查阅质料患上悉，在Vue中，颇为可能被Vue自己给try ... catch了，不会传到window.onerror使命触发，那末咱们若何把Vue组件中的颇为作不同捉拿呢？

运用Vue.config.errorHandler这样的Vue全局配置装备部署，可能在Vue指定组件的渲染以及审核时期未捉拿失误的处置函数这个处置函数被调历时，可取患上失误信息以及Vue 实例Vue.config.errorHandler = 。

function (err, vm, info) { // handle error// `info` 是 Vue 特定的失误信息，好比失误地址的性命周期钩子// 只在 2.2.0+ 可用}在React中，可能运用ErrorBoundary组件搜罗营业组件的方式妨碍颇为捉拿，配合React 16.0+新出的componentDidCatch API，可能完因素比方的颇为捉拿以及日志上报。

classErrorBoundaryextendsReact.Component{ constructor(props) { super(props);this.state = { hasError: false

}; } componentDidCatch(error, info) { // Display fallback UIthis.setState({ hasError: true });// You can also log the error to an error reporting service

logErrorToMyService(error, info); } render() { if (this.state.hasError) { // You can render any custom fallback UI

return

Something went wrong.

; }returnthis.props.children; }}运用方式如下：

功能监控最简略的功能监控最罕有的功能监控需要则是需要咱们统计用户从启动恳求页面到所有DOM元素渲染实现的光阴，也便是俗称的首屏加载光阴，DOM提供了这一接口，监听document的DOMContentLoaded使命与window的load使命可统计页面首屏加载光阴即所有DOM渲染光阴：

// 记实页面加载启动光阴var timerStart =

Date.now();

document.addEventListener(DOMContentLoaded, function() { console.log("DOM 挂载光阴: ", Date.now() - timerStart);

// 功能日志上报 });window.addEventListener(load, function() { console.log("所有资源加载实现光阴: ", Date.now()-timerStart);

// 功能日志上报 });对于运用框架，如Vue概况说React，组件是异步渲染而后挂载到DOM的，在页面初始化时并无太多的DOM节点，可能参考下文对于首屏光阴收集自动化的处置妄想来对于渲染光阴妨碍规画。

performance可因此上光阴的监控过于简陋，好比咱们想统计文档的收集加载耗时、剖析DOM的耗时与渲染DOM的耗时，就不太好办到了，所幸的是浏览器提供了window.performance接口，详细可见MDN文档

简直所有浏览器都反对于window.performance接口，下面来看看在操作台打印window.performance可能患上到些甚么：

可能看到，window,performance主要搜罗有memory、navigation、timing以及timeOrigin及onresourcetimingbufferfull措施navigation工具提供了在指定的光阴段里爆发的操作相关信息，搜罗页面是加载仍是刷新、爆发了多少一再重定向等等。

timing工具搜罗延迟相关的功能信息这是咱们页面加载功能优化需要中主要上报的相关信息memory为Chrome削减的一个非尺度扩展，这个属性提供了一个可能取患上到根基内存运用情景的工具在此外浏览器理当思考到这个API的兼容处置。

timeOrigin则返回功能丈量启动时的光阴的高精度光阴戳如图所示，精确到了小数点后四位onresourcetimingbufferfull措施，它是一个在resourcetimingbufferfull使命触发时会被调用的event handler。

这个使命当浏览器的资源光阴功能缓冲区已经满时会触发可能经由监听这一使命触发来预估页面crash，统计页面crash多少率，以便前期的功能优化，如下示例所示：functionbuffer_full(event

) { console.log("WARNING: Resource Timing Buffer is FULL!"); performance.setResourceTimingBufferSize(

200);}functioninit() { // Set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full;

}合计网站功能运用performance的timing属性，可能拿到页面功能相关的数据，这里在良多文章都有提到对于运用window.performance.timing记实页面功能的文章，好比alloyteam团队写的初探 performance – 监控网页与挨次功能，对于timing的各项属性寄义，可能借助摘自此文的下图清晰，如下代码摘自此文作为合计网站功能的工具函数参考：

// 取患上 performance 数据var performance = { // memory 黑白尺度属性，只在 Chrome 有// 财富下场：我有多少多内存 memory: { usedJSHeapSize:

16100000, // JS 工具（搜罗V8引擎外部工具）占用的内存，确定小于 totalJSHeapSize totalJSHeapSize: 35100000, // 可运用的内存 jsHeapSizeLimit:

793000000// 内存巨细限度 },// 哲学下场：我从哪里来？ navigation: { redirectCount: 0, // 假如有重定向的话，页面经由多少回重定向跳转而来

type: 0// 0 即 TYPE_NAVIGATENEXT 个别进入的页面（非刷新、非重定向等）// 1 即 TYPE_RELOAD 经由 window.location.reload() 刷新的页面

// 2 即 TYPE_BACK_FORWARD 经由浏览器的行举后退按钮进入的页面（历史记实）// 255 即 TYPE_UNDEFINED 非以上方式进入的页面 }, timing: {

// 在统一个浏览器高下文中，前一个网页（与之后页面不用定同域）unload 的光阴戳，假如无前一个网页 unload ，则与 fetchStart 值至关 navigationStart:

1441112691935,// 前一个网页（与之后页面同域）unload 的光阴戳，假如无前一个网页 unload 概况前一个网页与之后页面差距域，则值为 0 unloadEventStart:

0,// 以及 unloadEventStart 相对于应，返回前一个网页 unload 使命绑定的回调函数实施竣事的光阴戳 unloadEventEnd: 0,// 第一个 HTTP 重定向爆发时的光阴。

有跳转且是同域名内的重定向才算，否则值为 0 redirectStart: 0,// 最后一个 HTTP 重定向实现时的光阴有跳转且是同域名外部的重定向才算，否则值为 0 redirectEnd: 。

0,// 浏览器豫备好运用 HTTP 恳求抓取文档的光阴，这爆发在魔难当地缓存以前 fetchStart: 1441112692155,// DNS 域名查问启动的光阴，假如运用了当地缓存（即无 DNS 查问）或者持久衔接，则与 fetchStart 值至关

domainLookupStart: 1441112692155,// DNS 域名查问实现的光阴，假如运用了当地缓存（即无 DNS 查问）或者持久衔接，则与 fetchStart 值至关

domainLookupEnd: 1441112692155,// HTTP（TCP） 启动建树衔接的光阴，假如是持久衔接，则与 fetchStart 值至关// 留意假如在传输层爆发了失误且重新建树衔接，则这里展现的是新建树的衔接启动的光阴

connectStart: 1441112692155,// HTTP（TCP） 实现建树衔接的光阴（实现握手），假如是持久衔接，则与 fetchStart 值至关// 留意假如在传输层爆发了失误且重新建树衔接，则这里展现的是新建树的衔接实现的光阴

// 留意这里握手妨碍，搜罗清静衔接建树实现、SOCKS 授权经由 connectEnd: 1441112692155,// HTTPS 衔接启动的光阴，假如不是清静衔接，则值为 0 secureConnectionStart:

0,// HTTP 恳求读取简直文档启动的光阴（实现建树衔接），搜罗从当地读取缓存// 衔接失误重连时，这里展现的也是新建树衔接的光阴 requestStart: 1441112692158

,// HTTP 启动接管照应的光阴（取患上到第一个字节），搜罗从当地读取缓存 responseStart: 1441112692686,// HTTP 照应全副接管实现的光阴（取患上到最后一个字节），搜罗从当地读取缓存

responseEnd: 1441112692687,// 启动剖析渲染 DOM 树的光阴，此时 Document.readyState 酿成 loading，并将抛出 readystatechange 相关使命

domLoading: 1441112692690,// 实现剖析 DOM 树的光阴，Document.readyState 酿成 interactive，并将抛出 readystatechange 相关使命

// 留意只是 DOM 树剖析实现，这时候并无启动加载网页内的资源 domInteractive: 1441112693093,// DOM 剖析实现后，网页内资源加载启动的光阴// 在 DOMContentLoaded 使命抛出前爆发

domContentLoadedEventStart: 1441112693093,// DOM 剖析实现后，网页内资源加载实现的光阴（如 JS 剧本加载实施竣事） domContentLoadedEventEnd:

1441112693101,// DOM 树剖析实现，且资源也豫备停当的光阴，Document.readyState 酿成 complete，并将抛出 readystatechange 相关使命 domComplete:

1441112693214,// load 使命发送给文档，也即 load 回调函数启动实施的光阴// 留意假如不绑定 load 使命，值为 0 loadEventStart: 1441112693214

,// load 使命的回调函数实施竣事的光阴 loadEventEnd: 1441112693215// 字母挨次// connectEnd: 1441112692155,// connectStart: 1441112692155,

// domComplete: 1441112693214,// domContentLoadedEventEnd: 1441112693101,// domContentLoadedEventStart: 1441112693093,

// domInteractive: 1441112693093,// domLoading: 1441112692690,// domainLookupEnd: 1441112692155,// domainLookupStart: 1441112692155,

// fetchStart: 1441112692155,// loadEventEnd: 1441112693215,// loadEventStart: 1441112693214,// navigationStart: 1441112691935,

// redirectEnd: 0,// redirectStart: 0,// requestStart: 1441112692158,// responseEnd: 1441112692687,// responseStart: 1441112692686,

// secureConnectionStart: 0,// unloadEventEnd: 0,// unloadEventStart: 0 }};// 合计加载光阴functiongetPerformanceTiming

() { var performance = window.performance;if (!performance) { // 之后浏览器不反对于console.log(你的浏览器不反对于 performance 接口

);return; }var t = performance.timing;var times = { };//【紧张】页面加载实现的光阴//【原因】这简直代表了用户期待页面可用的光阴 times.loadPage = t.loadEventEnd - t.navigationStart;

//【紧张】剖析 DOM 树妄想的光阴//【原因】魔难下你的 DOM 树嵌套是否太多了！ times.domReady = t.domComplete - t.responseEnd;//【紧张】重定向的光阴

//【原因】谢绝重定向！好比，http://example.com/ 就不应写成 http://example.com times.redirect = t.redirectEnd - t.redirectStart;

//【紧张】DNS 查问光阴//【原因】DNS 预加载做了么？页面内是否运用了太多差距的域名导致域名查问的光阴过长？// 可运用 HTML5 Prefetch 预查问 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364)

times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;//【紧张】读取页面第一个字节的光阴//【原因】这可能清晰为用户拿到你的资源占用的光阴，加异地机房了么，加CDN 处置了么？加带宽了么？加 CPU 运算速率了么？

// TTFB 即 Time To First Byte 的意思// 维基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte times.ttfb = t.responseStart - t.navigationStart;

//【紧张】内容加载实现的光阴//【原因】页面内容经由 gzip 缩短了么，动态资源 css/js 等缩短了么？ times.request = t.responseEnd - t.requestStart;

//【紧张】实施 onload 回调函数的光阴//【原因】是否太多不用要的操作都放到 onload 回调函数里实施了，思考过延迟加载、按需加载的策略么？ times.loadEvent = t.loadEventEnd - t.loadEventStart;

// DNS 缓存光阴 times.appcache = t.domainLookupStart - t.fetchStart;// 卸载页面的光阴 times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;

// TCP 建树衔接实现握手的光阴 times.connect = t.connectEnd - t.connectStart;return times;}日志上报径自的日志域名对于日志上报运用径自的日志域名的目的是防止对于营业组成影响。

其一，对于效率器来说，咱们确定不期望占用营业效率器的合计资源，也不期望过多的日志在营业效率器聚积，组成营业效率器的存储空间不够的情景其二，咱们知道在页面初始化的历程中，会对于页面加载光阴、PV、UV等数据妨碍上报，这些上报恳求会以及加载营业数据简直是同光阴收回，而浏览器艰深会对于统一个域名的恳求量有并发数的限度，如Chrome会有对于并发数为6个的限度。

因此需要对于日志零星径自设定域名，最小化对于页面加载功能组成的影响跨域的下场对于径自的日志域名，确定会波及到跨域的下场，接管的处置妄想艰深有如下两种：一种是妄想空的Image工具的方式，其原因是恳求图片并不波及到跨域的下场；

var url = xxx;new Image().src = url;运用Ajax上报日志，必需对于日志效率器接口开启跨域恳求头部Access-Control-Allow-Origin:*，这里Ajax就并不欺压运用GET恳求了，即可克制URL长度限度的下场。

if (XMLHttpRequest) { var xhr = new XMLHttpRequest(); xhr.open(post, https://log.xxx.com, true); // 上报给node中间层处置

xhr.setRequestHeader(Content-Type, application/json); // 配置恳求头 xhr.send(JSON.stringify(errorObj));

// 发送参数}在我的名目中运用的是第一种的方式，也便是妄想空的Image工具，可是咱们知道对于GET恳求会有长度的限度，需要确保的是恳求的长度不会逾越阈值省去照应主体对于咱们上报日志，着实对于客户端来说，并不需要思考上报的服从，甚至关于上报挫折，咱们也不需要在前端做任何交互，以是上报来说，着实运用HEAD恳求就够了，接口返回空的服从，最大地削减上报日志组成的资源浪费。

并吞上报相似于雪碧图的脑子，假如咱们的运用需要上报的日志数目良多，那末有需要并吞日志妨碍不同的上报处置妄想可能是试验在用户并吞页面概况组件销毁时发送一个异步的POST恳求来妨碍上报，可是试验在卸载（unload）文档以前向web效率器发送数据。

保障在文档卸载时期发送数据不断是一个难题由于用户署理个别会漠视在卸载使命处置器中发生的异步XMLHttpRequest，由于此时已经会跳转到下一个页面以是这里是必需配置为同步的XMLHttpRequest恳求吗？。

window.addEventListener(unload, logData, false);functionlogData() { var client = new XMLHttpRequest();

client.open("POST", "/log", false); // 第三个参数表明是同步的 xhr client.setRequestHeader("Content-Type",

"text/plain;charset=UTF-8"); client.send(analyticsData);}运用同步的方式势必会对于用户体验组成影响，致使会让用户感受到浏览器卡去世感应，对于产物而言，体验颇为欠好，经由查阅MDN文档，可能运用sendBeacon()措施，将会运用户署理在有机缘时异阵势向效率器发送数据，同时不会延迟页面的卸载或者影响下一导航的载入功能。

这就处置了提交合成数据时的所有的下场：使它坚贞，异步而且不会影响下一页面的加载此外，代码实际上还要比其余技术简略！下面的例子揭示了一个实际上的统计代码方式——经由运用sendBeacon()措施向效率器发送数据。

window.addEventListener(unload, logData, false);functionlogData() { navigator.sendBeacon("/log", analyticsData);

}小结作为前端开拓者而言，要对于产物坚持敬畏之心，光阴坚持对于功能谋求极致，对于颇为不可容忍的态度前真个功能监控与颇为上报显患上尤为紧张代码难免有下场，对于颇为可能运用window.onerror概况addEventListener的方式削减全局的颇为捉拿侦听函数，但可能运用这种方式无奈精确捉拿到失误：对于跨域的剧本，需要对于script标签削减一个crossorigin=”anonymous”；对于破费情景打包的代码，无奈准判断位到颇为发生的行数，可能运用source-map来处置；而对于运用框架的情景，需要在框架不同的颇为捉拿处埋点。

而对于功能的监控，所幸的是浏览器提供了window.performance API，经由这个API，很利便地取患上到之后页面功能相关的数据而这些颇为以及功能数据若何上报呢？艰深说来，为了防止对于营业发生的影响，会径自建树日志效率器以及日志域名，但对于差距的域名，又会发生跨域的下场。

咱们可能经由妄想空的Image工具来处置，亦或者是经由设定跨域恳求头部Access-Control-Allow-Origin:*来处置此外，假如上报的功能以及日志数据高频触发，则可能在页面unload时不同上报，而unload时的异步恳求又可能会被浏览器所漠视，且不能改为同步恳求。

此时navigator.sendBeacon API可算帮了咱们大忙，它可用于经由HTTP将大批数据异步传输到Web效率器而漠视页面unload时的影响就酱，下期再见

免责申明：本站所有信息均群集自互联网，并不代表本站意见，本站不同过错其简直正当性负责。若有信息侵略了您的权柄，请见告，本站将赶快处置。分割QQ：1640731186

很赞哦!（1452）