Отключить собственный белый экран React

Question

Мы хотим отключить белый экран classi c, когда приложение каким-то образом вылетает. Мы используем модуль response-native-exception-handler, и он обнаруживает некоторые ошибки, но не все, по-видимому. Когда мы обнаруживаем эти ошибки, мы уведомляем себя и перезапускаем приложение. Но иногда возникают некоторые ошибки (например, когда приложение получает данные от сервера, которых он не ожидает), которые вызывают появление белого экрана. Мы бы предпочли, чтобы наши клиенты оставались с зависшим приложением или с уведомлением о том, что им придется перезапустить приложение, чем со «случайным» белым экраном. Можно ли это сделать?

Answer 1

вот демонстрация: https://snack.expo.io/@carloscuesta / response-native-error-граница

вы можете использовать response-native-error-граница

yarn add react-native-error-boundary

это не обрабатывает собственные ошибки, но обрабатывает все ошибки уровня js. вы можете комбинировать использование этого пакета с обработчиком исключений response-native-exception.

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

Вы можете использовать границу ошибки. Оберните свое приложение root внутри 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>
      );
    }

  }
}