如何定位和解决：前端经常出现Script error

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证书等）。
添加跨域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前端埋点系统】。]
在这里插入图片描述