Question

我们想在应用程序崩溃时禁用经典的白屏。我们正在使用react-native-exception-handler模块，它捕获了一些错误，但不是所有错误。当我们发现这些错误时，我们会通知自己并重新启动应用程序。但是有时会出现一些错误（例如，当服务器向应用程序提供了一些意外的数据时），这些错误会触发白屏。与“随机”白屏相比，我们更希望客户保持冻结状态的应用程序或必须重新启动应用程序的通知。能做到吗？

Answer 1

这是一个演示：https://snack.expo.io/@carloscuesta/react-native-error-boundary

您可以使用react-native-error-boundary

yarn add react-native-error-boundary

这不处理本机错误，但处理js级别的所有错误。您可以将此包与react-native-exception-handler结合使用。

import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
import ErrorBoundary from 'react-native-error-boundary';

import ComponentWithError from './ComponentWithError'

const App = () => {
  const [isErrorComponentVisible, setIsErrorComponentVisible] = React.useState(false)

  return (
    <ErrorBoundary>
      <View style={styles.container}>
        <Text style={styles.icon}>?</Text>
        <Text style={styles.title}>
          react-native-error-boundary
        </Text>
        <Text style={styles.text}>
          Click on the following button to render a component that will throw an error.
        </Text>
        <Button title='Throw error' onPress={() => setIsErrorComponentVisible(true)} />
        {isErrorComponentVisible && <ComponentWithError />}
      </View>
    </ErrorBoundary>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    textAlign: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  icon: {
    fontSize: 48
  },
  text: {
    marginVertical: 16
  }
});

export default App

Answer 2

您可以使用错误边界。将您的根应用程序包装在ErrorBoundary中，然后您将能够捕获任何组件中的错误：

<ErrorBoundary>
  <App />
</ErrorBoundary>

对于ErrorBoundary组件，您可以执行以下操作

export default class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null, errorInfo: null };
  }

  componentDidCatch(error, errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });

    // You can also send notification based on the error catch
    
    sendNotification("Kindly Restart App");
    
  }

  render() {
    if (this.state.errorInfo) {
      // Error path
      return (
        <View>
          <Text>Some thing went wrong .. Kindly Restart the Application</Text>
        </View>
      );
    }

  }
}

禁用反应本机白屏

2 个答案: