Upload source maps for Nuxt

Install posthog-cli:

npm install -g @posthog/cli

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

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:

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

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

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

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)
      }
    }
  }
})

Build your project for production by running the following command:

nuxt build

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

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.

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.