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

前端异常监控如果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] 资源加载异常imgscriptlinkaudiovideoiframe…外链资源的DOM元素[x] 异步请求异常XMLHttpRequestfetch[x] Promise异常[ ] CSS中资源异常@font-facebackground-image…暂时无法捕获前端错误异常的捕获方式try-catch (ES提供基本的错误捕获语法)只能捕获同步代码的异常回调setTimeoutpromisewindow.onerror = cb (DOM0)imgscriptlinkwindow.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 = errelement.onerror当一项资源（如<img>或<script>）加载失败，加载资源的元素会触发一个Event接口的error事件，并执行该元素上的onerror()处理函数。element.onerror = function(event) { … } //注意和window.onerror的参数不同注意：这些error事件不会向上冒泡到window，不过能被单一的window.addEventListener捕获。window.addEventListeneraddEventListener相关的一些内容W3C DOM2 Events规范中提供的注册事件监听器的方法, 在这之前均使用el.onclick的形式（DOM0 规范的基本内容，几乎所有浏览器都支持）。注意： 接口的几种语法error事件捕获资源加载错误资源加载失败，不会冒泡，但是会被addEventListener捕获，所以我们可以指定在加载失败事件的捕获阶段捕获该错误。注意: 接口同时也能捕获运行时错误。window.addEventListener(“error”, function(e) { var eventType = [].toString.call(e, e); if (eventType === “[object Event]”) { // 过滤掉运行时错误 // 上报加载错误 report(e) } }, true);unhandledrejection事件捕获Promise异常最新的规范中定义了 unhandledrejection事件用于全局捕获promise对象没有rejection处理器时异常情况。window.addEventListener(“unhandledrejection”, function (event) { // …your code here to handle the unhandled rejection… // Prevent the default handling (error in console) event.preventDefault();});Promise.then().catch(cb).finally()Promise中的错误会被Promise.prototype.catch捕获，所以我们通过这种方式捕获错误，这包括一些不支持unhandledrejection事件的环境中promisede polyfill实现。new Promise(function(resolve, reject) { throw ‘Uncaught Exception!’;}).catch(function(e) { console.log(e); // Uncaught Exception!});封装XMLHttpRequest&fetch | 覆写请求接口对象// 覆写XMLHttpRequest APIif(!window.XMLHttpRequest) return; var xmlhttp = window.XMLHttpRequest; var _oldSend = xmlhttp.prototype.send; var _handleEvent = function (event) { if (event && event.currentTarget && event.currentTarget.status !== 200) { report(event) } } xmlhttp.prototype.send = function () { if (this[‘addEventListener’]) { this[‘addEventListener’](’error’, _handleEvent); this[‘addEventListener’](’load’, _handleEvent); this[‘addEventListener’](‘abort’, _handleEvent); this[‘addEventListener’](‘close’, _handleEvent); } else { var _oldStateChange = this[‘onreadystatechange’]; this[‘onreadystatechange’] = function (event) { if (this.readyState === 4) { _handleEvent(event); } _oldStateChange && _oldStateChange.apply(this, arguments); }; } return _oldSend.apply(this, arguments); }// 覆写fetch APIif (!window.fetch) return;var _oldFetch = window.fetch;window.fetch = function() { return _oldFetch .apply(this, arguments) .then(function(res){ if (!res.ok) { // True if status is HTTP 2xx report(res) } return res; }) .catch(function(error){ report(res) });}日志上报的方式异步请求上报, 后端提供接口，或者直接发到日志服务器img请求上报, url参数带上错误信息eg:(new Image()).src = ‘http://baidu.com/tesjk?r=tksjk'注意跨源脚本异常当加载自不同域的脚本中发生语法错误时，为避免信息泄露，语法错误的细节将不会报告，而代之简单的 “Script error.“由于同源策略影响，浏览器限制跨源脚本的错误访问，这样跨源脚本错误报错信息如下图：在H5的规定中，只要满足下面俩个条件，是允许获取跨源脚本的错误信息的。客户端在script标签上增加crossorigin属性；服务端设置js资源响应头Access-Control-Origin:（或者是域名）。扩展阅读业界已经有的监控平台Sentry开源阿里的ARMSfundebugFrontJS几个异常监控的问题如何保证大家提交的代码是符合预期的？ 如何了解前端项目的运行是否正常，是否存在错误？代码质量体系控制和错误监控以及性能分析如果用户使用网页，发现白屏，现在联系上了你们，你们会向他询问什么信息呢？先想一下为什么会白屏？我们以用户访问页面的过程为顺序，大致排查一下用户没打开网络DNS域名劫持http劫持cdn或是其他资源文件访问出错服务器错误前端代码错误前端兼容性问题用户操作出错通过以上可能发生错误的环节，我们需要向用户手机一下以下的用户信息当前的网络状态运营商地理位置访问时间客户端的版本(如果是通过客户端访问)系统版本浏览器信息设备分辨率页面的来源用户的账号信息通过performance API收集用户各个页面访问流程所消耗的时间收集用户js代码报错的信息如果我们使用了脚本代码压缩，然而我们又不想将sourcemap文件发布到线上，我们怎么捕获到错误的具体信息？CSS文件中也存在引用资源，@font-face, background-image …等这些请求错误该如何进行错误捕获？总结Web规范中相关前端异常DOM处理异常ECMAScript处理异常异常按照捕获方式分类运行时异常资源加载异常异步请求异常Promise异常异常的捕获方式try-catch (ES提供基本的错误捕获语法)只能捕获同步代码的异常回调setTimeoutpromisewindow.onerror = cb (DOM0)imgscriptlinkwindow.addEventListener(’error’, cb, true) (DOM2)window.addEventListener(“unhandledrejection”, cb) (DOM4)Promise.then().catch(cb)封装XMLHttpRequest&fetch | 覆写请求接口对象注意点：跨源脚本异常的捕获日志上报的方式异步请求上报new img上报扩展阅读业界已有的异常监控平台几个跟异常监控有关的问题