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

最新推荐文章于 2024-04-12 11:22:37 发布

webfunny2020

最新推荐文章于 2024-04-12 11:22:37 发布

阅读量3.9k

点赞数 47

文章标签：前端

本文链接：https://blog.csdn.net/webfunny2020/article/details/137434148

版权

本文讲述了前端开发中频繁出现的Scripterror错误，其产生的原因、如何通过行为记录和链路追踪定位，以及提供两种解决策略：CORS跨域和try-catch捕获。尽管通常对业务影响不大，但了解和管理这类错误有助于提升用户体验和维护效率。

摘要由CSDN通过智能技术生成

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前端埋点系统】。]
在这里插入图片描述