金沙澳门官网网址前端代码异常监控实战,前端

作者: 前端知识  发布:2019-06-26

跨域的主题素材

对此单身的日记域名,料定会波及到跨域的标题,接纳的化解方案一般有以下两种:

  • 一种是构造空的Image指标的章程,其原因是呼吁图片并不涉及到跨域的难点;
JavaScript

var url = 'xxx'; new Image().src = url;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f00bfee170123843269-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f00bfee170123843269-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f00bfee170123843269-1" class="crayon-line">
var url = 'xxx';
</div>
<div id="crayon-5b8f00bfee170123843269-2" class="crayon-line crayon-striped-line">
new Image().src = url;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 利用Ajax汇报日志,必须对日记服务器接口开启跨域需求尾部Access-Control-Allow-Origin:*,这里Ajax就并不强制行使GET乞请了,就能够克服URL长度限制的难点。
JavaScript

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)); // 发送参数 }

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f00bfee174544186263-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f00bfee174544186263-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f00bfee174544186263-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f00bfee174544186263-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f00bfee174544186263-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f00bfee174544186263-6">
6
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f00bfee174544186263-1" class="crayon-line">
if (XMLHttpRequest) {
</div>
<div id="crayon-5b8f00bfee174544186263-2" class="crayon-line crayon-striped-line">
  var xhr = new XMLHttpRequest();
</div>
<div id="crayon-5b8f00bfee174544186263-3" class="crayon-line">
  xhr.open('post', 'https://log.xxx.com', true); // 上报给node中间层处理
</div>
<div id="crayon-5b8f00bfee174544186263-4" class="crayon-line crayon-striped-line">
  xhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头
</div>
<div id="crayon-5b8f00bfee174544186263-5" class="crayon-line">
  xhr.send(JSON.stringify(errorObj)); // 发送参数
</div>
<div id="crayon-5b8f00bfee174544186263-6" class="crayon-line crayon-striped-line">
}
</div>
</div></td>
</tr>
</tbody>
</table>

在自身的门类中央银行使的是第一种的不二秘诀,也正是协会空的Image对象,可是大家了然对于GET伸手会有长度的限定,供给保障的是乞请的尺寸不会超越阈值。

window.onerror 能不能够捕获 iframe 的错误

当您的页面有选拔 iframe 的时候,你供给对你引进的 iframe 做老大监察和控制的处理,不然要是您引进的 iframe 页面出现了难点,你的主站展现不出来,而你却浑然不知。

第一要求重申,父窗口直接运用 window.onerror 是无能为力直接破获,尽管你想要捕获 iframe 的丰富的话,有分好二种情景。

倘若你的 iframe 页面和您的主站是同域名的话,直接给 iframe 增加 onerror 事件就可以。

JavaScript

<iframe src="./iframe.html" frameborder="0"></iframe> <script> window.frames[0].onerror = function (msg, url, row, col, error) { console.log('笔者清楚 iframe 的不当了,也知晓不当新闻'); console.log({ msg, url, row, col, error }) return true; }; </script>

1
2
3
4
5
6
7
8
9
10
<iframe src="./iframe.html" frameborder="0"></iframe>
<script>
  window.frames[0].onerror = function (msg, url, row, col, error) {
    console.log('我知道 iframe 的错误了,也知道错误信息');
    console.log({
      msg,  url,  row, col, error
    })
    return true;
  };
</script>

读者能够由此 npm run iframe 查看效果:

金沙澳门官网网址 1

假使您置于的 iframe 页面和你的主站不是同个域名的,不过 iframe 内容不属于第三方,是您能够决定的,那么能够通过与 iframe 通讯的法子将不胜消息抛给主站接收。与 iframe 通讯的点子有成都百货上千,常用的如:postMessage,hash 恐怕 name 字段跨域等等,这里就不开始展览了,感兴趣的话能够看:跨域,你需求了然的全在此处

