引言
当咱们开发程序的时，常常会呈现一些过错状况，咱们通常用Error类来反映过错内容，如网络中有HttpError，数据库中DbError等等，这些过错的搜集和剖析对程序改善尤为重要
在ReactNative（后续简称RN）中也有过错，RN是依据React开发的跨渠道开发结构，代码采用JS完成，所以本文在介绍RN过错搜集之前先介绍JS中常见的过错，再经过源码来剖析RN过错搜集原理，终究介绍RN过错兜底计划，为后续RN在事务实践中做好理论根底，协助改善程序稳定性
1 JS过错
1.1 Error
Error是过错基类，其他过错承继自Error，Error目标有两个首要属性，name和message
new Error(message)
1.2 常见的过错
SyntaxError：语法过错
语法过错是一种常见的过错，在一切编程言语中都存在，表示不符合编程言语标准。
一类是词法、语法剖析转化生成语法树时产生，此类反常一旦产生，导致整个js文件无法履行，而其他反常产生在代码运行时，在过错呈现的那一行之前的代码不受影响
const 1xx; // SyntaxError
另一类是运行中呈现的语法过错，如开发中常见的json解析过错，参数传入非标准json字符
JSON.parse('') // SyntaxError: Unexpected end of JSON input
ReferenceError：引证过错
引证了一个不能存在的变量，变量未声明就引证了
const a = xxx; // ReferenceError: xxx is not defined
TypeError：类型过错
变量或参数不是有效类型
1() // TypeError: 1 is not a function
const a = new 111() // TypeError: 111 is not a constructor
RangeError：鸿沟过错
超出有效规模时产生反常，常见的是数组长度超出规模
[].length = -1 // RangeError: Invalid array length
URIError：URI过错
调用URI相关函数中呈现，包含encodeURI、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()
decodeURI('%') // URIError: URI malformed
1.3 自界说过错
咱们能够承继Error类，完成自界说的过错
class MyError extends Error {
constructor(message) {
super(message);
this.name = 'MyError';
}
}
function() {
throw new MyError('error message'); // MyError: error message
}
2 RN过错处理
RN过错处理包含JS和native两部分，由JS捕获，抛给Native处理
2.1 JS部分
2.1.1 MessageQueue
Native和JS通讯的音讯行列, 担任Native和JS通讯, 包含烘托、交互、各种互相调用等。一切的通讯都会经过_guard函数处理，在_guard中会被try-catch住，呈现反常后调用ErrorUtils处理
__guard(fn: () => void) {
if (this.__shouldPauseOnThrow()) {
fn();
} else {
try {
fn();
} catch (error) {
ErrorUtils.reportFatalError(error); // 捕获反常，交给ErrorUtils
}
}
}
注：react-native/Libraries/BatchedBridge/MessageQueue.js
2.1.2 ErrorUtils
ErrorUtils用于处理RN中一切的反常，它对暴露反常处理阻拦接口
反常上报
收到反常后调用_globalHandler处理反常
// 处理非fatal反常
reportError(error: mixed): void {
_globalHandler && _globalHandler(error, false);
},
// 处理fatal反常
reportFatalError(error: mixed): void {
_globalHandler && _globalHandler(error, true);
},
反常处理
一切反常经过_globalHandle函数处理，默许状况下_globalHandler会直接将过错抛出，ErrorUtils对外供给了setGlobalHanlder做过错阻拦处理，RN重写_globalHandler来做过错搜集和处理
let _globalHandler: ErrorHandler = function onError(
e: mixed,
isFatal: boolean,
) {
throw e;
};
setGlobalHandler(fun: ErrorHandler): void {
_globalHandler = fun;
},
getGlobalHandler(): ErrorHandler {
return _globalHandler;
},
注：react-native/Libraries/polyfills/error-guard.js
2.1.3 ExceptionsManager
ExceptionsManager是RN中反常管理模块，担任红屏处理、console.error、并将反常传给Native侧
反常处理器设置
- 调用ErrorUtils.setGlobalHandler，把过错处理完成交给ExceptionsManager.handleException
- console.error处理：调用ExceptionsManager.installConsoleErrorReporter重写console.error
const ExceptionsManager = require('./ExceptionsManager');
// Set up console.error handler
ExceptionsManager.installConsoleErrorReporter();
// Set up error handler
if (!global.__fbDisableExceptionsManager) {
const handleError = (e, isFatal) => {
try {
ExceptionsManager.handleException(e, isFatal);
} catch (ee) {
console.log('Failed to print error: ', ee.message);
throw e;
}
};
const ErrorUtils = require('../vendor/core/ErrorUtils');
ErrorUtils.setGlobalHandler(handleError);
}
注：react-native/Libraries/Core/setUpErrorHandling.js
ExceptionsManager处理反常
- 构建Error：假如过错不是Error类型，结构一个SyntheticError，便利日志输出和展现
function handleException(e: mixed, isFatal: boolean) {
let error: Error;
if (e instanceof Error) {
error = e;
} else {
error = new SyntheticError(e);
}
reportException(error, isFatal);
}
- 调用过错处理
function reportException(e: ExtendedError, isFatal: boolean) {
const NativeExceptionsManager = require('./NativeExceptionsManager').default;
if (NativeExceptionsManager) {
// 解析过错，获取过错信息、堆栈
const parseErrorStack = require('./Devtools/parseErrorStack');
const stack = parseErrorStack(e);
const currentExceptionID = ++exceptionID;
const originalMessage = e.message || '';
let message = originalMessage;
if (e.componentStack != null) {
message += `\n\nThis error is located at:${e.componentStack}`;
}
const namePrefix = e.name == null || e.name === '' ? '' : `${e.name}: `;
const isFromConsoleError = e.name === 'console.error';
if (!message.startsWith(namePrefix)) {
message = namePrefix + message;
}
// 假如是console.error则输出
if (!isFromConsoleError) {
if (console._errorOriginal) {
console._errorOriginal(message);
} else {
console.error(message);
}
}
message =
e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
// 按捺（不展现）红屏，不展现native红屏弹窗，forceRedbox默许为false
const isHandledByLogBox =
e.forceRedbox !== true && global.__unstable_isLogBoxEnabled === true;
const data = preprocessException({
message,
originalMessage: message === originalMessage ? null : originalMessage,
name: e.name == null || e.name === '' ? null : e.name,
componentStack:
typeof e.componentStack === 'string' ? e.componentStack : null,
stack,
id: currentExceptionID,
isFatal,
extraData: {
jsEngine: e.jsEngine,
rawStack: e.stack,
// Hack to hide native redboxes when in the LogBox experiment.
// This is intentionally untyped and stuffed here, because it is temporary.
suppressRedBox: isHandledByLogBox,
},
});
// 假如按捺native红屏，展现JS红屏提示过错
if (isHandledByLogBox) {
LogBoxData.addException({
...data,
isComponentError: !!e.isComponentError,
});
}
// 把调用NativeExceptionsManager上报给native
NativeExceptionsManager.reportException(data);
}
}
- NativeExceptionsManager调用native模块上报过错
// Native导出类，以Android为例，对应ExceptionsManagerModule.java
const NativeModule = TurboModuleRegistry.getEnforcing<Spec>(
'ExceptionsManager',
);
const ExceptionsManager{
// 判别是否是fatal调用不同函数上报
reportException(data: ExceptionData): void {
if (data.isFatal) {
ExceptionsManager.reportFatalException(data.message, data.stack, data.id);
} else {
ExceptionsManager.reportSoftException(data.message, data.stack, data.id);
}
},
// 上报fatal反常
reportFatalException(
message: string,
stack: Array<StackFrame>,
exceptionId: number,
) {
NativeModule.reportFatalException(message, stack, exceptionId);
},
// 上报soft反常
reportSoftException(
message: string,
stack: Array<StackFrame>,
exceptionId: number,
) {
NativeModule.reportSoftException(message, stack, exceptionId);
},
// Android供给封闭红屏函数
dismissRedbox(): void {
if (Platform.OS !== 'ios' && NativeModule.dismissRedbox) {
// TODO(T53311281): This is a noop on iOS now. Implement it.
NativeModule.dismissRedbox();
}
},
}
console.error处理
上述提到调用ExceptionsManager.installConsoleErrorReporter处理console.error，处理成非fatal反常
function installConsoleErrorReporter() {
// 假如设置过，return
if (console._errorOriginal) {
return; // already installed
}
console._errorOriginal = console.error.bind(console);
// 设置console.error处理函数
console.error = reactConsoleErrorHandler;
if (console.reportErrorsAsExceptions === undefined) {
console.reportErrorsAsExceptions = true;
}
}
// console.error处理函数，终究调用reportException上报成非fatal反常
function reactConsoleErrorHandler() {
if (arguments[0] && arguments[0].stack) {
// 上报
reportException(arguments[0], /* isFatal */ false);
} else {
// 结构一个SyntheticError
const stringifySafe = require('../Utilities/stringifySafe');
const str = Array.prototype.map
.call(arguments, value =>
typeof value === 'string' ? value : stringifySafe(value),
)
.join(' ');
const error: ExtendedError = new SyntheticError(str);
error.name = 'console.error';
// 上报
reportException(error, /* isFatal */ false);
}
}
注：react-native/Libraries/Core/ExceptionsManager.js
注：跟进上述源码可知，红屏是经过isHandledByLogBox参数能够制止native红屏弹窗，isHandledByLogBox是经过global.__unstable_isLogBoxEnabled操控，能够经过下面办法制止native红屏展现，但是仍是会展现js红屏来提示过错
global.__unstable_isLogBoxEnabled = true;
YellowBox.__unstable_enableLogBox(); // 内部调用了上面的代码
2.2 Native部分
2.2.1 ExceptionsManagerModule
上面讲述了JS处理反常后将反常抛给native处理，ExceptionsManagerModule是native处理反常模块，导出给JS类名为ExceptionsManager
ExceptionsManagerModule反常处理
// 上报fatal反常
@ReactMethod
public void reportFatalException(String message, ReadableArray stack, int id) {
JavaOnlyMap data = new JavaOnlyMap();
data.putString("message", message);
data.putArray("stack", stack);
data.putInt("id", id);
data.putBoolean("isFatal", true);
reportException(data);
}
// 上报soft反常
@ReactMethod
public void reportSoftException(String message, ReadableArray stack, int id) {
JavaOnlyMap data = new JavaOnlyMap();
data.putString("message", message);
data.putArray("stack", stack);
data.putInt("id", id);
data.putBoolean("isFatal", false);
reportException(data);
}
// 终究调用reportException
@ReactMethod
public void reportException(ReadableMap data) {
// 过错堆栈
String message = data.hasKey("message") ? data.getString("message") : "";
ReadableArray stack = data.hasKey("stack") ? data.getArray("stack") : Arguments.createArray();
int id = data.hasKey("id") ? data.getInt("id") : -1;
boolean isFatal = data.hasKey("isFatal") ? data.getBoolean("isFatal") : false;
// dev模式，展现红屏dialog
if (mDevSupportManager.getDevSupportEnabled()) {
// 获取是否按捺红屏参数，对应js侧传入的isHandledByLogBox
boolean suppressRedBox = false;
if (data.getMap("extraData") != null && data.getMap("extraData").hasKey("suppressRedBox")) {
suppressRedBox = data.getMap("extraData").getBoolean("suppressRedBox");
}
if (!suppressRedBox) {
mDevSupportManager.showNewJSError(message, stack, id); // 显现红屏弹窗
}
} else {
// fatal抛出JavascriptException反常，非fatal打印出来
if (isFatal) {
throw new JavascriptException(jsStackTrace)
.setExtraDataAsJson(extraDataAsJson);
} else {
logException(jsStackTrace, extraDataAsJson);
}
}
}
@ReactMethod
public void dismissRedbox() {
if (mDevSupportManager.getDevSupportEnabled()) {
mDevSupportManager.hideRedboxDialog();
}
}
// 上报soft反常
- (void)reportSoft: (NSString *)message stack:(NSArray<NSDictionary *> *)stack exceptionId:(double)exceptionId suppressRedBox: (BOOL) suppressRedBox {
if (!suppressRedBox) {
[_bridge.redBox showErrorMessage:message withStack:stack errorCookie:((int)exceptionId)];
}
if (_delegate) {
[_delegate handleSoftJSExceptionWithMessage:message stack:stack exceptionId:[NSNumber numberWithDouble:exceptionId]];
}
}
// 上报fatal反常
- (void)reportFatal: (NSString *)message stack:(NSArray<NSDictionary *> *)stack exceptionId:(double)exceptionId suppressRedBox: (BOOL) suppressRedBox {
if (!suppressRedBox) {
[_bridge.redBox showErrorMessage:message withStack:stack errorCookie:((int)exceptionId)];
}
if (_delegate) {
[_delegate handleFatalJSExceptionWithMessage:message stack:stack exceptionId:[NSNumber numberWithDouble:exceptionId]];
}
static NSUInteger reloadRetries = 0;
if (!RCT_DEBUG && reloadRetries < _maxReloadAttempts) {
reloadRetries++;
RCTTriggerReloadCommandListeners(@"JS Crash Reload");
} else if (!RCT_DEV || !suppressRedBox) {
NSString *description = [@"Unhandled JS Exception: " stringByAppendingString:message];
NSDictionary *errorInfo = @{ NSLocalizedDescriptionKey: description, RCTJSStackTraceKey: stack };
RCTFatal([NSError errorWithDomain:RCTErrorDomain code:0 userInfo:errorInfo]);
}
}
// reportException
RCT_EXPORT_METHOD(reportException:(JS::NativeExceptionsManager::ExceptionData &)data)
{
NSString *message = data.message();
double exceptionId = data.id_();
id<NSObject> extraData = data.extraData();
// Reserialize data.stack() into an array of untyped dictionaries.
// TODO: (moti) T53588496 Replace `(NSArray<NSDictionary *> *)stack` in
// reportFatalException etc with a typed interface.
NSMutableArray<NSDictionary *> *stackArray = [NSMutableArray<NSDictionary *> new];
for (auto frame: data.stack()) {
NSMutableDictionary * frameDict = [NSMutableDictionary new];
if (frame.column().hasValue()) {
frameDict[@"column"] = @(frame.column().value());
}
frameDict[@"file"] = frame.file();
if (frame.lineNumber().hasValue()) {
frameDict[@"lineNumber"] = @(frame.lineNumber().value());
}
frameDict[@"methodName"] = frame.methodName();
if (frame.collapse().hasValue()) {
frameDict[@"collapse"] = @(frame.collapse().value());
}
[stackArray addObject:frameDict];
}
NSDictionary *dict = (NSDictionary *)extraData;
BOOL suppressRedBox = [[dict objectForKey:@"suppressRedBox"] boolValue];
if (data.isFatal()) {
[self reportFatal:message stack:stackArray exceptionId:exceptionId suppressRedBox:suppressRedBox];
} else {
[self reportSoft:message stack:stackArray exceptionId:exceptionId suppressRedBox:suppressRedBox];
}
}
问题：fatal过错抛出反常后为什么运用为什么没有退出呢？
DevSupportManager处理红屏
@Override
public void showNewJavaError(@Nullable String message, Throwable e) {
FLog.e(ReactConstants.TAG, "Exception in native call", e);
showNewError(
message, StackTraceHelper.convertJavaStackTrace(e), JAVA_ERROR_COOKIE, ErrorType.NATIVE);
}
// 展现红屏弹窗
private void showNewError(
@Nullable final String message,
final StackFrame[] stack,
final int errorCookie,
final ErrorType errorType) {
UiThreadUtil.runOnUiThread(
new Runnable() {
@Override
public void run() {
if (mRedBoxDialog == null) {
Activity context = mReactInstanceManagerHelper.getCurrentActivity();
mRedBoxDialog = new RedBoxDialog(context, DevSupportManagerImpl.this, mRedBoxHandler);
}
if (mRedBoxDialog.isShowing()) {
return;
}
Pair<String, StackFrame[]> errorInfo = processErrorCustomizers(Pair.create(message, stack));
mRedBoxDialog.setExceptionDetails(errorInfo.first, errorInfo.second);
mRedBoxDialog.resetReporting();
mRedBoxDialog.show();
}
});
}
2.2.2 线程反常捕获（Android）
Handle捕获反常
RN引擎创立的时分会初始化三个线程，UiThread、NativeModulesThread、JSThread，这些线程经过MessageQueueThreadHandler处理音讯行列，MessageQueueThreadHandler重写了Handle的dispatchMessage函数，函数经过try-catch包裹避免运用直接退出，呈现反常时调用QueueThreadExceptionHandler处理（引擎完成此接口），这儿能阻拦一切的反常，包含上述js捕获传到native手动抛出的、yoga布局进程中的等等
public class MessageQueueThreadHandler extends Handler {
private final QueueThreadExceptionHandler mExceptionHandler;
public MessageQueueThreadHandler(Looper looper, QueueThreadExceptionHandler exceptionHandler) {
super(looper);
mExceptionHandler = exceptionHandler;
}
@Override
public void dispatchMessage(Message msg) {
try {
super.dispatchMessage(msg);
} catch (Exception e) {
mExceptionHandler.handleException(e);
}
}
}
引擎处理反常
在引擎（CatalystInstanceImpl）的内部类NativeExceptionHandler中，完成了QueueThreadExceptionHandler接口，在引擎创立时初始化，呈现反常时调用NativeModuleCallExceptionHandler处理，并毁掉引擎
// 内部类完成QueueThreadExceptionHandler，叫反常交给引擎的onNativeException处理
private static class NativeExceptionHandler implements QueueThreadExceptionHandler {
@Override
public void handleException(Exception e) {
if (ReactFeatureFlags.enableCatalystCleanupFix) {
CatalystInstanceImpl catalystInstance = mCatalystInstanceImplWeak.get();
if (catalystInstance != null) {
catalystInstance.onNativeException(e);
}
} else {
mCatalystInstanceImpl.onNativeException(e);
}
}
}
// 调用NativeModuleCallExceptionHandler处理反常，并毁掉引擎
private void onNativeException(Exception e) {
mHasNativeError.set(true);
boolean isAlive = !mDestroyed;
if (isAlive) {
mNativeModuleCallExceptionHandler.handleException(e);
}
mReactQueueConfiguration
.getUIQueueThread()
.runOnQueue(
new Runnable() {
@Override
public void run() {
// 毁掉引擎
destroy(() -> {
if (mDestroyFinishedCallback != null) {
mDestroyFinishedCallback.onDestroyFinished();
mDestroyFinishedCallback = null;
}
});
}
});
}
注：com.facebook.react.bridge.CatalystInstanceImpl（引擎完成类）
2.2.3 终究的反常处理
默许处理办法
上述讲到引擎捕获反常后会调用NativeModuleCallExceptionHandler.handleException处理，它是个接口，引擎供给了默许完成类，默许完成类收到反常后是直接抛出，会导致运用退出
public interface NativeModuleCallExceptionHandler {
/** Do something to display or log the exception. */
void handleException(Exception e);
void handleCaughtException(Exception e);
}
// 默许完成类
public class DefaultNativeModuleCallExceptionHandler implements NativeModuleCallExceptionHandler {
@Override
public void handleException(Exception e) {
if (e instanceof RuntimeException) {
// Because we are rethrowing the original exception, the original stacktrace will be
// preserved.
throw (RuntimeException) e;
} else {
throw new RuntimeException(e);
}
}
@Override
public void handleCaughtException(Exception e) {
e.printStackTrace();
}
}
自界说反常处理
为了避免默许处理办法将反常直接抛出导致crash，事务能够完成自界说的NativeModuleCallExceptionHandler接口来处理反常，将反常上报，并展现过错兜底页面
3 全体流程
依据上述源码解析可知，RN过错搜集流程由JS侧中MessageQueue主张，经过一系列处理和封装，传到native侧，再经过native一系列转发，终究交给由引擎（CatalyInstanceImple）处理，全体流程如下图所示
4 过错兜底
页面呈现反常后，对反常状态兜底是一种保障线上质量的惯例手法。当页面产生严峻 JS 过错（FatalError）时，会展现过错页面无法持续运用。这种办法在一些事务场景下并不友好。比方：页面上某一个次要模块产生反常，并不影响中心功能的运用，这种状况下展现犯错页面有些不必要
React 16 中引进了一个新概念——过错鸿沟（Error Boundaries）。过错鸿沟是一种 React 组件，这种组件能够捕获并打印产生在其子组件树任何方位的 JavaScript 过错，而且它会烘托出备用 UI，而不是烘托那些溃散了的子组件树。过错鸿沟能在烘托期间、生命周期办法和整个组件树的结构函数中捕获过错
依据这个特性，事务能够自界说操控接收到JSError的行为，能更高雅地处理过错兜底及展现
4.1 什么是过错鸿沟
4.1.1 概念
过错鸿沟是一种 React 组件，这种组件能够捕获并打印产生在其子组件树任何方位的 JS 过错，而且它会烘托出备用 UI，而不是烘托那些溃散了的子组件树。过错鸿沟能在烘托期间、生命周期办法和整个组件树的结构函数中捕获过错
4.1.2 过错鸿沟的关键模块
过错鸿沟是经过 try-catch 办法捕获反常的，它在哪里进行捕获反常的呢？React 有三个重要组成模块，过错鸿沟在 Reconciliation 中对反常进行捕获。
-
React根底模块（这个模块界说了React的根底API及组件相关内容。对应咱们开发页面时引进的 ‘react’ 模块）
-
烘托模块（这个模块对于不同类型的运用，采用不同的烘托办法。对应咱们开发页面时引进的 ‘react-dom’ 模块）
-
Reconciliation 模块（又名“和谐模块”，这个模块是上面两个模块的根底，首要担任使命和谐、生命周期函数管理等）
4.1.3 Reconciliation介绍
Reconciliation模块是React三个重要模块之一，又名“和谐模块”，这个模块是上面两个模块的根底，首要担任使命和谐、生命周期函数管理等，它分为render和commit两个阶段
- render阶段：简略来说便是找到需要更新的工作，经过 Diff Fiber Tree 找出要做的更新工作，这是一个js核算进程，核算结果能够被缓存，核算进程能够被打断，也能够康复履行。
- commit阶段：提交更新并调用对应烘托模块（react-dom）进行烘托，为了避免页面颤动，该进程是同步且不能被打断
// Reconciliation阶段开始，render阶段，performSyncWorkOnRoot（同步更新）、performConcurrentWorkOnRoot（异步）
function performSyncWorkOnRoot(root) {
do {
try {
workLoopSync();
break;
} catch (thrownValue) {
handleError(root, thrownValue);
}
} while (true);
}
function handleError(root, thrownValue) {
do {
try {
throwException(
root,
workInProgress.return,
workInProgress,
thrownValue,
renderExpirationTime
);
workInProgress = completeUnitOfWork(workInProgress);
} catch (yetAnotherThrownValue)
thrownValue = yetAnotherThrownValue;
continue;
} // Return to the normal work loop.
return;
} while (true);
}
function throwException(
root,
returnFiber,
sourceFiber,
value,
renderExpirationTime
) {
case ClassComponent:
var _update2 = createClassErrorUpdate(
workInProgress,
errorInfo,
renderExpirationTime
);
enqueueCapturedUpdate(workInProgress, _update2);
return;
}
}
function createClassErrorUpdate(fiber, errorInfo, expirationTime) {
var update = createUpdate(expirationTime, null);
update.tag = CaptureUpdate;
var getDerivedStateFromError = fiber.type.getDerivedStateFromError;
if (typeof getDerivedStateFromError === "function") {
var error = errorInfo.value;
update.payload = function() {
logError(fiber, errorInfo);
return getDerivedStateFromError(error);
};
}
var inst = fiber.stateNode;
if (inst !== null && typeof inst.componentDidCatch === "function") {
update.callback = function callback() {
{
markFailedErrorBoundaryForHotReloading(fiber);
}
if (typeof getDerivedStateFromError !== "function") {
markLegacyErrorBoundaryAsFailed(this); // Only log here if componentDidCatch is the only error boundary method defined
logError(fiber, errorInfo);
}
var error = errorInfo.value;
var stack = errorInfo.stack;
this.componentDidCatch(error, {
componentStack: stack !== null ? stack : ""
});
{
if (typeof getDerivedStateFromError !== "function") {
!(fiber.expirationTime === Sync)
? warningWithoutStack$1(
false,
"%s: Error boundaries should implement getDerivedStateFromError(). " +
"In that method, return a state update to display an error message or fallback UI.",
getComponentName(fiber.type) || "Unknown"
)
: void 0;
}
}
};
} else {
update.callback = function() {
markFailedErrorBoundaryForHotReloading(fiber);
};
}
return update;
}
注：源码react-native/Libraries/Renderer/ReactFabric-dev.js
过错鸿沟不支持hooks组件，因为过错鸿沟的完成借助了this.setState能够传递callback的特性，useState无法传入回调，所以无法完全对标
4.2 过错鸿沟的运用
4.2.1 如何界说一个过错鸿沟
前面提到过错鸿沟捕获反常之后会交给特定的办法处理，假如一个组件重写了特定的办法，这个组件便是一个过错鸿沟组件。
界说：假如一个类组件界说了生命周期办法中的任何一个（或两个）static getDerivedStateFromError() 或 componentDidCatch()，那么它就成了一个过错鸿沟。 运用static getDerivedStateFromError()在抛出过错后烘托回退UI。 运用 componentDidCatch() 来记载过错信息。如下：
export class ErrorBoundary extends Component<IProps, IState> {
constructor(props) {
super(props);
this.state = {
hasError: false
};
}
/**
* 捕获反常，展现兜底控件。
* @param _error
*/
static getDerivedStateFromError(_error) {
return {
hasError: true
};
}
/**
*
* @param error 过错信息
*/
componentDidCatch(error: Error) {
// 上报过错
}
render() {
if (this.state.hasError) {
return <Text style={style.errorDesc}>犯错了</Text>;
}
return this.props.children;
}
}
4.2.2 如何运用过错鸿沟
即将捕获的组件用过错鸿沟组件包裹
export default class Example extends PureComponent<Props, State> {
render() {
return <View style={ styles.container }>
<ErrorBoundary>
{
this.renderErrorBlock()
}
</ErrorBoundary>
<Text style={ styles.other }>other block</Text>
</View>;
}
renderErrorBlock = () => {
return <View style={ styles.errorBoundary }>
'' && <Text style={ styles.error }>error block</Text>
</View>;
}
}
4.3 适用规模
4.3.1 过错鸿沟不能捕获哪些反常
-
事情处理：点击事情
-
异步代码：setTimeout 或 requestAnimationFrame 回调函数等
-
过错鸿沟本身抛出的过错
4.3.2 主张运用场景
- 将影响全体页面展现逻辑的模块运用过错鸿沟包裹并设置宽高，避免其他模块核算犯错
- 将非中心模块包裹，保障在非中心模块犯错时中心模块展现不受影响
- 包裹外部依赖的组件，避免意外的过错
- 包裹独立展现模块，如广告，活动弹窗等
5 总结
以上便是本文全部内容，介绍了ReactNative过错搜集原理及在Android中完成解析，后续在事务实践进程中，咱们能够依据上述剖析，在JS侧经过过错鸿沟来下降特定场景下的过错对事务的影响，并在native侧做好呈现反常时兜底，来提高页面稳定性和用户体会，一起对过错统一搜集，计算JS过错率，改善程序稳定性
hi, 我是快手电商的xjb
快手电商无线技术团队正在招贤纳士! 咱们是公司的中心事务线, 这儿云集了各路高手, 也充满了机会与应战. 伴随着事务的高速发展, 团队也在快速扩张. 欢迎各位高手参加咱们, 一起发明世界级的电商产品~
热招岗位: Android/iOS 高级开发, Android/iOS 专家, Java 架构师, 产品经理(电商背景), 测试开发… 很多 HC 等你来呦~
内部推荐请发简历至 >>>我的邮箱: hr.ec@kuaishou.com <<<, 补白成功率更高哦~
