Script error

[caihuiji]

一、Script Error规范

script Error 是什么？

是外部加载的JS 抛出异常的时候， 出于安全方面的考虑，js错误信息中可能包含一些敏感信息，比如用户名、权限提示等，希望能够把这类信息屏蔽。目前跨域的场景下会触发这种安全限制，window.onerror无法获得具体出错信息，而只能得到Script error 0 0

http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#runtime-script-errors

二、解决ScriptError 问题

目前业内有以下两种方式：

• 响应头增加 access-control-allow-orgin （以下简称AC）
• 切面包裹入口函数， try-catch (badjs-report 方案)

响应头增加 access-control-allow-orgin

1.1 Access-Control-Allow-Origin 回包header里设置允许cros的域
1.2 script 标签增加 crossorigin="anonymous"

当1和2同时满足就拥有了打开script errors的钥匙，window.onerror就能获得详细出错信息了

哪些浏览器能打开muted errors?
ie 6-10 没有同源限制的问题
Chrome 和 Firefox支持，Safari 不支持，
所以跨域的js想在Safari下获取出错详情信息，只能用try-catch了，onerror是无能为力了。

access-control-allow-orgin 配置问题：

由于值不能设置多值，而且设置 * , 允许任何域名使用是一个很不安全的设置，所以一般会根据 浏览器请求头 refer 或则 orgin ，判断是不是白名单内的域名，是的就响应回对应的域名或则* （响应头不支持返回 *.qq.com），。当然如果cdn只对一个业务服务也可以写死域名

script 标签上面的 crossorigin 配置问题

1.anonymous（默认）
不能带cookie

副作用，当 AC 的设置不是 * 或者不等于origin时，js直接不加载

2.use-credentials
能带上cookie

副作用，当AC的设置不等于origin时，js直接不加载（不支持 *通配符了）

目前只有高级浏览器支持，如果闲麻烦可以使用自带的 try-catch 功能

切面包裹入口函数， try-catch

对于基于AMD和jQuery的网站，几乎所有业务函数都是通过回调异步触发的，所以我们只需要将所有异步函数包裹起来就可以捕获到大部分错误：

• setTimeou ,setInterval
• $.event.add 和 $.event.remove
• AJAX
• 模块入口 define 或则 require

setTimeou ,setInterval

只针对 w3c 现代的浏览器的进行包裹，ie 不进行包裹 #2

$.event.add 和 $.event.remove

没有个dom 都有这两个方法，我们没有办法对全部重写。但是我们发现目前基本都会使用 jquery 或 zepto ，所以我们对 $.event.add 和 $.event.remove 进行了切面处理。

AJAX

跟上面的类似，我们不能重写 ajax ，但是前端开发都使用 jquery ，所以我们重写了 $.ajax

模块入口 define 或则 require

目前前端开发基本都使用了模块化管理，所以模块化的入口是非常好的入口。我们也进行了包裹

[loskael]

提供另一个解决思路:
产生 Script Error 的原因是因为请求了跨域资源(比如cdn), 可以灰度一部分用户, 直接使用主域而不是cdn上的js, 避免跨域问题, 并使用不同的上报id跟踪

[loskael]

http://errors.totorojs.org/wiki/script-error