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 shows a way to get ts lines in the stack trace instead — Jackie McDoniel
– Jackie McDoniel, Commented Nov 22, 2019 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
– Alex Predescu, Commented Nov 22, 2019 at 21:14

Sanghyun Lee · Accepted Answer · 2024-01-17 19:03:12Z

49

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';

Update

From the node-source-map-support repository:

Node >=12.12.0

This package is no longer required as Node 12.12.0 introduced the --enable-source-maps flag. (unless you're using the vm module, as --enable-source-maps does not work with vm.runInThisContext).

edited Jan 17, 2024 at 19:03

Sanghyun Lee

23.4k19 gold badges107 silver badges127 bronze badges

answered Nov 22, 2019 at 21:28

Jackie McDoniel

71.7k9 gold badges191 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harold L. Brown Over a year ago

Do I have to add this to every file separately? Or is there a way to do this globally for my whole NestJS project?

Jackie McDoniel Over a year ago

You should just need to add it to your main.ts Or to the command line as mentioned.

steven87vt Over a year ago

in typescript dont forget to npm i --save-dev @types/source-map-support

Torsten Barthel · Accepted Answer · 2022-10-12 18:26:50Z

8

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, 2022 at 18:26

Torsten Barthel

3,5431 gold badge29 silver badges24 bronze badges

2 Comments

Alex Predescu Over a year ago

Could you provide some context about the configuration (e.g., package.json, tsconfig.json) that you are using?

Torsten Barthel Over a year ago

Nothing special there: Just add "sourceMap": true to tsconfig.json. package.json remains the same.

crazyoptimist · Accepted Answer · 2023-08-01 08:22:07Z

1

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.

edited Aug 1, 2023 at 8:22

answered Nov 14, 2022 at 19:45

crazyoptimist

5345 silver badges16 bronze badges

1 Comment

Torsten Barthel Over a year ago

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.

Collectives™ on Stack Overflow

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

3 Answers 3

Update

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related