У меня действительно странное поведение в моем приложении, ориентированном на реакцию. Я отследил это до минимального примера.

У меня есть SwitchNavigator с двумя компонентами. Первый компонент ничего не делает, кроме перехода ко второму компоненту через 2000 мс. Второй компонент имеет ошибку внутри метода рендеринга (например, он пытается отрендерить какой-то неопределенный материал "test.error").

Компонент кода 2:

render = () => {
    return (
        <View>
            {
                test.error
            }
        </View>
    )
}

Во время разработки я получаю обычный «красный экран смерти», который сообщает мне «ReferenceError: ReferenceError: test is not defined». Это ожидаемое поведение. Но в сборке выпуска приложение тихо дает сбой и просто отображает пустой экран. Нет вылета приложения.

Дополнительная информация: это же приложение дает сбой в сборке релиза (как и ожидалось), когда часть с ошибкой отображается после того, как компонент был смонтирован.

Компонент 2 - вылетает, как ожидалось:

class Test extends Component {
    state = {
        error: false
    };

    componentDidMount = () => {
        setTimeout(() => {
            this.setState({error: true});
        }, 0)
    };

    render = () => {
        if (this.state.error) {
            return (
                <View>
                    {
                        test.error
                    }
                </View>
            )
        } else {
            return (
                <View>
                    Test
                </View>
            )
        }
    }
}

Дополнительная информация:

  • когда я использую Компонент 2 в качестве первоначально вызванного Компонента, мое приложение вылетает, как и ожидалось. Вроде только не вылетает после навигации.
  • То же самое и со StackNavigator.

Версии:

  • Реакция: 16.3.1
  • ReactNative: 55,4
  • ReactNavigation: пробовал с 1.6.0 и 2.18.2
  • Ошибка: 2.12.4
0
Alexander Kuttig 10 Ноя 2018 в 10:49

1 ответ

Лучший ответ

Для тех, у кого такая же проблема. Это не имело ничего общего с ошибками или реактивной навигацией.

Проблема заключалась в том, что ошибки внутри метода рендеринга не приводили к серьезному сбою приложения в режиме выпуска. Я думаю, причина кроется в React 16 и функции ErrorBoundary.

Решением в моем случае было добавить ErrorBoundary в мой App.js (см. https: // responsejs .org / docs / error-boundaries.html). Теперь я могу обработать ошибку и сообщить об этом в bugsnag.

componentDidCatch = (e, message) => {
    bugsnag.notify(e);
    Alert.alert(
        I18n.t('GLOBAL__FATAL_ERROR'),
        I18n.t('GLOBAL__FATAL_ERROR_MESSAGE'),
        [
            {
                text: I18n.t('GLOBAL__FATAL_ERROR_RESTART'),
                onPress: () => BackHandler.exitApp()
            }
        ]
    );
};
3
Alexander Kuttig 27 Ноя 2018 в 10:07