什么是异常？这意味着用户在使用该应用程序时无法获得预期的结果。不同的异常有不同的后果，从引起用户的不满，到导致产品无法使用，导致用户失去对产品的认可。为什么我们需要处理异常来提升用户体验？远程定位问题无法重现，尤其是在移动端。各种原因可能是系统版本、型号等，前端的异常和异常有哪些？javascript异常（语法错误、代码错误）往往是静态的资源加载异常（img、js、css）不是语法和异步错误。1.同步操作错误try{kill;}catch(err){console.error('try:',err);}结果：try:ReferenceError:killisnotdefined2.无法捕获语法错误try{letname='1;}catch(err){console.error('try:',err);}结果：未终止的字符串常量编译器可以防止运行时语法错误。3.无法捕获异步错误result:UncaughtTypeError:Cannotreadproperty'map'ofundefinedwindow.onerror当发生JavaScript运行时错误（包括语法错误）时，window会触发ErrorEvent接口的error事件，执行window.onerror()函数，如果返回true,阻止执行默认事件处理程序。1.同步操作错误/***@param{String}message错误信息*@param{String}源错误文件*@param{Number}lineno行号*@param{Number}colno列号*@param{Object}error错误对象*/window.onerror=(message,source,lineno,colno,error)=>{console.error('Catchexception:',message,source,lineno,colno,error);returntrue;};kill;Result:Catchexception:UncaughtReferenceError:killisnotdefined2,cannotcatchsyntaxerror/***@param{String}message错误信息*@param{String}源错误文件*@param{Number}lineno行号*@param{Number}colno列号*@param{Object}error错误对象*/window.onerror=(message,source,lineno,colno,error)=>{console.error('Catchexception:',消息,来源,lineno,colno,错误);返回真；};让名字='1;结果：未终止的字符串常量编译器能够防止运行时语法错误。3.异步错误/***@param{String}message错误信息*@param{String}源错误文件*@param{Number}lineno行号*@param{Number}colno列号*@param{Object}错误错误对象*/window.onerror=(message,source,lineno,colno,error)=>{console.error('Catchexception:',message,source,lineno,colno,error);returntrue;};setTimeout(()=>{undefined.map(v=>v);},1000);结果：捕获异常：UncaughtTypeError:Cannotreadproperty'map'ofundefined\`window.addEventListener('error')作为资源（如![]()
或window.addEventListener('error',(err)=>{console.error('Catchexception:',err);},true);Result:catchexception:Event{isTrusted:true,type:"error",target:img,currentTarget:Window,eventPhase:1,...}window.addEventListener('unhandledrejection')当Promise被拒绝并且有没有rejecthandler，unhandledrejection事件被触发；这可能发生在window下，但也可能发生在Worker中。这对于调试回退错误处理很有用。window.addEventListener("unhandledrejection",(err)=>{err.preventDefault();console.error('捕获异常:',err);});Promise.reject('promise');结果：捕获异常：PromiseRejectionEvent{isTrusted:true,promise:Promise,reason:"promise",type:"unhandledrejection",target:Window,…}VueVue.config.errorHandler=(err,vm,info)=>{console.error('captureException:',err,vm,info);}ReactReact16提供了一个内置函数componentDidCatch，可以很简单的在React下获取错误信息。componentDidCatch(error,info){console.error('Exceptioncaught:',error,info);}但是，推荐的ErrorBoundaryUI中的JavaScript错误不应破坏整个应用程序。为了解决React用户的这个问题，React16引入了“错误边界”的新概念。创建一个新的ErrorBoundary.jsx组件：importReactfrom'react';import{Result,Button}from'antd';类ErrorBoundary扩展React.Component{constructor(props){super(props);this.state={hasError:false,info:''};}staticgetDerivedStateFromError(error){return{hasError:true};}componentDidCatch(error,info){this.setState({info:error+''});}render(){if(this.state.hasError){//你可以渲染任何自定义回退UIreturn(报告反馈}/>);}返回this.props.children;}}导出默认错误边界；使用：注意错误边界不会捕获错误：事件处理程序异步代码（例如setTimeout或requestAnimationFrame回调）在错误边界本身（而不是它的子iframe）中抛出的服务器端渲染错误由于浏览器设置的“同源策略”，iframe异常不能被非常优雅地处理，除了基本属性（例如它的宽度和高度），无法从iframeSentry是业界优秀的监控异常产品。作者还使用了这个产品，并提供了完整的文档。需要报告哪些信息？Errorid,userid,用户名,用户IP,设备错误信息,浏览器系统版本,应用版本,机型时间戳,异常级别(error,warning,info)异常上报1.ajax发送数据2.动态创建img标签if异常数据量大会导致服务器负载高，调整发送频率（可以考虑将异常信息存储在客户端，设置时间阈值，上报）或者设置采集速率（采集速率要设置根据实际情况，随机数，或者某些用户特征都是不错的选择）。流程图参考如何优雅地处理前端异常？ReactMDNVue博客欢迎关注我的博客
