前端经常出现Script error. 如何定位,如何解决

一步一个脚印一个坑 7月前 ⋅ 915 阅读
ad

 

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异常,可执行以下两个步骤:

1. 添加crossorigin="anonymous"属性。此步骤的作用是告知浏览器以匿名方式获取目标脚本。这意味着请求脚本时不会向服务端发送潜在的用户身份信息(例如Cookies、HTTP证书等)。

<script src="http://www.CDN/test.js" crossorigin="anonymous"></script>

2. 添加跨域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.其实并不是什么严重的问题,很少遇到这种错误会影响到正常的业务,一般第三方都会做好兼容处理。 但是呢,它会让人看着心烦,所以在确认对业务没有影响的时候,可考虑把它过滤掉。这样就不会影响线上的错误率了(以防背锅挨批,哈哈)

 

参考文档:https://help.aliyun.com/zh/arms/browser-monitoring/support/causes-and-solutions-for-script-errors

 

 

 

 

关于Webfunny

Webfunny专注于前端监控系统,前端埋点系统的研发。 致力于帮助开发者快速定位问题,帮助企业用数据驱动业务,实现业务数据的快速增长。支持H5/Web/PC前端、微信小程序、支付宝小程序、UniApp和Taro等跨平台框架。实时监控前端网页、前端数据分析、错误统计分析监控和BUG预警,第一时间报警,快速修复BUG!支持私有化部署,Docker容器化部署,可支持千万级PV的日活量!

  点赞 0   收藏 0
  • 一步一个脚印一个坑
    共发布106篇文章 获得4个收藏
全部评论: 0