React Native error tracking installation

  1. Install the package

    Required

    Install the PostHog React Native library and its dependencies:

    npx expo install posthog-react-native expo-file-system expo-application expo-device expo-localization

  2. Configure PostHog

    Required

    PostHog is most easily used via the PostHogProvider component. Wrap your app with the provider:

    App.tsx
    import { PostHogProvider } from 'posthog-react-native'
    

    export function MyApp() {
        return (
            <PostHogProvider
                apiKey="<ph_project_api_key>"
                options={{
                    host: "https://us.i.posthog.com",
                }}
            >
                <RestOfApp />
            </PostHogProvider>
        )
    }

  3. Send events

    Recommended

    Once installed, PostHog will automatically start capturing events. You can also manually send events using the usePostHog hook:

    Component.tsx
    import { usePostHog } from 'posthog-react-native'
    

    function MyComponent() {
        const posthog = usePostHog()
    

        const handlePress = () => {
            posthog.capture('button_pressed', {
                button_name: 'signup'
            })
        }
    

        return <Button onPress={handlePress} title="Sign Up" />
    }

  4. Set up exception autocapture

    Recommended
    Client-side configuration only

    This configuration is client-side only. Support for remote configuration in the error tracking settings will be added in a future release.

    You can autocapture exceptions by configuring the errorTracking when setting up PostHog:

    React Native
    export const posthog = new PostHog('<ph_project_api_key>', {
      errorTracking: {
        autocapture: {
          uncaughtExceptions: true,
          unhandledRejections: true,
          console: ['error', 'warn'],
        },
      },
    })

    Configuration options:

    OptionDescription
    uncaughtExceptionsCaptures Uncaught exceptions (ReactNativeGlobal.ErrorUtils.setGlobalHandler)
    unhandledRejectionsCaptures Unhandled rejections (ReactNativeGlobal.onunhandledrejection)
    consoleCaptures console logs as errors according to the reported LogLevel

  5. Manually capture exceptions

    Optional

    You can manually capture exceptions using the captureException method:

    React Native
    try {
      // Your awesome code that may throw
      someRiskyOperation();
    } catch (error) {
      posthog.captureException(error)
    }

    This is helpful if you've built your own error handling logic or want to capture exceptions that are handled by your application code.

  6. Future features

    Optional

    We currently don't support the following features:

    • No native Android and iOS exception capture
    • No automatic source map uploads on React Native web

    These features will be added in future releases. We recommend you stay up to date with the latest version of the PostHog React Native SDK.

  7. Verify error tracking

    Recommended
    Confirm events are being sent to PostHog
    Before proceeding, let's make sure exception events are being captured and sent to PostHog. You should see events appear in the activity feed.
    Activity feed with events
    Check for exceptions in PostHog

  8. Upload source maps

    Required

    Great, you're capturing exceptions! If you serve minified bundles, the next step is to upload source maps to generate accurate stack traces.

    Let's continue to the next section.

    Upload source maps

Community questions

Was this page useful?

Questions about this page? or post a community question.