Expo React Native - How to use ErrorRecovery? - react-native

Question

The current Expo ErrorRecovery docs do not provide any example using ErrorRecovery.setRecoveryProps().
If you know how to use it the Managed workflow, so that it catches JS errors, let me know.
Thank you

Answer 1

I gave it a try:
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 the app 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:
The above might not be all that useful, but you can combine it with the approach shown here (using a global error handler) to pass some information about the crash to the reloaded app:
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"
}
});

Answer 2

for what it's worth, this is from the expo ErrorRecovery source code, so its essentially doing the same thing as the link you posted in your edit
import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment';
import { Platform } from 'react-native';
import { getRecoveryPropsToSave } from './ErroRecoveryStore';
import ExpoErrorRecovery from './ExpoErrorRecovery';
if (Platform.OS !== 'web') {
const globalHandler = ErrorUtils.getGlobalHandler();
// ErrorUtils came from react-native
// https://github.com/facebook/react-native/blob/1151c096dab17e5d9a6ac05b61aacecd4305f3db/Libraries/vendor/core/ErrorUtils.js#L25
ErrorUtils.setGlobalHandler(async (error, isFatal) => {
if (ExpoErrorRecovery.saveRecoveryProps) {
await ExpoErrorRecovery.saveRecoveryProps(getRecoveryPropsToSave());
}
globalHandler(error, isFatal);
});
} else if (Platform.OS === 'web' && canUseDOM) {
window.addEventListener('error', () => {
ExpoErrorRecovery.saveRecoveryProps(getRecoveryPropsToSave());
});
}