ReactNative錯誤采集原理在Android中實現詳解
引言
當我們開發程序的時,經常會出現一些錯誤情況,我們通常用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錯誤率,改善程序穩定性
以上就是ReactNative錯誤采集原理在Android中實現詳解的詳細內容,更多關於Android ReactNative錯誤采集的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- JS中的Error對象及使用JSON.stringify()序列化Error問題
- JavaScript高級之自定義異常
- JavaScript中異步與回調的基本概念及回調地獄現象
- C# 語言入門基礎介紹
- JavaScript錯誤處理機制全面分析講解