Error Debugging

When there are any production errors it is difficult to debug as the stack trace is minified, to solve this problem upload source maps files to Middleware which allows you to see the original source code and stack trace of the errors that occur in your minified or transpiled code.

Uploading Source Maps

1. Install Middleware sourcemap uploader

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

npm install -g @middleware.io/sourcemap-uploader

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. Uploading source maps after building

Next, after your build step you'll want to point the sourcemap uploader to the directory containing your source maps and call the upload-sourcemaps command with your account key (this is a different key from your middleware API key). You can find your key in the installation page in your dashboard.

sourcemap-uploader upload
    --apiKey=<rum_account_key>
    --path="/path/to/sourcemaps"
    --appVersion="1.0.0"

Sourcemap-uploader Arguments

apiKey

The API key for your project. You can find this in the installation page in your dashboard.

path

The path that middleware will use to send .map files. The default value is current directory.

appVersion

The version of your current deployment. Please provide the same app.version value in defaultAttributes as the value you provide for version in Middleware.track. This ensures that we're always using the same set of sourcemaps for your current bundle. If omitted, sourcemaps are uploaded as latest.

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 /path -type f -name '*.js.map' -delete
find /path -type f -name '*.css.map' -delete
 
# Delete source map references
find /path -type f -name '*.js' -exec sed -i -E 's/sourceMappingURL=[^ ]*\.js\.map//g' {} +
find /path -type f -name '*.css' -exec sed -i -E 's/sourceMappingURL=[^ ]*\.css\.map//g' {} +