Upload source maps for Nuxt

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. Generate sourcemaps during build

    Required

    You can hook into the close event to generate and upload source maps for your Nuxt application like this:

    nuxt.config.js
    import { execSync } from 'child_process'
    export default defineNuxtConfig({
    ...,
    sourcemap: {
    client: true
    },
    hooks: {
    'close': async () => {
    console.log('Running PostHog sourcemap injection and upload...')
    try {
    execSync("posthog-cli sourcemap inject --directory '.output'", {
    stdio: 'inherit',
    })
    execSync("posthog-cli sourcemap upload --directory '.output'", {
    stdio: 'inherit',
    })
    console.log('PostHog sourcemap injection completed successfully')
    } catch (error) {
    console.error('PostHog sourcemap injection failed:', error)
    }
    }
    }
    })
  4. Build your project for production

    Required

    Build your project for production by running the following command:

    Terminal
    nuxt build

    Post-build scripts should automatically generate and upload sourcemaps to PostHog.

  5. Verify source map upload

    Checkpoint
    Confirm sourcemaps are being properly uploaded

    Before proceeding, confirm that sourcemaps are being properly uploaded.

    You can verify the injection is successful by checking your .mjs.map source map files for //# chunkId= comments. Make sure to serve these injected files in production, PostHog will check for the //# chunkId comments to display the correct stack traces.

    Check symbol sets in PostHog
  6. Next steps

    After configuring PostHog, update your build and deployment process to serve bundles injected with the chunkId comments. PostHog relies on these comments to display the correct stack traces. Remember to export the required environment variables in your deployment process.

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 React

If you're using another build tool like webpack or Rollup , consult the documentation for your build tool to enable source maps. Confirm that the served files are injected with the correct source map comment in production in dev tools.

Read next article