产生 Script error 消息的原因

描述

在使用 FrontJS 进行 Web 端错误收集的时候，经常会在脚本错误中看到 Script error. 这样的错误信息，同时并没有包含任何详细信息。

可能出现的问题

  1. 用户使用的浏览器不支持错误的捕获 (概率极小)

  2. 出错的脚本文件是跨域加载到页面的

    对于用户浏览器不支持的情况，这种我们是无法处理的；这里主要解决跨域脚本错误无法收集的原因和解决方案。

原因

一般情况下脚本文件是使用 <script> 标签加载，对于同源脚本出错，在使用浏览器的 GlobalEventHandlers API 时，收集到的错误信息会包含详细的错误信息；当不同源脚本出错时，收集到的错误信息只有 Script error. 文本，这是由浏览器的同源策略控制的，也是正常的情况。对于非同源脚本我们只需要进行非同源资源共享（也称 HTTP访问控制 / CORS）的操作即可。

解决方法

1. 脚本文件直接存放在服务器

在服务器上静态文件输出时添加 Header

Access-Control-Allow-Origin: *

在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous"

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

2. 脚本文件存放 CDN 上

在 CDN 设置中添加 Header

  Access-Control-Allow-Origin: *

在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous"

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

3. 脚本文件从第三方加载

在非同源脚本所在的 Script 标签上添加属 crossorigin="anonymous"

<script type="text/javascript" src="path/to/your/script.js" crossorigin="anonymous"></script>

参考及扩展阅读

GlobalEventHandlers.onerror
Cross-Origin Resource Sharing (CORS)
The Script element
CORS settings attributes