当前位置: 首页 > Web前端 > vue.js

前端异常如何处理

时间:2023-03-31 20:09:19 vue.js

错误类型数据错误类型主要是前端运行时报错。Javascript原生提供了Error构造函数,所有抛出的错误都是它的实例。Error实例对象具有以下属性。属性描述消息错误提示信息名称错误名称堆栈错误堆栈异常一般可以分为很多种,从影响本地进程问题到严重影响页面崩溃甚至白屏SyntaxError:语法错误TypeError:类型错误RangeError:范围错误ReferenceError:引用错误EvalError:evalerrorURIError:URLerrorAggregateError:Multipleerrors(featureinexperiment)Failedtoloadresource:资源加载错误SyntaxError当Javascript语言解析代码时,Javascript引擎SyntaxError在tokens或tokenorder做的时候抛出发现不符合语法规范。也可以手动抛出,语法如下newSyntaxError([message[,fileName[,lineNumber]]])TypeError当传入函数的操作数或参数时抛出TypeError当类型不是操作符期望的时候抛出或功能。也可以手动抛出,语法如下newTypeError([message[,fileName[,lineNumber]]])RangeError当试图将数字参数传递给不包含范围内的数字的函数时,将抛出RangeError.将非法长度值作为Array构造函数的参数传递以创建数组时,或将不正确的值传递给数值计算方法(Number.toExponential()、Number.toFixed()、Number.toPrecision())时,会出现RangeError会发生。.也可以手动抛出,语法如下newRangeError([message[,fileName[,lineNumber]]])ReferenceError当你试图引用一个未定义的变量时,会抛出一个ReferenceError。也可以手动抛出,语法如下newReferenceError([message[,fileName[,lineNumber]]])EvalError这个对象表示一个关于eval函数的错误。这个异常将不再被JavaScript抛出,但是EvalError对象保持兼容也可以手动抛出,语法如下newEvalError([message[,fileName[,lineNumber]]])URIError当传递了一个无效的URI时给全局URI处理函数,会抛出URIError。也可以手动抛出,语法如下newURIError([message[,fileName[,lineNumber]]])AggregateError当操作需要上报多个错误时抛出AggregateError,例如通过Promise.any(),传递给它的AllPromisesreject.也可以手动抛出,语法如下newAggregateError(errors[,message])Failedtoloadresource以下标签加载资源失败,,,)加载失败时,加载该资源的元素会触发Event接口的error事件,并对该元素执行onerror()处理函数。这些错误事件不会冒泡到窗口,但(至少在Firefox中)可以被单个window.addEventListener捕获。window.onerror=function(message,source,lineno,colno,error){...}函数参数:message:错误信息(字符串)。可用于HTMLonerror=""处理程序中的事件。source:发生错误的脚本的URL(string)lineno:发生错误的行号(number)colno:发生错误的列号(number)error:错误对象(object)如果这个函数返回true,它会阻止默认事件处理函数的执行。1、同步异常捕获window.onerror=function(message,source,lineno,colno,error){console.log('Exceptioncaught:',{message,source,lineno,colno,error});}2、异步异常capturewindow.onerror=function(message,source,lineno,colno,error){console.log('异常捕获:',{message,source,lineno,colno,error});}newPromise(resolve=>{setTimeout(()=>{resolve(a)},1000)}).catch(err=>{console.log('catch:',err)})3、也抓不到语法错误window.onerror=function(message,source,lineno,colno,error){console.log('Exceptioncaught:',{message,source,lineno,colno,error});}str='//UncaughtSyntaxError:无效或意外的令牌窗口。addEventListener和window.onerror类似,只是捕获的参数不同,window.addEventListener也可以捕获加载资源失败的异常window.addEventListener('error',(error)=>{console.log('Exceptioncaught:',error);},true)1、同步异常捕获window.addEventListener('error',(error)=>{console.log('caughtexception:',error);},true)a2、异步异常捕获窗口。addEventListener('错误',(错误)=>{console.log('Exceptioncaught:',error);},true)newPromise(resolve=>{setTimeout(()=>{resolve(a)},1000)}).catch(err=>{console.log('catch:',err)})3、也不能捕获语法错误window.addEventListener('error',(error)=>{console.log('Catchexception:',error);},true)str='//UncaughtSyntaxError:Invalidorunexpectedtoken4,资源加载失败window.addEventListener('error',(error)=>{console.log('异常捕获:',error);},true)