# 前端异常捕获插件( error-cacher )


## 应用范围

* 用talentJs搭建的前端项目


## 描述

* 重写 基础类库和框架(`Backbone`, `Marionette`, `JQuery`) 的底层函数, 在程序流入口处添加 `try{} catch(e){}` 捕获未知异常

* error-cacher 是前端异常解决方案的一个模块, 目标是捕获项目中出现的所有未知异常.

* et.js 也是前端兼容性解决方案的另外一个模块, 在 et.js 中, 实现了 window.onerror 函数, 捕获所有在程序中未被捕获的异常. 但使用 window.onerror 有很大局限

  > 各浏览器对 window.onerror 的实现不一致, 导致很抓取到 堆栈 的信息

  > 由于跨域问题, 会导致异常信息无法读取( Script error )

  > 在 IE8, 9, 10 以及 Safari 浏览器中都没有办法捕获到来自 其他标签引的js文件 中的错误

* 由于 window.onerror 函数的局限, 引入了 error-cacher

  > 被catch住的异常都会有 堆栈 信息( 除了 IE8, IE9 )


## 引入方式

* error-cacher 是 bower 管理的组件, 组件名称: "error-cacher"

* 引入组件后, 在 config.js 文件中添加 error-cacher 的配置

  > 'error-cacher: 'vendor/components/error-cacher/index'

* 在 main.js(app/scripts/main.js) 文件中, 在入口前引入 error-cacher 组件

  ```javascript
    require(['error-cacher'], function(errorCacher) {

       // error-cacher 初始化
       (new errorCacher.ErrorAttacher(window, Backbone, Marionette)).init();

       // ...
       // Talent.app.start(...)
    })
  ```
* 在 Gruntfile.js 文件中, 找到 `mainIncludeFiles` 配置, 添加 'error-cacher'

  ```javascript
    mainIncludeFiles: ['requirejs', 'main', 'talent', 'error-cacher', ... ]
  ```

## 测试

* 运行配置后的项目, 打开浏览器的 console 控制台, 输入 window.tryCount 查看是否有值

> window.tryCount 是统计项目中使用 error-cacher 组件, 自页面刷新后曾加过的所有 try{} catch(e){} 数量.


## error-cacher

### 方法

* init

    描述: 初始化 error-cacher

    注意:

    * 确保在框架加载完毕之后初始化组件, 以确保在 error-cacher 中需要重写函数已经加载完毕.

    *  推荐在 main.js(app/scripts/main.js) 文件中, app.start() 之间初始化组件, 以确保在进入业务级代码前已经函数已经修改完毕

    > `返回值`: Object

    > `参数`: [ window, Backbone, Marionette, options ]

    >> window: window对象

    >> Backbone, Marionette 类库对象

    >> options: 参数 { env: 'Production' }. 可传入环境变量(env), 如果省略, 则默认取 window.BSGlobal 中的 env 变量. 如果承载中没有环境变量, 则默认为是线上环境