React Native 应用程序（android、ios）的全局错误处理程序

Question

我正在尝试为 react 本机插件创建全局处理程序，或者至少在应用程序级别，在 TypeScript 中捕获所有未处理的异常并记录它们。

我使用的是 React Native 0.74.x 版本。

我找到了包react-native-exception-handler。但这是 3 年前最后更新的，并且不再维护了。

我还发现了错误边界的概念，但看起来这个解决方案对我不起作用。

ErrorBoundary 类

import React, { Component, type ErrorInfo } from 'react';
import { Text } from 'react-native';

interface Props {
  children: React.ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  public static getDerivedStateFromError(_: Error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('ErrorBoundary caught an error: ', error, errorInfo);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      return <Text>Something went wrong.</Text>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

然后我按以下方式使用这个类：

const ExceptionTrackingView = () => {
  return (
    <ErrorBoundary>
      <View>
            <CustomButton
              buttonTitle={item.key}
              buttonOnPress={() => {
                JSON.parse('Invalid JSON String');
              }}
            />
      </View>
    </ErrorBoundary>
  );
};

因此，在按钮单击事件中，它应该在尝试解析无效 JSON 时创建异常，然后从 ErrorBoundary 控制台日志错误，但它永远不会被调用。

此外，根据文档，ErrorBoundary 无法捕获以下错误：

• 事件处理程序（了解更多）
• 异步代码（例如 setTimeout 或 requestAnimationFrame 回调）
• 服务端渲染
• 错误边界本身（而不是其子级）抛出的错误

所以，即使它适用于上面的场景，它也不适用于所有错误。

是否有任何软件包或解决方案可以为react-native应用程序实现全局错误处理程序，以便与最新的react native版本0.74.x及更高版本一起使用？

Answer 1

你检查过 React Native 全局错误处理程序吗？

您可以从

import { ErrorUtils } from 'react-native';

导入它，然后在您的应用程序入口点配置它

// Get the default global error handler
const defaultErrorHandler = ErrorUtils.getGlobalHandler();

// Set the global error handler to the custom function
const customErrorHandler = (error: Error, isFatal?: boolean | undefined) => {
  // Handle the error - you can log it, display it, or send it to a server
  console.log(error, isFatal);

  // Call the default handler afterwards
  defaultErrorHandler(error, isFatal);
};

ErrorUtils.setGlobalHandler(customErrorHandler);

这将捕获 React Native 应用程序中所有未处理的异常。但是，它不会捕获 React 组件生命周期之外的异步代码中发生的错误，例如 setTimeout 回调或 Promise 拒绝中的错误。要捕获这些错误，您可以使用 unhandledrejection 事件。

window.addEventListener('unhandledrejection', (event) => {
  // Handle the error
  console.log(event.reason);
});