前端异常捕获

2021-10-08 17:05:57 阅读：108 来源： 互联网

前端异常的分类

1. 语法错误 SyntaxError

触发场景：(1)变量名错误 (2)缺少括号
影响会影响页面加载，

var 1a; //(1)
console.log'hello'); //(2)

2.ReferenceError(引用错误)

触发场景：(1)引用不存在变量时发生错误 (2)将值分配给无法分配的对象

aaa; //(1)
this = 1; //(2)

3. RangeError(范围错误)

值超出有效范围时发生错误

new Array(-1);
(1234).toExponential(121);

4. TypeError(类型错误)

变量或参数不是预期类型时发生错误

new 123;
var obj = {};
obj.getA();

5. URIError(URI错误)

与URI相关函数参数不正确时发生错误，主要涉及
encodeURI()、
decodeURI()、
encodeURIComponent()、
decodeURIComponent()、
escape()和unescape()这六个函数。

decodeURI('%2')

6. EvalError(eval错误)

eval函数没有被正确执行，ES5中不再出现

7. 其他

Script error

页面中跨域引用脚本文件时，如果外部脚本中出现异常，在同源策略的限制下，本页面不能获取到报错信息，只能获取到 Script error 的信息。

Unexpected token

通常发生在缺少括号或分号时,或者其他
其他
资源加载失败，404错误

以上 7 中错误类型为JavaScript的标准错误类型

8. 根据业务需求自定义错误类型

resourceError

资源加载错误，目前只用于图片资源的加载失败、错误等错误

httpError

用于接口请求status非200，例如：500，404等等
接口请求 status为200，但是服务端业务异常，code码不为0

异常代码产生的结果

出错
页面呈现与预期不符，例如数据错误，界面错位，跳转至错误页面等，产品本身仍可使用
呆滞
页面操作没有反应，例如点击没有效果，提示成功没有进入后续操作。产品局部不可用
损坏
页面出现无法实现操作目的，例如点击不能进入目标页面。产品部分功能无法正常使用
假死
页面卡顿，无法对任何功能进行使用，例如某个遮罩层没有正确关闭导致无法对页面进行操作，用户无法正常登陆导致不能使用某功能。这类异常可能会导致用户退出应用
崩溃
经常出现自动退出、无法操作的现象，例如网页无法正常加载或者加载后无发进行任何操作。

JS捕获异常的方法

try…catch
只能捕获运行时异常，不能捕获到语法错误和异步错误
window.onerror
one rror是全局的，最好写在所有 JS 脚本的前面，如果写在后面，前面的js发生错误的话，不会被 one rror 捕获到。
另外 one rror 是无法捕获到网络异常的错误。
window.addEventListener(‘error’, fn, true)
第三个参数为true时，能捕获到js执行错误，也能捕获加载错误。
第三个参数为false时，能捕获到js执行错误，但不能捕获加载错误。
资源加载失败是不能通过冒泡到达window的，但在捕获阶段拿到，但是还是没有办法判断HTTP的状态。
另外，这个方法捕获不到 Promise 的错误。
unhandledrejection
unhandledrejection 是 Promise全局捕获异常事件。如果 Promise 没有写上 catch 函数，可以通过unhandledrejection进行捕获。
对于跨域资源的异常捕获
在引用js的script的标签上添加 crossOrigin，另外还需要在给后台的响应头中加上 Access-Control-Allow-Origin。
JSONP 跨域获取脚本文件执行，也可以用 crossOrigin的方法。
iframe中异常捕获
iframe与主站同域名，给iframe直接添加onerror事件，iframe是自己可控的，可以将异常抛给主站接收。具体可以看第二篇博客

异常上报

ajax上报
利用image对象上报
其他

定位异常位置：压缩的代码可以通过 sourcemap 进行定位。
信息量过多：设置采集率。

MVVM框架的的异常采集

vue 和 react 自身提供异常捕获，vue 框架通过 Vue.config.errorHandler 进行全局配置，

Vue.config.errorHandler = function (err, vm, info) {  
    console.error('抛出全局异常');  
    console.error(vm);  
    console.error(error);  
    // `info` 是 Vue 特定的错误信息，比如错误所在的生命周期钩子
    // 只在 2.2.0+ 可用
}

在React中，可以使用ErrorBoundary组件包括业务组件的方式进行异常捕获，配合React 16.0+新出的componentDidCatch API，可以实现统一的异常捕获和日志上报。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

标签：错误,捕获,error,加载,异常,前端,页面
来源： https://blog.csdn.net/zlj002/article/details/84063120

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9