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