react取消捕获_react取消捕获_react中的错误处理

解决的两个问题

收集错误

自定义事件实现try...catch错误捕获功能同时增加Pause on exceptions功能

react\packages\shared\ReactErrorUtils.js

用于存储错误以及是否发生错误的状态

// Used by Fiber to simulate a try-catch.

let hasError: boolean = false;

let caughtError: mixed = null;

复制代码

需要重新抛出的错误以及重新抛出的状态

// Used by event system to capture/rethrow the first error.

let hasRethrowError: boolean = false;

let rethrowError: mixed = null;

复制代码

reporter对象上的onError方法提供一个借口改变错误的状态以及存储捕获到的错误对象

const reporter = {

onError(error: mixed) {

hasError = true;

caughtError = error;

},

};

复制代码

错误系统入口函数，用于捕获第一个错误

对invokeGuardedCallback的封装，当执行完invokeGuardedCallback之后，通过hasError判断是否发生了错误，并调用clearCaughtError返回错误对象，并清空hasError、caughtError。然后将返回的错误存储到rethrowError，并改变hasRethrowError的状态。

function invokeGuardedCallbackAndCatchFirstError(name,func,context,a,b,c,d,e,f) {

invokeGuardedCallback.apply(this, arguments);

if (hasError) {

const error = clearCaughtError();

if (!hasRethrowError) {

hasRethrowError = true;

rethrowError = error;

}

}

}

export function clearCaughtError() {

if (h