Node.js + typescript + sourcmaps + (no webpack)

1

I’m developing a Node.js application with typescript.

My goal is to make sourcemaps work with sentry. I can successfully create releases, associate commits and errors are also correctly correlated to their release. I struggle with the error Source code was not found. Here are the details:

SOLUTION
After days of debugging, I found the solution. The problem was that my sourcemaps were uploaded like this: ~/src/express/routes/sysadmin-routes.js, but Sentry was looking for this file without the ~/src, and I could not get the --rewrite to work. But with help from Sentry support it was finally fixed. I now upload sourcemaps that are correctly rewritten with the following command:

sentry-cli releases -p aveiro-server files $VERSION upload-sourcemaps --strip-prefix '~/src' --rewrite ./dist/src

Before I was using --rewrite ./dist and that was not good enough :slight_smile:

Now I’m working on the issue that I have hundreds of js/.map files to upload, so I need to figure out a way to bundle the application :sweat:

Versions
I’m using sentry-cli version 1.37.4, Node.js version 10, typescript version 3.0.1 and @sentry/node 4.4.1

Project structure

|aveiro-server/ 
              |package.json
              |tsconfig.json
              |tsconfig.prod.json
              |node_modules/
              |dist/
              |src/
                  |main.ts
                  |helpers/
                          error-handler/
                                       sentry-setup.ts

Sentry setup
Here I have configured the RewriteFrames plugin

// sentry-setup.ts
Sentry.init({
    dsn: '<my-dsn>',
    release: config.release,
    integrations: [new Sentry.Integrations.RewriteFrames({
        root: global.__rootdir__
    })]
});

and correspondingly in my entry file:

//main.ts
// This allows TypeScript to detect our global value
declare global {
    namespace NodeJS {
      interface Global {
        __rootdir__: string;
      }
    }
  }

global.__rootdir__ = __dirname || process.cwd();

I have also configured my tsconfig.prod.json in line with the sentry documenation (sourceMap and inlineSources both true in base tsconfig.json):

{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "sourceRoot": "/"
    }
}

I then upload the sourcemaps with the following command:

sentry-cli releases -p <project-name> files $VERSION upload-sourcemaps --ext ts --ext map ./dist

If I go to sentry releases I now see the sourcemaps uploaded, and the paths looks correct if you ask me (there are many files here):

59
Screenshot 2019-01-30 at 21.46.59.png2644×130 10 KB

But when I report an error I get the following error Source code was not found:

33
Screenshot 2019-01-30 at 22.52.33.png2212×1008 183 KB

What is going on here (src is not there but app i??) Is it the Sentry.Integrations.RewriteFrames plugin adding the app prefix or what? These files referenced in the screenshot are not located in the root? For example sysadmin-routes.js lives in src/express/routes/sysadmin-routes.ts.

Looking forward to get some help here :wink:

Steps to resovle the issue
I added a console.log(global.__rootdir__); statement in the file where Sentry is initialized. This prints: <full-path-on-my-computer>/aveiro-server/dist/src.

1 Like
2

I have the same issue. I have followed similar steps to @dauledk in my project and looked at a few GitHub projects which have a similar setup. I have read the docs which say

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).

I have discovered that this issue has existed before in raven-node and so I would like to ask, is there an example Sentry project that works with Typescript the same way as the JavaScript source-map look-ups work?

3

A follow-up question is how does this work with a create-react-app project using Typescript?

4

Looks like with this command you are uploading all of your TypeScript output, I mean all .js and all .map files.

sentry-cli releases -p aveiro-server files $VERSION upload-sourcemaps --strip-prefix ‘~/src’ --rewrite ./dist/src

I don’t understand why cant we upload only source maps with --ext map if we already inlined all the sources into source maps?
When the project is bigger than “Hello World”, uploading all the sources with source maps really takes a lot of time.

2 Likes
5

I’m also wondering about why I have to upload the output .js files, too? Could anyone find an answer to this?

6

I wondering the same thing here. It works with webpack and minifed js but not with this config (node + TS only)