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' {} +
![](https://static.scarf.sh/a.png?x-pxid=8167f508-ea32-4021-a0ac-42db3c691850)