Debug Your Node.js Projects with Source Maps

Debug Your Node.js Projects with Source Maps

The Visual Studio Code editor has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, and many other languages that are transpiled into JavaScript. Setting up a project for Node.js debugging is usually straightforward with VS Code providing appropriate launch configuration defaults and snippets.

The Visual Studio Code editor has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, and many other languages that are transpiled into JavaScript. Setting up a project for Node.js debugging is usually straightforward with VS Code providing appropriate launch configuration defaults and snippets.

As you probably know, source maps allow you to view source code context obtained from stack traces in their original, untransformed form. This view is particularly useful when attempting to debug minified code (like UglifyJS) or transpiled code (like TypeScript or ES6). We’ve made the analogy before, but source maps act as the decoder ring to your secret (minified or transpiled) code.

As of recently, we support source maps for Node.js projects. Here’s what you need to know to generate and make those source maps available for Sentry.

Generating a source map

Most modern JavaScript transpilers support source maps. Below are instructions for two common tools: Webpack and Rollup.

Webpack

Webpack is a powerful build tool that resolves and bundles your JavaScript modules into larger chunks or a single file. It also supports many different “loaders” which can convert different flavors, like TypeScript, into plain JavaScript.

Webpack can be configured to output source maps by editing webpack.config.js.

const path = require("path");
module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  target: "node",
  devtool: "source-map"
};

Rollup

Rollup, another powerful bundler, is specifically focused on compiling small pieces of code into a larger structure, like a library. As an added benefit, Rollup is great at tree shaking, right out of the box.

Rollup can be configured to output source maps by editing rollup.config.js.

export default {
  entry: "./src/app.js",
  output: {
    file: "bundle.js",
    format: "cjs",
    sourceMap: true
  }
};

Making source maps available to Sentry

Once the source maps for Node.js projects are generated, you can upload them directly to Sentry.

Uploading source maps to Sentry

Sentry provides an abstraction called Releases that is used to improve our error reporting abilities by correlating first seen events with the release that might have introduce the problem. Releases are necessary for source maps, and the Release API allows storage of source maps within Sentry.

Attaching source artifacts can be done with the help of the sentry-webpack-plugin, which internally uses our Sentry CLI, and these five steps:

  1. Create a new authentication token under [Account] > API.
  2. Select project:write under Scopes.
  3. Install @sentry/webpack-plugin using npm.
  4. Create .sentryclirc file with necessary config (see Sentry Webpack Plugin docs).
  5. Update your webpack.config.json.
const SentryPlugin = require("@sentry/webpack-plugin");
module.exports = {
  // ... other config above ...
  plugins: [
    new SentryPlugin({
      release: process.env.RELEASE,
      include: "./dist"
    })
  ]
};

For more information on how to configure the plugin, check out the *[Sentry Webpack Plugin](https://github.com/getsentry/sentry-webpack-plugin "*Sentry Webpack Plugin")* documentation.*

You’ll also need to configure the client to send the release:

Sentry.init({
  dsn: "https://[email protected]/1274678",
  release: process.env.RELEASE
});

If you use process.env.RELEASE in your application’s code, you’ll have to provide that environment variable every time you run the app. Using Webpack, it’s much more suitable to use <a href="https://webpack.js.org/plugins/define-plugin/" target="_blank">DefinePlugin</a> and “embed” it during build time.

In that case, the code for webpack.config.js is:

const webpack = require("webpack");
// later in the config object, alongside sentry-webpack-plugin

plugins: [
  new webpack.DefinePlugin({
    "process.env.RELEASE": process.env.RELEASE
  })
];

You don’t have to use RELEASE environment variables, but release from your upload needs to match release from your init call.

For more information, check out the *[Releases API](https://docs.sentry.io/api/releases/ "*Releases API")* documentation.*

Updating Sentry SDK configuration to support source maps

For Sentry to understand how to resolve errors, the data we send needs to be modified. You can update the Sentry SDK with the help of our <a href="https://docs.sentry.io/platforms/javascript/pluggable-integrations/#rewriteframes" target="_blank">RewriteFrames</a> integration, which modifies that data for you.

Sentry.init({
  dsn: "https://[email protected]/1274678",
  integrations: [new Sentry.Integrations.RewriteFrames()]
});

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, because perhaps you’re using TypeScript and uploading your compiled files to the server separately, then we need to use a different approach. This different approach is outside the scope of the current post, but you’ll find some helpful hints and a details example over in our TypeScript documentation.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Express.js, Node.js and MongoDB.js

In this post, I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database. It will also show all items that have been entered into the database.

Node.js for Beginners - Learn Node.js from Scratch (Step by Step)

Node.js for Beginners - Learn Node.js from Scratch (Step by Step) - Learn the basics of Node.js. This Node.js tutorial will guide you step by step so that you will learn basics and theory of every part. Learn to use Node.js like a professional. You’ll learn: Basic Of Node, Modules, NPM In Node, Event, Email, Uploading File, Advance Of Node.

Top 7 Most Popular Node.js Frameworks You Should Know

Node.js is an open-source, cross-platform, runtime environment that allows developers to run JavaScript outside of a browser. In this post, you'll see top 7 of the most popular Node frameworks at this point in time (ranked from high to low by GitHub stars).