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;
    
  }

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