只若是非同域且网址不受自身说了算以来,除了通过调整台看到详细的错误新闻外,无法捕获,那是由于安全性的设想,你引进了二个百度首页,人家页面报出的荒唐凭啥让您去监督呢,这会引出许多安全性的难题。

try… catch

使用try... catch尽管能够较好地进行极度捕获,不至于使得页面由于一处错误挂掉,但try ... catch抓获格局显示过分臃肿,大多代码应用try ... catch卷入,影响代码可读性。

参照小说

  • 脚本错误量极致优化-监察和控制上报与Script error
  • 前端代码十分日志收罗与监督检查
  • 前者法力堂——非凡不止是try/catch

    1 赞 2 收藏 评论

日记上报

初稿出处: happylindz   

Vue捕获极其

在自己的门类中就高出那样的难题,使用了js-tracker这么的插件来归并举办全局的百般捕获和日志上报,结果开采大家一贯捕获不到Vue组件的要命,查阅资料获悉,在Vue中,万分可能被Vue自身给try ... catch了,不会传出window.onerror事件触发,那么大家如何把Vue零件中的极度作统一捕获呢?

使用Vue.config.errorHandler这样的Vue全局配置,能够在Vue钦赐组件的渲染和观看时期未捕获错误的管理函数。那些管理函数被调用时,可获得错误音讯和Vue 实例。

JavaScript

Vue.config.errorHandler = function (err, vm, info) { // handle error // `info` 是 Vue 特定的错误音讯,譬喻错误所在的生命周期钩子 // 只在 2.2.0 可用 }

1
2
3
4
5
Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
  // 只在 2.2.0 可用
}

React中,能够选择ErrorBoundary组件包涵业务组件的艺术张开非常捕获,协作React 16.0 新出的componentDidCatch API,能够达成合併的老大捕获和日志上报。

