Javascript Source Maps

Uploading source maps to HyperDX allows you to see the original source code and stack trace for errors that occur in your minified or transpiled code (ex. browser Javascript).

Uploading Source Maps

1. Install the HyperDX CLI

First install the HyperDX CLI in your project. The CLI will allow you to specify which files to upload as sourcemaps for a given release.

npm install @hyperdx/cli

2. Enable Source Maps in Your Build

If you haven't already, you'll need to enable source maps in your build process.

For example, if you're using Webpack, you can enable source maps by setting the devtool option to source-map in your Webpack configuration.

module.exports = {
  devtool: 'source-map',
};

In Next.js, you can enable source maps by setting the productionBrowserSourceMaps to true in your next.config.js.

module.exports = {
  productionBrowserSourceMaps: true,
};

3. Call the CLI to Upload Source Maps After Building

Next, after your build step you'll want to point the HyperDX CLI to the directory containing your source maps and call the upload-sourcemaps command with your personal API key or a service API key (this is a different key from your ingestion API key). You can find your key in the HyperDX settings page (opens in a new tab).

npx @hyperdx/cli upload-sourcemaps\
  --serviceKey "YOUR_SERVICE_KEY_HERE"\
  --path .next

You'll need to configure --path to point to the directory containing your source maps. This is typically the .next directory in a Next.js project.

You can alternatively set the HYPERDX_SERVICE_KEY environment variable with your service API or personal API key instead of specifying it in the command.

Removing Sourcemaps from Build Directory

After building source maps, you may want to remove the maps and the sourcemap references from your production build. To do so, you can run the following commands after the source map upload command to remove all source maps and references:

# Delete source maps
find .next -type f -name '*.js.map' -delete
find .next -type f -name '*.css.map' -delete
 
# Delete source map references
find .next -type f -name '*.js' -exec sed -i -E 's/sourceMappingURL=[^ ]*\.js\.map//g' {} +
find .next -type f -name '*.css' -exec sed -i -E 's/sourceMappingURL=[^ ]*\.css\.map//g' {} +