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.

Already have your own Error Boundary?​

If your app already ships with a custom error boundary, you don't need to swap it for Pulse.ErrorBoundary. Just forward the error to Pulse from inside your existing componentDidCatch so it shows up alongside the rest of your telemetry.

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

class MyErrorBoundary extends React.Component {
    state = { hasError: false };

    static getDerivedStateFromError() {
        return { hasError: true };
    }

    componentDidCatch(error: Error, info: React.ErrorInfo) {
        // Report to Pulse as a non-fatal — pass any extra context as params
        Pulse.reportException(error, false, {
            componentStack: info.componentStack ?? '',
            source: 'MyErrorBoundary',
        });
    }

    render() {
        if (this.state.hasError) return this.props.fallback ?? null;
        return this.props.children;
    }
}

Function-component boundaries (e.g. via react-error-boundary) work the same way — call Pulse.reportException(error, false, { ... }) from the onError callback.

Pass true as the second argument if you want the render-time error logged as fatal instead of non-fatal. See Error Instrumentation for the full reportException signature.

Next Steps​