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>
- 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;
- }
二、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;
- }
【webfunny前端埋点体系】。]
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
