Source Maps

Sentry supports un-minifying JavaScript via Source Maps. This lets you view source code context obtained from stack traces in their original untransformed form, which is particularly useful for debugging minified code (e.g. UglifyJS), or transpiled code from a higher-level language (e.g. TypeScript, ES6).

Source maps can be either:

1. Uploaded directly to Sentry (recommended).
2. Served publicly over HTTP alongside your source files.

Generating a Source Map

Most modern JavaScript transpilers support source maps. Below are instructions for some common tools.

Webpack

Webpack is a powerful build tool that resolves and bundles your JavaScript modules into files fit for running in the browser. It also supports many different “loaders” which can convert higher-level languages like TypeScript and ES6/ES2015 into browser-compatible JavaScript.

You can configure Webpack to output source maps by editing webpack.config.js.

const path = require("path");

module.exports = {
  // ... other config above ...
  target: "node",
  devtool: "source-map",
  entry: {
    app: "./src/app.js",
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
  },
};

Making Source Maps Available to Sentry

Source maps for Node.js projects should be uploaded directly to Sentry.

Uploading Source Maps to Sentry

Sentry provides an abstraction called Releases which you can attach source artifacts to. The release API is intended to allow you to store source files (and source maps) within Sentry.

You can do this with the help of the sentry-webpack-plugin, which internally uses our Sentry CLI.

• Start by creating a new authentication token under [Account] > API.
• Ensure you have project:write selected under scopes.
• Install @sentry/webpack-plugin using npm
• Create .sentryclirc file with necessary config (see Sentry Webpack Plugin docs below)
• Update your webpack.config.js

const SentryPlugin = require("@sentry/webpack-plugin");

module.exports = {
  // ... other config above ...
  plugins: [
    new SentryPlugin({
      release: process.env.RELEASE,
      include: "./dist",
    }),
  ],
};

You can take a look at Sentry Webpack Plugin documentation for more information on how to configure the plugin.

Additionally, you’ll need to configure the client to send the release:

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  release: process.env.RELEASE,
});

Additional information can be found in the Releases API documentation.

Updating Sentry SDK configuration to support Source Maps

For Sentry to understand how to resolve errors sources, we need to modify the data we send. Thankfully, we have an integration called RewriteFrames which can be used to do just that.

import { RewriteFrames } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new RewriteFrames()],
});

There’s one critical thing to note here. This config assumes, that you’ll bundle your application into a single file, which will be served and then uploaded to Sentry from the root of the project's directory.

If you're not doing this, e.g. you're using TypeScript and upload all your compiled files separately to the server, then this may take a little more effort. Please refer to TypeScript usage docs to see a more complex and detailed example.