Hello,大家好。今天我们来讲一下前端出现频率非常高的一种错误:Script error
。
Script error.这个错误非常的高傲和神秘,为什么呢?因为它出现的时候,不会给你提供任何有关它的线索。正常我们写的前端代码报错的时候,浏览器通常抛出错误代码的行列号,以及它的堆栈代码,这样我们就可以快速定位到错误的位置。而这个错误发生的时候,连根毛的线索都没有提供,有毛的线索吗 ,一根都没有。那么它凭什么这么嚣张呢?
一、Script error是如何产生的呢?
很多同学看到这个错误的时候一脸懵,不知道该咋整,其实他是由第三方js代码产生了报错,而浏览器存在着同源策略导致它无法像你提供第三方文件的堆栈,除非得到第三方服务器的允许。
最常见的情形是使用CDN托管JS资源。为了更好地理解,假设以下HTML页面部署在http://www.webfunny.com域名下:
<!doctype html><html><head> <title>这个页面在这个域名:https://www.webfunny.com</title></head><body> <script src="http://www.CDN.com/test.js"></script> <script> window.onerror = function (message, url, line, column, error) { console.log(message, url, line, column, error); } // 假如test.js中的代码发生了报错 </script></body>
假如这个时候,test.js代码中发生了报错,这个时候你将会得到 “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;}
其实这个并不能算是你们代码的报错,所以正常情况下,只要不影响业务,你们是可以睁一只眼闭一只眼的(悄悄说的)。但是webfunny作为一款监控系统,即使不影响业务,我们也得上报并保存下来(这是我们最后的倔强:)
二、Script error这种错误怎么定位呢?
我看很多人都写了如何去解决script error
,但是鲜有人介绍怎么定位到它。也许大家可能是忽略了,但是因为缺乏线索,想定位到它的位置还真是不容易呢。特别是项目引入了不止一个第三方js文件的时候,你怎么知道是发生在哪个文件中呢?
其实这就离不开行为记录,链路追踪的功能了。通过记录用户的行为轨迹,可以准确的找到Script error的具体时间节点,在那个时间节点你就可以知道调用了什么方法,从而找到具体位置。
三、Script error这种错误怎么解决呢?
解决方式1:开启CORS跨域资源共享
为了跨域捕获JavaScript异常,可执行以下两个步骤:
crossorigin="anonymous"
属性。此步骤的作用是告知浏览器以匿名方式获取目标脚本。这意味着请求脚本时不会向服务端发送潜在的用户身份信息(例如Cookies、HTTP证书等)。 <script src="http://www.CDN/test.js" crossorigin="anonymous"></script>
添加跨域HTTP响应头。Access-Control-Allow-Origin: * // 或者业务域名
完成上述两步之后,即可通过window.onerror捕获跨域脚本的报错信息。回到之前的案例,页面重新运行后,捕获到的结果是:
解决方式2:利用try catch重新捕获
已添加 crossorigin 依然有 script error。由于部分浏览器对crossorigin属性不支持,又或者我们无法往HTTP请求响应头里面添加跨域属性,因此依然可能产生script error。
这时还可以通过try catch获取页面报错信息,将JS错误重新抛出或者上报。
try { run(); // 调用test.js中定义的run方法 } catch (e) { console.log(e); throw e; }
最后、Script error.其实并不是什么严重的问题,很少遇到这种错误会影响到正常的业务,一般第三方都会做好兼容处理。但是呢,它会让人看着心烦,所以在确认对业务没有影响的时候,可考虑把它过滤掉。这样就不会影响线上的错误率了(以防背锅挨批,哈哈)
【webfunny前端埋点系统】。]