前端异常监控

如果debug是移除bug的流程，那么编程就一定是将bug放进去的流程。
如果没有用户反馈问题，那就代表我们的产品棒棒哒，对不对？

主要内容

Web规范中相关前端异常
异常按照捕获方式分类
异常的捕获方式
日志上报的方式

前端异常类型(Execption)

WebIDL和ecma-262中的错误类型

ECMAScript exceptions <==> IDL 的简单异常

当脚本代码运行时发生的错误，会创建Error对象，并将其抛出，除了通用的Error构造函数外，以下是另外几个ECMAScript 2015中定义的错误构造函数。
- EvalError eval错误
- RangeError 范围错误
- ReferenceError 引用错误
- TypeError 类型错误
- URIError URI错误
- SyntaxError 语法错误 (这个错误WebIDL中故意省略，保留给ES解析器使用)
- Error 通用错误（这个错误WebIDL中故意省略，保留给开发者使用使用）
DOMException 最新的DOM规范定义的错误类型集，兼容旧浏览的DOMError接口, 完善和规范化DOM错误类型。
- IndexSizeError 索引不在允许的范围内
- HierarchyRequestError 节点树层次结构是不正确的。
- WrongDocumentError 对象是错误的
- InvalidCharacterError 字符串包含无效字符。
- NoModificationAllowedError 对象不能被修改。
- NotFoundError 对象不能在这里被找到。
- NotSupportedError 不支持的操作
- InvalidStateError 对象是一个无效的状态。
- SyntaxError 字符串不匹配预期的模式
- InvalidModificationError 对象不能以这种方式被修改
- NamespaceError 操作在XML命名空间内是不被允许的
- InvalidAccessError 对象不支持这种操作或参数。
- TypeMismatchError 对象的类型不匹配预期的类型。
- SecurityError 此操作是不安全的。
- NetworkError 发生网络错误
- AbortError 操作被中止
- URLMismatchError 给定的URL不匹配另一个URL。
- QuotaExceededError 已经超过给定配额。
- TimeoutError 操作超时。
- InvalidNodeTypeError 这个操作的节点或节点祖先是不正确的
- DataCloneError 对象不能克隆。

前端错误异常按照捕获方式分类

[x] 语法错误
[x] 运行时异常
[x] 资源加载异常
- img
- script
- link
- audio
- video
- iframe
- ...外链资源的DOM元素
[x] 异步请求异常
- XMLHttpRequest
- fetch
[x] Promise异常
[ ] ~~CSS中资源异常~~
- @font-face
- background-image
- ...暂时无法捕获

前端错误异常的捕获方式

try-catch (ES提供基本的错误捕获语法)
- 只能捕获同步代码的异常
- 回调
- ~~setTimeout~~
- ~~promise~~
window.onerror = cb (DOM0)
- img
- script
- link
window.addEventListener('error', cb, true) (DOM2)
window.addEventListener("unhandledrejection", cb) (DOM4)
Promise.then().catch(cb)
封装XMLHttpRequest&fetch | 覆写请求接口对象

try-catch-finally

将能引发异常的代码块放到try中，并对应一个响应，然后有异常会被捕获

  try {
    // 模拟一段可能有错误的代码
    throw new Error("会有错误的代码块")
  } catch(e){
    // 捕获到try中代码块的错误得到一个错误对象e，进行处理分析
    report(e)
  } finally {
    console.log("finally")
  }

onerror事件

window.onerror

当JavaScript运行时错误（包括语法错误）发生时，window会触发一个ErrorEvent接口的事件，并执行window.onerror();

但这里有个信息要注意，语法错误会导致出现语法错误的那个脚本块执行失败，所以语法错误会导致当前代码块运行终止，从而导致整个程序运行中断，如果语法错误这个发生在我们的错误监控语句块中，那么我们就什么也监控不到了。

/**
 * @description 运行时错误处理器
 * @param {string} message 错误信息
 * @param {string} source 发生错误的脚本URL
 * @param {number} lineno 发生错误的行号
 * @param {number} colno 发生错误的列号
 * @param {object} error Error对象
 */
function err(message,source,lineno,colno,error) {...}
window.onerror = err

element.onerror

当一项资源（如或

前端异常监控-看这篇就够了