IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    轩枫发表于 2015-09-05 14:37:47
    love 0

    一、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



沪ICP备19023445号-2号
友情链接