阅读 265

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

本文首发于知乎【前端3分钟】Script Error产生的原因和解法,搬运转载请注明出处,否则追究版权责任。

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

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

1、Script Error是如何产生的

跨域资源引用

假如:abc.com 下的页面引用了属于 http://def.com(CDN) 的 demo.js 文件。 若运行中demo.jsrun()方法 内部报了一个异常,那么前端的错误捕获脚本,只会检测到一个 script error的异常。

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

具体可以参考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、参考

5、更多文章分享

6、岳鹰-WEB前端监控

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

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

微信号 effirst-assistant

关注下面的标签,发现更多相似文章
评论