Errors
Expo Router enables fine-tuned error handling to enable a more opinionated data loading strategy in the future. You can export a nested ErrorBoundary
component from any route to intercept and format component-level errors using React Error Boundaries:
app/home.tsx
import { View, Text } from 'react-native';
export function ErrorBoundary(props: ErrorBoundaryProps) {
return (
<View style={{ flex: 1, backgroundColor: "red" }}>
<Text>{props.error.message}</Text>
<Text onPress={props.retry}>Try Again?</Text>
</View>
);
}
export default function Page() { ... }
When you export an ErrorBoundary
the route will be wrapped with a React Error Boundary effectively:
virtual
function Route({ ErrorBoundary, Component }) {
return (
<Try catch={ErrorBoundary}>
<Component />
</Try>
);
}
When ErrorBoundary
is not present, the error will be thrown to the nearest parent ErrorBoundary
.
API
ErrorBoundaryProps
Each ErrorBoundary
is passed the following props:
error
:Error
The error that was thrown.retry
:() => Promise<void>
A function that will rerender the route component.
ErrorBoundary
You can also use the default ErrorBoundary
component for a quick UI:
app/home.tsx
// Re-export the default UI
export { ErrorBoundary } from "expo-router";
TODO
- Metro errors need to be symbolicated in order to show the correct file name and line number on web.
- React Native LogBox needs to be presented less aggressively in order to develop with errors. Currently it shows for
console.error
s andconsole.warn
s but it should ideally only show for uncaught errors.