Upload source maps for Webpack

Install the PostHog Webpack plugin

Required

Terminal
npm install @posthog/webpack-plugin

Add PostHog plugin to your Webpack config

Required

Add the following to your webpack.config.js file:

webpack.config.js
const PostHogPlugin = require('@posthog/webpack-plugin')

module.exports = {
  // ... your existing config
  plugins: [
    new PostHogPlugin({
      personalApiKey: process.env.POSTHOG_API_KEY, // Personal API Key
      envId: process.env.POSTHOG_ENV_ID, // Environment ID
      host: process.env.POSTHOG_HOST, // (optional) defaults to https://us.i.posthog.com
      sourcemaps: { // (optional)
        enabled: true, // (optional) Enable sourcemaps generation and upload, defaults to true
        project: 'my-application', // (optional) Project name
        version: '1.0.0', // (optional) Release version
        deleteAfterUpload: true, // (optional) Delete sourcemaps after upload, defaults to true
      },
    }),
  ],
}

Where you should set the following environment variables:

Environment Variable	Description
`POSTHOG_API_KEY`	Personal API key with at least `write` access on `error tracking`
`POSTHOG_ENV_ID`	Project ID you can find in your project settings
`POSTHOG_HOST`	(optional) Your PostHog instance URL. Defaults to `https://us.i.posthog.com`

If you are using a CI/CD service, make sure these environment variables are added to your project settings, not just your local setup. This enables source maps to be automatically uploaded on your production build.

Verify source map upload and injection
Checkpoint
1. Confirm that source maps are successfully uploaded to PostHog.
Check symbol sets in PostHog
1. 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

Upload source maps for Webpack

Install the PostHog Webpack plugin

Add PostHog plugin to your Webpack config

Verify source map upload and injection

Community questions

Was this page useful?