轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / javascript错误提示Script error.解决方案

javascript错误提示Script error.解决方案

一、Script Error规范

script Error 是什么?

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

79552948-02f9-11e5-9923-44fbda98ddd0

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

二、解决ScriptError 问题

  • 响应头增加 access-control-allow-orgin (以下简称AC)
  • 每个fucntion 包裹 try-catch
  • 切面包裹入口函数, try-catch

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

  1. Access-Control-Allow-Origin 回包header里设置允许cros的域
  2. Access-Control-Allow-Credentials:true

Script标签增加 crossorigin 当1和2同时满足就拥有了打开script errors的钥匙,window.onerror就能获得详细出错信息了

哪些浏览器能打开muted errors?

Chrome 和 Firefox支持,Safari 和 ie 不支持,

所以跨域的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直接不加载(不支持 *通配符了)

其他奇葩的问题

由于浏览器的缓存,同一个资源的跨域头会被缓存,但是同一个网站中可能有不同域名请求这个资源,所以会出现资源跨域请求失败

2. 每个fucntion 包裹 try-catch

利用构建工具,对function 进行包裹,try-catch ,捕获到异常后进行上报

但是构建后生成的代码会对源代码增加大小

3. 切面包裹入口函数, try-catch

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

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

setTimeou、setInterval

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

$.event.add 和 $.event.remove

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

AJAX

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

模块入口 define 或则 require

目前前端开发基本都使用了模块化管理,所以模块化的入口是非常好的入口。

提供另一个解决思路

产生 Script Error 的原因是因为请求了跨域资源(比如cdn), 可以灰度一部分用户, 直接使用主域而不是cdn上的js, 避免跨域问题。
参考自:badjs

110/470
112/470

相关阅读

文章评论

  • 最后一句, 智者所见略同, 我们生产环境 我也是灰度处理的。 加了crossorigin偶尔会异常,之前测试环境我加了 use-credentials 这个属性,没有重现异常了,但是cdn设置是*的,所以生产不能加。然后一直到刚才我明白为什么加了use-credentials一直没重现,我猜大概是use-credentials每次回带上cookie请求,相当于 浏览器没有缓存crossorgin header吗?

  • 啊,没看懂..跨域的那个问题,cors ie不支持怎么办…

  • 你真有才啊

  • 。。。。。。。

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子