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.errors and console.warns but it should ideally only show for uncaught errors.