前端异常监控如果说调试是去掉bug的过程,那么编程一定是把bug放进去的过程。如果没有用户反馈的问题,说明我们的产品很棒,对吧?Web规范的主要内容是将相关的前端异常按照捕获方式、异常的捕获方式、日志上报方式进行了分类。前端异常类型(Execption)WebIDL和ecma-262中的错误类型。当发生错误时,将创建并抛出一个Error对象。除了一般的Error构造函数,下面是ECMAScript2015中定义的其他几个错误构造函数。parser)Error一般错误(该错误在WebIDL中有意省略,保留给开发者使用)DOMExceptionDOM规范定义的最新一组错误类型,兼容老浏览器的DOMError接口,完善和规范DOM错误类型.IndexSizeErrorIndexnotwithinallowedrangeHierarchyRequestError节点树层次结构不正确。WrongDocumentError对象错误InvalidCharacterError字符串包含无效字符。NoModificationAllowedError无法修改对象。此处找不到NotFoundError对象。NotSupportedError不支持的操作InvalidStateError对象处于无效状态。SyntaxErrorStringdoesnotmatchexpectedschemaInvalidModificationErrorObjectcannotbemodifiedinthiswayNamespaceErrorOperationisnotallowedwithinanXMLnamespaceInvalidAccessError对象不支持此操作或参数。TypeMismatchError对象的类型与预期的类型不匹配。SecurityError该操作不安全。NetworkError发生网络错误AbortError操作被中止URLMismatchError给定的URL与另一个URL不匹配。QuotaExceededError已超出给定配额。TimeoutError操作超时。InvalidNodeTypeError此操作的节点或节点祖先不正确DataCloneError无法克隆对象。前端错误和异常根据捕获方式分类[x]语法错误[x]运行时异常[x]资源加载异常imgscriptlinkaudiovideoiframe...外部资源DOM元素[x]异步请求异常XMLHttpRequestfetch[x]Promiseexceptions[]CSSResourceexception@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|overriderequestinterfaceobjecttry-catch-finally将可能引发异常的代码块放在try中并对应一个response,然后任何异常都会被捕获try{//模拟一段可能出错的代码thrownewError("会有一个错误代码块")}catch(e){//捕获代码块中的错误试图得到一个错误对象e进行处理分析report(e)}finally{console.log("finally")}onerror事件window.onerror当JavaScript运行时发生错误(包括语法错误),窗口会触发ErrorEvent接口的事件,执行window.onerror();但是这里提示一下,语法错误会导致有语法错误的脚本块执行失败,所以语法错误会导致当前代码块的执行终止,导致整个程序中断.如果语法错误发生在我们的错误监控语句块中,那么我们将无法监控任何东西。/***@descriptionruntimeerrorhandler*@param{string}message错误信息*@param{string}发生错误的源脚本URL*@param{number}lineno发生错误的行号*@param{number}colno发生错误的列号*@param{object}error错误对象*/functionerr(message,source,lineno,colno,error){...}window.onerror=errelement.onerror当一个资源(例如or
