Upload source maps for React Native

  1. Download CLI

    Required

    Install posthog-cli:

    npm install -g @posthog/cli

  2. Authenticate

    Required

    To authenticate the CLI, you can call the login command and follow the instructions:

    Terminal
    posthog-cli login

    If you are using the CLI in a CI/CD environment such as GitHub Actions, you can set environment variables to authenticate:

    Environment VariableDescriptionSource
    POSTHOG_CLI_ENV_IDPostHog project IDEnvironment settings
    POSTHOG_CLI_TOKENPersonal API key with error tracking write and organization read scopesAPI key settings

    Use the --host option in subsequent commands to specify a different PostHog instance / or region. For EU users:

    Terminal
    posthog-cli --host https://eu.posthog.com [CMD]

  3. Inject

    Required
    Expo 50 or later

    Automatic source map injection works only in React Native apps using Expo 50 or later, as it relies on Expo’s built-in debug ID injection.

    Create or update the metro.config.js file in your app's root directory so that it looks like this:

    diff
    -const { getDefaultConfig } = require("expo/metro-config");
    +const { getPostHogExpoConfig } = require('posthog-react-native/metro')
    

    -const config = getDefaultConfig(__dirname);
    +const config = getPostHogExpoConfig(__dirname)
    

    module.exports = config

  4. Upload

    Required
    No automatic source map uploads on React Native web

    Automatic source map uploading is handled through the Gradle build process on Android and the Xcode build process on iOS. For React Native web, please use our CLI instead.

    1. Android: Update the /android/app/build.gradle file from your app's root directory so that it looks like this:
    diff
    ...
    

    // This must be placed directly above the following `android` block.
    +apply from: "../../node_modules/posthog-react-native/tooling/posthog.gradle"
    

    android {
      ...
    }
    1. iOS: Update the /ios/$yourProjectName.xcodeproj/project.pbxproj file (replace $yourProjectName with your project's actual name). You need to locate the Bundle React Native code and images build step.

    To do this through Xcode, open your project in Xcode, go to the project settings, navigate to Build Phases, select Bundle React Native code and images, and apply the changes shown below.

    diff
    ...
    

    // This must be placed at the end of this shell script.
    WITH_ENVIRONMENT="../node_modules/react-native/scripts/xcode/with-environment.sh"
    

    

    -REACT_NATIVE_XCODE="../node_modules/react-native/scripts/react-native-xcode.sh"
    +POSTHOG_XCODE="../node_modules/posthog-react-native/tooling/posthog-xcode.sh"
    

    -/bin/sh -c "$WITH_ENVIRONMENT $REACT_NATIVE_XCODE"
    +/bin/sh -c "$WITH_ENVIRONMENT \"$POSTHOG_XCODE\""
    1. Web: Ensure that your React Native web build generates source maps.
    Terminal
    # Example using React Native and Expo with the --source-maps flag.
    # Files are usually under the '$buildFolder/_expo/static/js/web' folder ($name.js and $name.js.map)
    npx expo export --source-maps --platform web

  5. Verify source map upload

    Checkpoint

    Confirm that source maps are successfully uploaded to PostHog.

    Check symbol sets in PostHog

Community questions

Was this page useful?

Questions about this page? or post a community question.