前端demo_【前端3分钟】Script Error产生的原因和解法

Script Error对于前端开发者相信都不陌生，而且由于没有具体错误堆栈和代码行列号，成为可能是最神秘的错误之一。

下面介绍Script Error产生的原理和解决办法。

1、Script Error是如何产生的

跨域资源引用

假如：abc.com 下的页面引用了属于 http://def.com(CDN) 的 demo.js 文件。

若运行中demo.js的 run()方法 内部报了一个异常，那么前端的错误捕获脚本，只会检测到一个 script error的异常。

这是由于浏览器基于安全考虑故意隐藏了其它域JS文件抛出的具体错误信息。这样可以有效避免敏感信息无意中被第三方(不受控制的)脚本捕获到，因此，浏览器只允许同域下的脚本捕获具体的错误信息。

具体可以参考WEBKIT源码：

bool ScriptExecutionContext::sanitizeScriptError(String& errorMessage, int& lineNumber, String& sourceURL){KURL targetURL = completeURL(sourceURL);if (securityOrigin()->canRequest(targetURL))return false;errorMessage = "Script error.";sourceURL = String();lineNumber = 0;return true;}

2、如何解决

知道浏览器为什么限制跨域资源引用，解决办法也不困难。在页面请求资源时，让浏览器允许我们发起请求，而服务器（CDN）也允许我们获取资源，从而得到浏览器运行资源的错误信息；这样分两步解决。

第一步：给script标签增加 crossorigin 属性，让浏览器允许页面请求资源。

// 以下两种写法均可
<scrpit src="http://def.com/demo.js" crossorigin></script><scrpit src="http://def.com/demo.js" crossorigin="anonymous"></script>

第二步：给静态资源响应头增加允许跨域标记，让服务器允许资源返回。

服务器的HTTP响应头增加 Access-Control-Allow-Origin: * 或者 Access-Control-Allow-Origin: http://def.com

注：大部分主流CDN默认添加了Access-Control-Allow-Origin属性。

3、已添加 crossorigin 依然有 script error

由于部分浏览器对crossorigin属性不支持，又或者我们无法往HTTP请求响应头里面添加跨域属性，因此依然可能产生script error。

这时还可以通过try catch获取页面报错信息，将JS错误重新抛出或者上报。

  try {run(); // 调用demo.js中定义的run方法} catch (e) {console.log(e);throw e; }

4、参考

Cross-Origin Resource Sharing (CORS)
The crossorigin attribute: Requesting CORS access to content

5、更多文章分享

阿里UC百亿级PV的前端监控平台实践 https://zhuanlan.zhihu.com/p/79978987
10分钟彻底搞懂前端页面性能监控 https://zhuanlan.zhihu.com/p/82981365

6、岳鹰-WEB前端监控

阿里UC出品的岳鹰WEB前端监控，支持移动H5、PC站点、微信小程序以及支付宝小程序等各家小程序，PV、JS异常、页面性能等监控指标完整，已经对外开放，欢迎免费体验试用。

技术交流、第一时间掌握产品动态，欢迎联系微信小助手～

微信号 effirst-assistant