ErrorRecovery - add usage example.

[sandrina-p]

This was already asked twice here and here but without a successful answer.

Do you know how to use it? For native and web? Where should I place the code?

[sandrina-p]

Anyone?

[wodin]

Hi

It works like this:

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { Button } from "react-native-paper";
import * as ErrorRecovery from "expo-error-recovery";

export default function App({ exp }) {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{JSON.stringify(exp.errorRecovery)}</Text>
      <Button
        onPress={() => {
          ErrorRecovery.setRecoveryProps({ info: "User pressed crash button" });
          throw "Crash!";
        }}
      >
        Crash!
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center"
  }
});

When you load it initially, exp.errorRecovery will be null. If you click the Crash! button and reload then exp.errorRecovery will contain whatever you set with setRecoveryProps().

I think the idea is that you can use setRecoveryProps() to let your app know that it crashed and maybe provide some context about what happened just before the crash. I’ve never used it, though, so I’m not sure what a good use case is.

EDIT:

OK, combining the above with the approach from Dealing with global errors in React-Native Expo as simple as possible | by Ben-Hur Santos Ott | Medium I get the following. It’s very similar to the above, but can store the thrown error to pass to the app when it is reloaded:

import * as React from "react";
import { Text, View, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { Button } from "react-native-paper";
import * as ErrorRecovery from "expo-error-recovery";

const defaultErrorHandler = ErrorUtils.getGlobalHandler();

const globalErrorHandler = (err, isFatal) => {
  console.log("globalErrorHandler called!");
  ErrorRecovery.setRecoveryProps({ info: err });
  defaultErrorHandler(err, isFatal);
};

ErrorUtils.setGlobalHandler(globalErrorHandler);

export default function App({ exp }) {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{JSON.stringify(exp.errorRecovery)}</Text>
      <Button
        onPress={() => {
          throw "Crash!";
        }}
      >
        Crash!
      </Button>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center"
  }
});