Upload source maps for React

Last updated:

|Edit this page|
  1. Install the PostHog CLI

    Required

    Install posthog-cli:

    npm install -g @posthog/cli
  2. Authenticate the PostHog CLI

    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 scopeAPI 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. Output source maps for your framework

    Required
    If you're using React with Vite, you can enable source maps in your `vite.config.js` file.
    JavaScript
    import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react'
    export default defineConfig({
    plugins: [react()],
    build: {
    sourcemap: true,
    }
    })

    If you're using another build tool like webpack or Rollup, consult the documentation for your build tool to enable source maps.

  4. Inject source map

    Required

    Once you've built your application and have bundled assets, inject the context required by PostHog to associate the maps with the served code.

    Terminal
    # Inject metadata in files to resolve errors
    posthog-cli sourcemap inject --directory ./path/to/assets
  5. Verify source map injection

    Checkpoint
    Confirm source map comments are present

    Confirm that the served files are injected with the correct source map comment in production in dev tools.

    JavaScript
    //# chunkId=0197e6db-9a73-7b91-9e80-4e1b7158db5c
  6. Upload source map

    Required

    You will then need to upload the modified assets to PostHog.

    Terminal
    # Upload assets to posthog
    posthog-cli sourcemap upload --directory ./path/to/assets

    💡 Tip: You can use --delete-after option to clean up sourcemaps after uploading them.

    Serve injected assets

    You must serve the injected assets in deployed production app. The injected metadata is used during error capture to identify the correct source map to use. We suggest you upload source maps right after your production build in CI.

    If you serve a copy of the bundled assets as they were prior to running posthog-cli sourcemap inject, we won't be able to use the uploaded sourcemap to unminify or demangle your stack traces.

  7. Verify source map upload

    Checkpoint

    Confirm that source maps are successfully uploaded to PostHog.

    Check symbol sets in PostHog

Questions? Ask Max AI.

It's easier than reading through 698 pages of documentation

Community questions

Was this page useful?

Next article

Upload source maps for Angular

You can configure Angular to generate source maps by adding the following to your angular.json file: Then, build your Angular application: Confirm that the source maps are generated in the dist/<your-app-name>/ directory. You should see a .js.map file for each JS bundle. Confirm that the served files are injected with the correct source map comment in production in dev tools: You should see a comment like this in your minified JS files, for example main-IX6K2QJM.js : Before proceeding…

Read next article