一、Script error. 这家伙怎么这么嚣张？
Hello，大家好。今天我们来聊聊前端开发中经常遇到的一个让人头疼的问题：Script error. 这个错误，真是高傲又神秘，因为它出现的时候，连个毛线的信息都不给我们。通常我们写的代码报错，浏览器都会给出错误代码的行列号和堆栈代码，方便我们快速定位。而这个错误，连根毛的线索都没有，真是让人摸不着头脑。
二、Script error. 从何而来？
很多同学看到这个错误的时候一脸懵，不知道该怎么办。其实，这个错误通常是由第三方js代码产生的，而浏览器存在着同源策略，导致它无法像我们提供第三方文件的堆栈信息，除非得到第三方服务器的允许。最常见的情形就是使用CDN托管JS资源。下面是一个简单的例子：
<!doctype html>
<title>这个页面在这个域名：https://www.webfunny.com</title>
</head>
<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>
</html>
假如这个时候，test.js代码中发生了报错，你将会得到 “Script error.”。出于安全考虑，浏览器会刻意隐藏其他域的JS文件抛出的具体错误信息，这样做可以有效避免敏感信息无意中被不受控制的第三方脚本捕获。因此，浏览器只允许同域下的脚本捕获具体错误信息，而其他脚本只知道发生了一个错误，但无法获知错误的具体内容。
三、Script error. 怎么定位它？
Script error这种错误怎么定位呢？很多人写了如何去解决，但是鲜有人介绍怎么定位到它。其实这就离不开行为记录，链路追踪的功能了。通过记录用户的行为轨迹，可以准确的找到Script error的具体时间节点，在那个时间节点你就可以知道调用了什么方法，从而找到具体位置。
四、Script error. 怎么解决它？
解决方式1：开启CORS跨域资源共享 为了跨域捕获JavaScript异常，可执行以下两个步骤：
- 添加
crossorigin="anonymous"属性。此步骤的作用是告知浏览器以匿名方式获取目标脚本。 - 添加跨域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.其实并不是什么严重的问题，很少遇到这种错误会影响到正常的业务，一般第三方都会做好兼容处理。但是呢，它会让人看着心烦，所以在确认对业务没有影响的时候，可考虑把它过滤掉。这样就不会影响线上的错误率了（以防背锅挨批，哈哈）。
小结与拓展
通过本文，我们了解了Script error的来源、定位和解决方法。希望对大家有所帮助。接下来，我们可以进一步探讨如何优化前端错误处理机制，以及如何利用监控工具来提高代码质量。
我是陈景序，来自「websoft网络软件专家」（www.phpwebsoft.com），一个专注于Web开发的技术专家。如果你对Web开发有任何疑问，欢迎关注我们的网站，了解更多内容。