How to print stack trace with reference to typescript source in Nest.js

Question

I am developing a Nest.js server and would like to be able to print useful stack trace in console (e.g. console.log). By default, it returns a reference to the line number in the compiled sources (.js). This is not useful for debugging as it's missing the reference to the line number in the original source files (.ts)

Here is my tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2017",
    "sourceMap": true,
    "outDir": "./dist",
    "_baseUrl": "./",
    "incremental": true
  },
  "exclude": ["node_modules", "dist"]
}

The .map files are generated in the dist folder as well, though it seems to be of no use when checking stack traces in the console.

So, after testing in my own server, I only get one line to say `ts` and that's because the server is webpacked via the `ng` compiler. Everything is in `js` files as expected cause you're running JavaScript. This is the default behavior, but it looks like [this comment](https://stackoverflow.com/a/40175651/9576186) shows a way to get ts lines in the stack trace instead — Jay McDoniel, Nov 22 '19 at 20:11
Thank you! It works, just by adding `source-map-support` to the project, now it outputs the line number from the `ts` file — Alex Predescu, Nov 22 '19 at 21:14

score 45 · Accepted Answer · answered Nov 22 '19 at 21:28

45

For visibility purposes: adding the source-map-support NPM package allows for tracing typescript files in the stack trace.

It can be added on the command line with node -r source-map-support/register fileToRun.js or programatically with

import * as sourceMapSupport from 'source-map-support';
sourceMapSupport.install();

OR

import { install } from 'source-map-support';
install();

OR with ES6 modules

import 'source-map-support/register';

answered Nov 22 '19 at 21:28

Jay McDoniel

57,339
7
135
147

1

Do I have to add this to every file separately? Or is there a way to do this globally for my whole NestJS project? – Harold L. Brown Nov 10 '20 at 16:05
2

You should just need to add it to your `main.ts` Or to the command line as mentioned. – Jay McDoniel Nov 10 '20 at 17:57
2

in typescript dont forget to `npm i --save-dev @types/source-map-support` – steven87vt Feb 02 '22 at 14:06

score 4 · Answer 2 · answered Oct 12 '22 at 18:26

4

I was only able to get this working if I also added a

webpack.config.js

file into the root directory of the NestJS project with following content:

// webpack.config.js
module.exports = function(options) {
  return {
    ...options,
    devtool: 'inline-source-map',
  }
}

With this file in place it is possible to configure Webpack to your needs when transpilling your NestJS sources to main.js.

In main.ts I added following lines as described in answer above:

import * as sourceMapSupport from 'source-map-support';
sourceMapSupport.install();

Voila its working and exact Typescript files plus line numbers are displayed in console stack trace.

answered Oct 12 '22 at 18:26

Torsten Barthel

3,059
1
26
22

Could you provide some context about the configuration (e.g., package.json, tsconfig.json) that you are using? – Alex Predescu Oct 16 '22 at 08:48
1

Nothing special there: Just add "sourceMap": true to tsconfig.json. package.json remains the same. – Torsten Barthel Oct 17 '22 at 11:37

crazyoptimist · Answer 3 · 2023-08-01T08:22:07.407

There are two ways of configuring hot reload according to the nestjs doc.
In my case, I used the way of leveraging the nest cli.

Steps:

npm i source-map-support, npm i -D @types/source-map-support
Add import "source-map-support/register" to your main.ts
Add devtool: 'inline-source-map' to your webpack-hmr.config.js

And voila! It works as expected.

Here's my webpack-hmr.config.js after finishing Step 3: (same as in the docs but added one line)

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    entry: ['webpack/hot/poll?100', options.entry],
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({
        name: options.output.filename,
        autoRestart: false,
      }),
    ],
    devtool: 'inline-source-map',
  };
};

If you are configuring the hot module reload without the nest cli, add the line to webpack.config.js instead of webpack-hmr.config.js in the Step 3.

Nice! Will definetely give it a try. Didn't know that HMR is also available for Nest.js projects. I thought its more a thing for frontend development. I configured HMR for Angular once and it was kind of pain. — Torsten Barthel, May 16 '23 at 05:03

How to print stack trace with reference to typescript source in Nest.js

3 Answers3

Linked