logo
Source maps in Node.js
John
Roberto Penchev
March 12, 2020

The generated source looks a lot different than the original source. Take the statementthrow new MyHttpError. In the original source this error is thrown online 13, but in the generated source it's thrown online 29. These differences make debugging difficult — the stack trace displayed in the code being run doesn’t match the code being written.

Of the 21,717 respondents to the 2019 State of JavaScript Survey,~60% said that they spend time working in an alternate flavor of JavaScript, this is up from~21% in 2016. Increasingly, when someone writes JavaScript, they’re actually writing an abstraction that compiles to JavaScript.

These abstractions offer a variety of benefits: for instance the type safety introduced byFlowandTypeScript, or the functional programming paradigm introduced byClojureScript. However, we are also faced with a challenge. Node.js, developed in 2009, didn’t anticipate the modern world oftranspilers. And so alternate flavors of JavaScript present a disadvantage in terms of observability. Take the following TypeScript code:

 head: {
    title: 'Finrax: Crypto payments. For gaming',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        name: 'description',
        content: `A cryptocurrency payment gateway that converts better. Build trust with your players by offering fair exchange rates and fast payouts.
          The complete toolkit for accepting cryptocurrencies. Minimum volatility exposure. Multi brand support - all your businesses in one place. Accept payments and make payouts in 50+ coins.`
      }
    ],

    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon_new.ico' },

      {
        rel: 'stylesheet',
        href:
          'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Muli&display=swap'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Lato&display=swap'
      }
    ]
  },

When compiled to JavaScript, the above code ends up looking like this:

hello some code here

The generated source looks a lot different than the original source. Take the statementthrow new MyHttpError. In the original source this error is thrown online 13, but in the generated source it's thrown online 29. These differences make debugging difficult — the stack trace displayed in the code being run doesn’t match the code being written.