Skip to main content

Error Boundaries

Generates: Logs

Catch React component rendering errors automatically and display fallback UI.

Basic Usage​

import { Pulse } from '@dreamhorizonorg/pulse-react-native';

// Without fallback — error is reported as fatal
<Pulse.ErrorBoundary>
    <YourComponent />
</Pulse.ErrorBoundary>

// With fallback — error is reported as non-fatal
<Pulse.ErrorBoundary fallback={<Text>Something went wrong</Text>}>
    <YourComponent />
</Pulse.ErrorBoundary>

Fallback with Error Context​

<Pulse.ErrorBoundary
    fallback={({ error, componentStack }) => (
        <View>
            <Text>Something went wrong</Text>
            <Text>{error instanceof Error ? error.message : String(error)}</Text>
        </View>
    )}
    onError={(error, componentStack) => {
        console.log('Render error:', error);
    }}
>
    <YourComponent />
</Pulse.ErrorBoundary>

HOC Pattern​

const SafeComponent = Pulse.withErrorBoundary(UserProfile, {
    fallback: <Text>Profile failed to load</Text>,
});

<SafeComponent userId="123" />

Fatal vs Non-Fatal​

error.fatal
No fallback providedtrue
Fallback providedfalse

Error boundaries do not catch errors in event handlers or async code — use try/catch + Pulse.reportException() for those. See Error Instrumentation.

Next Steps​