Nuxt error tracking installation

For Nuxt v3.7 and above, we recommend using the official @posthog/nuxt module which provides automatic error tracking with built-in source map support.

Install the PostHog Nuxt module

Required

Your goal in this step: Install and configure the PostHog Nuxt module.

Install the PostHog Nuxt module using your package manager:

npm install @posthog/nuxt

Add the module to your nuxt.config.ts file:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@posthog/nuxt'],

  // Enable source maps generation in both vue and nitro
  sourcemap: { 
    client: 'hidden' 
  },
  nitro: {
    rollupConfig: {
      output: {
        sourcemapExcludeSources: false,
      },
    },
  },

  posthogConfig: {
    publicKey: '<ph_project_api_key>', // Find it in project settings https://app.posthog.com/settings/project
    host: 'https://us.i.posthog.com', // Optional: defaults to https://us.i.posthog.com. Use https://eu.i.posthog.com for EU region
    clientConfig: {
      capture_exceptions: true, // Enables automatic exception capture on the client side (Vue)
    },
    serverConfig: {
      enableExceptionAutocapture: true, // Enables automatic exception capture on the server side (Nitro)
    },
    sourcemaps: {
      enabled: true,
      envId: '<ph_environment_id>', // Your environment ID from PostHog settings https://app.posthog.com/settings/environment#variables
      personalApiKey: '<ph_personal_api_key>', // Your personal API key from PostHog settings https://app.posthog.com/settings/user-api-keys
      project: 'my-application', // Optional: defaults to git repository name
      version: '1.0.0', // Optional: defaults to current git commit
    },
  },
})

The module will automatically:

Initialize PostHog on both Vue (client side) and Nitro (server side)
Capture exceptions on both client and server
Generate and upload source maps during build

Manually capturing exceptions

Optional

Your goal in this step: Manually capture exceptions in your Nuxt application.

Our module if set up as shown above already captures both client and server side exceptions automatically.

To send errors manually on the client side, import it and use the captureException method like this:

Vue

<script>
  const { $posthog } = useNuxtApp()

  if ($posthog) {
    const posthog = $posthog()
    posthog.captureException(new Error("Important error message"))
  }
</script>

On the server side instantiate PostHog using:

server/api/example.js


  const runtimeConfig = useRuntimeConfig()

  const posthog = new PostHog(
    runtimeConfig.public.posthogPublicKey,
    { 
      host: runtimeConfig.public.posthogHost, 
    }
  );

  try {
    const results = await DB.query.users.findMany()
    return results
  } catch (error) {
    posthog.captureException(error)
  }
})

3
Build your project for production
Required
Build your project for production by running the following command:
Terminal
```
nuxt build
```
The PostHog module will automatically generate and upload source maps to PostHog during the build process.
Verify source map upload
Checkpoint
Confirm source maps are being properly uploaded
Before proceeding, confirm that source maps 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
Verify error tracking
Checkpoint
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.

Check for exceptions in PostHog

Nuxt error tracking installation

Install the PostHog Nuxt module

Manually capturing exceptions

Build your project for production

Verify source map upload

Verify error tracking

Community questions

Was this page useful?