当前页面的脚本发生错误如何解决win7 前端代码异常监控实战

11/27 23:06:50 来源网站:268辅助卡盟网

当前脚本发生错误 sript_当前页面的脚本发生错误如何解决win7_当前脚本发生错误 51

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

所以如果你的应用用到很多的 Promise 实例的话,特别是你在一些基于 promise 的异步库比如 axios 等一定要小心,因为你不知道什么时候这些异步请求会抛出异常而你并没有处理它,所以你最好添加一个 Promise 全局异常捕获事件 unhandledrejection。

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'
});

当前脚本发生错误 sript_当前脚本发生错误 51_当前页面的脚本发生错误如何解决win7

当然,如果你的应用没有做 Promise 全局异常处理的话,那很可能就像某乎首页这样:

当前脚本发生错误 51_当前页面的脚本发生错误如何解决win7_当前脚本发生错误 sript

异常上报方式

监控拿到报错信息之后,接下来就需要将捕捉到的错误信息发送到信息收集平台上,常用的发送形式主要有两种:

通过 Ajax 发送数据动态创建 img 标签的形式

实例 - 动态创建 img 标签进行上报

function report(error) {
  var reportUrl = 'http://xxxx/report';
  new Image().src = reportUrl + 'error=' + error;
}

监控上报常见问题

下述例子我全部放在我的 github 上,读者可以自行查阅,后面不再赘述。

git clone https://github.com/happylindz/blog.git
cd blog/code/jserror/
npm install

Script error 脚本错误是什么

因为我们在线上的版本,经常做静态资源 CDN 化,这就会导致我们常访问的页面跟脚本文件来自不同的域名,这时候如果没有进行额外的配置,就会容易产生 Script error。

当前脚本发生错误 sript_当前页面的脚本发生错误如何解决win7_当前脚本发生错误 51

可通过 npm run nocors 查看效果。

Script error 是浏览器在同源策略限制下产生的,浏览器处于对安全性上的考虑,当页面引用非同域名外部脚本文件时中抛出异常的话,此时本页面是没有权利知道这个报错信息的,取而代之的是输出 Script error 这样的信息。

当前脚本发生错误 51_当前页面的脚本发生错误如何解决win7_当前脚本发生错误 sript

这样做的目的是避免数据泄露到不安全的域中,举个简单的例子,

<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,通过这些信息可以判断一个用户是否登录他的帐号,给入侵者提供了十分便利的判断渠道,这是相当不安全的。

    暂无相关资讯
当前页面的脚本发生错误如何解决win7 前端代码异常监控实战