reactjs - 如何在 React Native 中全局处理错误？

Question

我不是很清楚在react-native应用程序中能够全局处理错误的过程。如何根据它捕获任何应用程序错误和响应？例如，显示错误屏幕和“返回”按钮，或运行特定代码，如重试请求，以便用户可以从此类错误中恢复。 使用哪些方法来处理 react-native 中的全局错误？

Answer 1

错误边界 API 仅适用于类组件，如果您定义这些生命周期方法之一，类组件将成为错误边界 static getDerivedStateFromError() 或 componentDidCatch().

React-error-boundary是一个基于 React 错误边界 API 的简单可重用组件，它为您的组件提供了一个包装器并自动从子组件层次结构中捕获所有错误，并且还提供了一种恢复组件树的好方法。

我的建议是用 react-error-boundary 组件包裹应用程序中的每个导航屏幕，并提供回退组件以确保用户知道发生了什么，也许您可​​以通过重新渲染恢复屏幕。

最好的方法是创建一个 Errorhandler 组件，如下所示。

import * as React from "react";
import { ErrorBoundary } from "react-error-boundary";
import { View, StyleSheet, Button } from "react-native";
import { Text } from "components";
const myErrorHandler = (error: Error) => {
  // Do something with the error
  // E.g. reporting errorr using sentry ( see part 3)
};
function ErrorFallback({ resetErrorBoundary }) {
  return (
    <View style={[styles.container]}>
      <View>
        <Text> Something went wrong: </Text>
        <Button title="try Again" onPress={resetErrorBoundary} />
      </View>
    </View>
  );
}
export const ErrorHandler = ({ children }: { children: React.ReactNode }) => (
  <ErrorBoundary FallbackComponent={ErrorFallback} onError={myErrorHandler}>
    {children}
  </ErrorBoundary>
);
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column",
    alignItems: "stretch",
    justifyContent: "center",
    alignContent: "center",
    paddingHorizontal: 12,
  },
});

如您所见，我正在使用错误回退组件向用户提供更多信息，而不是白屏。

我还添加了一个重试按钮，以编程方式重新渲染屏幕，作为恢复屏幕和解决问题的一种方式。当用户单击重试按钮时，错误边界将触发屏幕组件的重新渲染，这有助于避免错误并显示正确的组件。

阅读更多关于 Error Recovery 的信息

另外，我还为每个可能抛出错误的组件包装了错误边界组件。

对于 JS 异常，错误边界是否足够？不幸的是，它不是，错误边界不会捕获以下错误:

• 事件处理程序
• 异步代码(例如 setTimeout 或 requestAnimationFrame 回调)
• 在错误边界本身(而不是它的 child )中抛出的错误

_{(来源:Docs)}

这些限制导致我们使用 react-native-exception-handler为 App 创建一个全局处理程序，可以捕获所有未捕获的 Js 错误。

react-native-exception-handler是一个 React Native 模块，可让您注册一个全局错误处理程序，以捕获致命/非致命的未捕获异常。

要使其正常工作，您需要安装并链接模块，然后为 Js 异常注册全局处理程序，如下所示:

import { setJSExceptionHandler } from "react-native-exception-handler";
setJSExceptionHandler((error, isFatal) => {
  // This is your custom global error handler
  // You do stuff like show an error dialog
  // or hit google analytics to track crashes
  // or hit a custom api to inform the dev team.
});

native 异常正如我已经提到的， native 异常是由 native 模块错误和内部 native react native 代码产生的。

根据我的经验，与 Js 相比，我们通常会遇到一些未捕获的 Native 异常，好消息是我们也将使用相同的库(react-native-exception-handler)来处理 native 异常，但你不能显示一个 JS 警告框或通过 JS 代码执行任何 UI 操作。唯一的解决方案是显示库提供的 native 警报，但如果您想自定义警报，则必须编写 native 代码。

要为 Native 异常创建全局处理程序，您只需使用 setNativeExceptionHandler 函数注册您的处理程序，如下所示:

import { setNativeExceptionHandler } from "react-native-exception-handler";
const exceptionhandler = (exceptionString) => {
  // your exception handler code here
};
setNativeExceptionHandler(
  exceptionhandler,
  forceAppQuit,
  executeDefaultHandler
);

跟踪异常在不跟踪异常的情况下处理异常是没有意义的，因为我们讨论的所有解决方案只会改善用户体验并向用户提供有关错误的更多信息，而不是白屏或应用程序崩溃。

Sentry是一个基于云的错误监控平台，可以帮助我们实时跟踪所有这些错误。通过创建一个免费帐户并安装 react-native-sentry，您可以在处理程序(js 和 Native)中使用它来使用 captureException 发送堆栈错误，如下所示:

// ErrorHandler.js
import * as Sentry from "@sentry/react-native";
const myErrorHandler = (error: Error) => {
  Sentry.captureException(error);
};

现在，确保修正你的错误。