zoukankan      html  css  js  c++  java
  • react项目中异常捕获处理

    方法一:react16以后的版本增加异常捕获

    componentDidCatch(error, info) {
        const isNewError = (error.toString() !== this.state.prevError.toString());// should only run once
        if (isNewError) {//判断两次错误不一致才再次执行,不然一直循环
          this.logErrorToMyService(error, info);
          this.setState({ prevError: error }); 
        }
      }
    

    方法二:使用window.onerror全局捕获异常

      window.onerror = function (errorMessage, scriptURI, lineNo, columnNo, error) {
         console.log('errorMessage: ' + errorMessage); // 异常信息
         console.log('scriptURI: ' + scriptURI); // 异常文件路径
         console.log('lineNo: ' + lineNo); // 异常行号
         console.log('columnNo: ' + columnNo); // 异常列号
         console.log('error: ' + error); // 异常堆栈信息
       };
    

    方法三:使用try catch捕获

    在每个方法内进行捕获,对所有的字段进行校验

    let optionfloor = null;
    try { 
        optionfloor = (
          floorList ? floorList.map((item) => {
            return <Option key={item.id} value={item.id}>{item.name}</Option>
          }) : null
        )
      } catch (e) {
        optionfloor = null;
        
      }

    总结:项目内进行的异常判断少之又少,这是很危险的行为,每次接口出现的数据不符合预期都会出现空白页崩的现象。在未来的项目内,异常判断也要加入规范内,是项目很重要的一个组成部分,最起码的全局有异常捕获,其次每个具体的页面内判断字段是否存在,类型是否正确。

  • 相关阅读:
    函数指针与函数声明
    long和int的区别
    pthread_create传递参数
    C语言中的static 详细分析
    linux 读写锁应用实例
    linux使用读写锁pthread_rwlock_t
    linux的<pthread.h>
    时间:UTC时间、GMT时间、本地时间、Unix时间戳
    等号赋值与memcpy的效率问题
    单链表带头结点&不带头结点
  • 原文地址:https://www.cnblogs.com/yuanyuan0809/p/9707456.html
Copyright © 2011-2022 走看看