JavaScript

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { // Display fallback UI this.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 <h1>Something went wrong.</h1>; } return this.props.children; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
 
  componentDidCatch(error, info) {
    // Display fallback UI
    this.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 <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

接纳方式如下:

<ErrorBoundary> <MyWidget /> </ErrorBoundary>

1
2
3
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

跨源能源共享机制( COHavalS )

先是为页面上的 script 标签加多 crossOrigin 属性

JavaScript

// <script> window.onerror = function (msg, url, row, col, error) { console.log('作者掌握不当了,也驾驭不当音讯'); console.log({ msg, url, row, col, error }) return true; }; </script> <script src="" crossorigin></script> // setTimeout(() => { console.log(error); })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// http://localhost:8080/index.html
<script>
  window.onerror = function (msg, url, row, col, error) {
    console.log('我知道错误了,也知道错误信息');
    console.log({
      msg,  url,  row, col, error
    })
    return true;
  };
</script>
<script src="http://localhost:8081/test.js" crossorigin></script>
 
// http://localhost:8081/test.js
setTimeout(() => {
  console.log(error);
})

当你改改完前端代码后,你还须求特别给后端在响应头里加上 Access-Control-Allow-Origin: localhost:8080,这里自个儿以 Koa 为例。

JavaScript

const Koa = require('koa'); const path = require('path'); const cors = require('koa-cors'); const app = new Koa(); app.use(cors()); app.use(require('koa-static')(path.resolve(__dirname, './public'))); app.listen(8081, () => { console.log('koa app listening at 8081') });

1
2
3
4
5
6
7
8
9
10
11
const Koa = require('koa');
const path = require('path');
const cors = require('koa-cors');
const app = new Koa();
 
app.use(cors());
app.use(require('koa-static')(path.resolve(__dirname, './public')));
 
app.listen(8081, () => {
  console.log('koa app listening at 8081')
});

金沙澳门官网网址 2

读者可通过 npm run cors 详细的跨域知识笔者就不开始展览了,有意思味能够看看自个儿事先写的篇章:跨域,你须求知道的全在此处

你感到那样就完了吧?并不曾,下边就说有的 Script error 你临时遇见的点:

咱俩都知情 JSONP 是用来跨域获取数据的,并且包容性出色,在部分行使中依旧会接纳到,所以您的花色中恐怕会用那样的代码:

JavaScript

// window.onerror = function (msg, url, row, col, error) { console.log('作者通晓不当了,但不知道不当音信'); console.log({ msg, url, row, col, error }) return true; }; function jsonpCallback(data) { console.log(data); } const url = ''; const script = document.createElement('script'); script.src = url; document.body.appendChild(script);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// http://localhost:8080/index.html
window.onerror = function (msg, url, row, col, error) {
  console.log('我知道错误了,但不知道错误信息');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
function jsonpCallback(data) {
  console.log(data);
}
const url = 'http://localhost:8081/data?callback=jsonpCallback';
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);

因为重临的新闻会当做脚本文件来实践,一旦回到的本子内容出错了,也是心有余而力不足捕捉到错误的音讯。

金沙澳门官网网址 3

解决办法也简单,跟在此之前一样,在丰硕动态拉长脚本的时候增进crossOrigin,并且在后端配上相应的 COKoleosS 字段就能够.

JavaScript

const script = document.createElement('script'); script.crossOrigin = 'anonymous'; script.src = url; document.body.appendChild(script);

1
2
3
4
const script = document.createElement('script');
script.crossOrigin = 'anonymous';
script.src = url;
document.body.appendChild(script);

读者能够由此 npm run jsonp 查看效果

金沙澳门官网网址 4

清楚原理之后您可能会感觉不妨,不正是给各种动态变化的本子加多crossOrigin 字段嘛,不过在实际上中国人民解放军海军事工业程大学业程中,你只怕是面向广大库来编制程序,比方利用 jQuery,Seajs 或然 webpack 来异步加载脚本,多数库封装了异步加载脚本的力量,以 jQeury 为例你大概是那般来触发异步脚本。

JavaScript

$.ajax({ url: '', dataType: 'jsonp', success: (data) => { console.log(data); } })

1
2
3
4
5
6
7
$.ajax({
  url: 'http://localhost:8081/data',
  dataType: 'jsonp',
  success: (data) => {
    console.log(data);
  }
})

即便那么些库中平昔不提供 crossOrigin 的技巧的话(jQuery jsonp 大概有,假装你不知晓),那您不得不去修改人家写的源代码了,所以自个儿这里提供一个思路,正是去威逼document.createElement,平素自上去为各样动态变化的脚本增多 crossOrigin 字段。

JavaScript

document.createElement = (function() { const fn = document.createElement.bind(document); return function(type) { const result = fn(type); if(type === 'script') { result.crossOrigin = 'anonymous'; } return result; } })(); window.onerror = function (msg, url, row, col, error) { console.log('作者掌握不当了,也明白不当音信'); console.log({ msg, url, row, col, error }) return true; }; $.ajax({ url: '', dataType: 'jsonp', success: (data) => { console.log(data); } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
document.createElement = (function() {
  const fn = document.createElement.bind(document);
  return function(type) {
    const result = fn(type);
    if(type === 'script') {
      result.crossOrigin = 'anonymous';
    }
    return result;
  }
})();
window.onerror = function (msg, url, row, col, error) {
  console.log('我知道错误了,也知道错误信息');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
$.ajax({
  url: 'http://localhost:8081/data',
  dataType: 'jsonp',
  success: (data) => {
    console.log(data);
  }
})

意义也是同一的,读者能够透过 npm run jsonpjq 来查看效果:

金沙澳门官网网址 5

如此重写 createElement 理论上没什么难题,不过侵袭了原本的代码,不保障一定不会出错,在工程上依然供给多尝试下看看再选择,也许存在包容性上难点,要是你认为会冒出哪些难题的话也接待留言探究下。

至于 Script error 的难点就写到这里,假让你明白了上边包车型地铁剧情,基本上绝大多数的 Script error 都能缓和。

可怜捕获

对从前端来讲,大家供给的百般捕获无非为以下二种:

  • 接口调用情形;
  • 页面逻辑是还是不是错误,举例,用户进入页面后页面显示白屏;

对于接口调用情状,在前端日常供给申报客户端相关参数,举例:用户OS与浏览器版本、伏乞参数(如页面ID);而对此页面逻辑是还是不是错误难题,平时除了用户OS与浏览器版本外,必要的是报错的货仓音讯及具体报错地点。

演示:异步错误

JavaScript

try { setTimeout(() => { error // 异步错误 }) } catch(e) { console.log('作者感知不到错误'); console.log(e); }

1
2
3
4
5
6
7
8
try {
  setTimeout(() => {
    error        // 异步错误
  })
} catch(e) {
  console.log('我感知不到错误');
  console.log(e);
}

金沙澳门官网网址 6

只有您在 setTimeout 函数中再套上一层 try-catch,不然就不可能感知到其荒谬,但诸如此类代码写起来相比较啰嗦。

独立的日志域名

对于日记上报利用单独的日志域名的指标是制止对作业产生影响。其一,对于服务器来讲,我们必将不期望占用专门的职业服务器的计量资源,也不指望过多的日志在职业服务器聚成堆,形成专门的职业服务器的存款和储蓄空间相当不足的境况。其二,大家清楚在页面开端化的长河中,会对页面加载时间、PV、UV等数据开始展览汇报,那些举报告请示求会和加载业务数据大概是同期刻发生,而浏览器一般会对同多个域名的央浼量有并发数的范围,如Chrome会有对并发数为6个的界定。因而须求对日记系统独立设定域名,最小化对页面加载质量产生的影响。

Promise 错误

经过 Promise 能够援救我们消除异步回调地狱的难题,不过假使 Promise 实例抛出特别而你未有用 catch 去捕获的话,onerror 或 try-catch 也无从,不能够捕捉到错误。

JavaScript

window.addEventListener('error', (msg, url, row, col, error) => { console.log('小编感知不到 promise 错误'); console.log( msg, url, row, col, error ); }, true); Promise.reject('promise error'); new Promise((resolve, reject) => { reject('promise error'); }); new Promise((resolve) => { resolve(); }).then(() => { throw 'promise error' });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener('error', (msg, url, row, col, error) => {
  console.log('我感知不到 promise 错误');
  console.log(
    msg, url, row, col, error
  );
}, true);
Promise.reject('promise error');
new Promise((resolve, reject) => {
  reject('promise error');
});
new Promise((resolve) => {
  resolve();
}).then(() => {
  throw 'promise error'
});

金沙澳门官网网址 7

虽说在写 Promise 实例的时候养成最终写上 catch 函数是个好习惯,但是代码写多了就便于糊涂,忘记写 catch。

就此假如你的应用用到诸多的 Promise 实例的话,非常是你在有的根据 promise 的异步库比方 axios 等一定要小心,因为您不亮堂如何时候那几个异步伏乞会抛出极度而你并不曾管理它,所以您最佳增多三个Promise 全局十二分捕获事件 unhandledrejection。

JavaScript

window.addEventListener("unhandledrejection", function(e){ e.preventDefault() console.log('小编精晓 promise 的荒谬了'); console.log(e.reason); return true; }); Promise.reject('promise error'); new Promise((resolve, reject) => { reject('promise error'); }); new Promise((resolve) => { resolve(); }).then(() => { throw 'promise error' });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.addEventListener("unhandledrejection", function(e){
  e.preventDefault()
  console.log('我知道 promise 的错误了');
  console.log(e.reason);
  return true;
});
Promise.reject('promise error');
new Promise((resolve, reject) => {
  reject('promise error');
});
new Promise((resolve) => {
  resolve();
}).then(() => {
  throw 'promise error'
});

金沙澳门官网网址 8

自然,如若您的行使尚未做 Promise 全局十三分管理的话,那很只怕就如某乎首页那样:

金沙澳门官网网址 9

小结

用作前端开采者来说,要对成品保持敬畏之心,时刻保持对品质追求极致,对特别不可忍受的态势。前端的习性监察和控制与特别申报显得尤为主要。

代码难免失常,对于特别能够利用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时的熏陶。

1 赞 1 收藏 评论

金沙澳门官网网址 10

try-catch 万分管理

try-catch 在大家的代码中时时来看,通过给代码块进行 try-catch 举办打包后,今世码块爆发出错开上下班时间 catch 将能捕捉到错误的音信,页面也将得以继续试行。

而是 try-catch 管理特别的力量轻巧,只可以捕获捉到运转时非异步错误,对于语法错误和异步错误就显得力不从心,捕捉不到。

大规模问题

window.onerror 非常管理

window.onerror 捕获万分技艺比 try-catch 稍微强点,无论是异步还是非异步错误,onerror 都能捕获到运营时不当。

示范:运营时一只错误

JavaScript

/** * @param {String} msg 错误音讯 * @param {String} url 出错文件 * @param {Number} row 行号 * @param {Number} col 列号 * @param {Object} error 错误详细音信 */ window.onerror = function (msg, url, row, col, error) { console.log('小编了然不当了'); console.log({ msg, url, row, col, error }) return true; }; error

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
* @param {String}  msg    错误信息
* @param {String}  url    出错文件
* @param {Number}  row    行号
* @param {Number}  col    列号
* @param {Object}  error  错误详细信息
*/
window.onerror = function (msg, url, row, col, error) {
  console.log('我知道错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
error

金沙澳门官网网址 11

演示:异步错误

JavaScript

window.onerror = function (msg, url, row, col, error) { console.log('小编明白异步错误了'); console.log({ msg, url, row, col, error }) return true; }; setTimeout(() => { error; });

1
2
3
4
5
6
7
8
9
10
window.onerror = function (msg, url, row, col, error) {
  console.log('我知道异步错误了');
  console.log({
    msg,  url,  row, col, error
  })
  return true;
};
setTimeout(() => {
  error;
});

金沙澳门官网网址 12

可是 window.onerror 对于语法错误还是无能为力,所以咱们在写代码的时候要硬着头皮幸免语法错误的,然而貌似那样的谬误会使得全体页面崩溃,照旧相比轻便能够开采到的。

在事实上的使用进度中,onerror 首若是来捕获预料之外的谬误,而 try-catch 则是用来在可预言景况下监察和控制特定的荒谬,两者结合使用更为赶快。

亟需小心的是,window.onerror 函数只有在回到 true 的时候,分外才不会发展抛出,否则即便是知道特其余发生调节台依然会显得 Uncaught Error: xxxxx。

金沙澳门官网网址 13

至于 window.onerror 还也可以有两点须求值得注意

  1. 对此 onerror 这种全局捕获,最佳写在全部 JS 脚本的眼下,因为您不能够担保你写的代码是或不是出错,假设写在背后,一旦发生错误的话是不会被 onerror 捕获到的。
  2. 其它 onerror 是无能为力捕获到互连网非常的荒谬。

当大家境遇 <img src="./404.png">报 404 网络央求非凡的时候,onerror 是心有余而力不足帮助大家捕获到十一分的。

JavaScript

<script> window.onerror = function (msg, url, row, col, error) { console.log('小编精通异步错误了'); console.log({ msg, url, row, col, error }) return true; }; </script> <img src="./404.png">

1
2
3
4
5
6
7
8
9
10
<script>
  window.onerror = function (msg, url, row, col, error) {
    console.log('我知道异步错误了');
    console.log({
      msg,  url,  row, col, error
    })
    return true;
  };
</script>
<img src="./404.png">

金沙澳门官网网址 14

鉴于互联网哀告格外不会事件冒泡,由此必须在捕获阶段将其捕捉到才行,不过这种措施就算能够捕捉到网络诉求的不行,可是力不从心推断HTTP 的景观是 404 如故任何诸如 500 等等,所以还必要匹配服务端日志才举行排查深入分析才足以。

JavaScript

<script> window.addEventListener('error', (msg, url, row, col, error) => { console.log('我知道 404 错误了'); console.log( msg, url, row, col, error ); return true; }, true); </script> <img src="./404.png" alt="">

1
2
3
4
5
6
7
8
9
10
<script>
window.addEventListener('error', (msg, url, row, col, error) => {
  console.log('我知道 404 错误了');
  console.log(
    msg, url, row, col, error
  );
  return true;
}, true);
</script>
<img src="./404.png" alt="">

金沙澳门官网网址 15

那点知识可能要求精通,要否则用户访问网址,图片 CDN 无法服务,图片加载不出来而开拓职员未有察觉就狼狈了。

联合反映

好像于百事可乐图的思索,假若大家的利用必要申报的日记数量过多,那么有不能缺少合併日志实行合併的报告。

消除方案得以是尝尝在用户距离页面只怕零部件销毁时发送一个异步的POST呼吁来进展反馈,不过尝试在卸载(unload)文档在此之前向web服务器发送数据。保障在文书档案卸载时期发送数据一向是三个劳累。因为用户代理平常会忽视在卸载事件处理器中产生的异步XMLHttpRequest,因为那时候曾经会跳转到下三个页面。所以那边是必须设置为联合的XMLHttpRequest请求吗?

JavaScript

window.add伊芙ntListener('unload', logData, false); function logData() { var client = new XMLHttpRequest(); client.open("POST", "/log", false); // 第多个参数注解是共同的 xhr client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); client.send(analyticsData); }

1
2
3
4
5
6
7
8
window.addEventListener('unload', logData, false);
 
function logData() {
    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()主意向服务器发送数据。

JavaScript

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

1
2
3
4
5
window.addEventListener('unload', logData, false);
 
function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

Script error 脚本错误是哪些

因为大家在线上的版本,平时做静态财富 CDN 化,那就能招致我们常访问的页面跟脚本文件来自不相同的域名,那时候如果未有展开额外的安顿,就能轻便发生Script error。

金沙澳门官网网址 16

可通过 npm run nocors 查看效果。

Script error 是浏览器在同源攻略限制下爆发的,浏览器处于对安全性上的考虑,当页面引用非同域名外界脚本文件时中抛出格外的话,此时本页面是未曾义务知道这几个报错音信的,取代他的是出口 Script error 那样的音讯。

金沙澳门官网网址 17

如此做的目的是幸免数据外泄到不安全的域中,举个简单的例子,

JavaScript

<script src="xxxx.com/login.html"></script>

1
<script src="xxxx.com/login.html"></script>

地点我们并不曾引进三个 js 文件,而是八个 html,那些 html 是银行的报到页面,假若您曾经报到了,那 login 页面就能够活动跳转到 Welcome xxx...,要是未登陆则跳转到 Please Login...,那么报错也会是 Welcome xxx... is not defined,Please Login... is not defined,通过这个新闻能够判别二个用户是或不是登入他的帐号,给侵袭者提供了要命惠及的判别门路,那是一对一不安全的。

介绍完背景后,那么大家应该去消除这一个主题素材?

首先能够想到的方案料定是同源化战术,将 JS 文件内联到 html 也许放到同域下,固然能不难实用地消除 script error 难点,但是这么非常小概采用好文件缓存和 CDN 的优势,不推荐使用。正确的方法应该是从根本上化解 script error 的失实。

前端品质与足够申报

2018/08/22 · 基础手艺 · 性能

原稿出处: counterxing   

前言

前边在对合营社的前端代码脚本错误进行排查,试图下跌 JS Error 的错误量,结合本身前边的经验对那上头内容开始展览了推行并计算,下边就此谈谈本人对前者代码格外监察和控制的片段眼光。

正文大致围绕上边几点展开研讨:

  1. JS 管理极其的不二诀窍
  2. 汇报情势
  3. 不行监察和控制上报常见难点

本文由金沙澳门官网发布于前端知识,转载请注明出处:金沙澳门官网网址前端代码异常监控实战,前端

关键词: 金沙澳门官网

上一篇:前者优化,2017前端品质优化清单
下一篇:没有了