Sentry-javascript: Typescript + Node sourcemaps not working

[matomesc]

I'm writing a node app with Typescript and I'm trying to integrate Sentry into my project, however sourcemaps are not working and the Sentry issues are referencing the generated .js files.

The documentation I used for reference: https://docs.sentry.io/platforms/node/typescript/ and https://docs.sentry.io/platforms/javascript/sourcemaps/generation/

My tsconfig.production.json is:

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

And I'm initializing the Sentry library using:

Sentry.init({
  dsn: config.get('sentry.dsn'),
  release: '0.0.1',
  integrations: [
    new Sentry.Integrations.RewriteFrames({
      root: global.__rootdir__
    })
  ]
});

I'm manually uploading the files to Sentry using:

sentry-cli releases files 0.0.1 upload-sourcemaps build/

Any idea on what's going on?

[kamilogorek]

@matomesc can you provide a link to any event in your Sentry project that uses this release? (original url, not shareable one)
You are using inlineSource, so you should be just fine even without uploading source maps though.

[matomesc]

@kamilogorek I tried uploading the sourcemaps without the files and that doesn't work either. Here is an event: https://sentry.io/mtx/smslivedev-server/issues/871999608.

[kamilogorek]

You missed 2nd part of the docs – https://docs.sentry.io/platforms/node/typescript/#2-changing-events-frames

Your frames are pointing to C:\dev\projects\<redacted>\server\build\index.js in Object.<anonymous> at line 87:7 which we cannot resolve, as it's a local address.

[matomesc]

I've set that up already.

I'm setting the root directory in my index.ts (entry file) like in the docs global.__rootdir__ = __dirname || process.cwd();. Then when I initialize the Sentry client I'm using the rewrite frames integration.

I have my .ts files in server/src and the .js files get built in server/build. However the frames never get rewritten, even when the .ts files are not compiled and run with ts-node.

[kamilogorek]

Ah, I completely missed the fact that you are using local windows instance. Because of that, this check will never be true https://github.com/getsentry/sentry-javascript/blob/28b8164877cf151bba42374d90309441f5d7bb7d/packages/core/src/integrations/pluggable/rewriteframes.ts#L28-L32

(we check for / as its nodes convention to use full-path for user-generated frames, and native frames starts without /).

Once deployed to any unix based system, it will work just fine, but not on windows local file system.

You have to provide custom iteratee, something like this (make sure that paths are correct):

function framesModified (frame) {
    if (frame.filename && frame.filename.startsWith('C:')) {
      const base = relative(process.cwd(), frame.filename);
      frame.filename = `app:///${base}`;
    }
    return frame;
}

Sentry.init({
  integrations: [new Sentry.Integrations.RewriteFrames({
    iteratee: framesModifier
  })]
})

To verify that you are sending a correct payload, you can use beforeSend config option, or:

// https://docs.sentry.io/platforms/javascript/pluggable-integrations/#debug

Sentry.init({
  integrations: [new Sentry.Integrations.Debug({ stringify: true })
})

And check exception.values[0].frames data. It should have filename of each frame set to app:///<something> where <something> is the same filepath as the one you upload using sentry-cli.

[matomesc]

@kamilogorek It's been a while but I'm still struggling with this.

I've deployed my app to Heroku but sources are still not found. See the following issues: https://sentry.io/organizations/smslive/issues/983259817, https://sentry.io/organizations/smslive/issues/1022911013.

I noticed that the app:// path for the exception file is different in the issues above. The second issue uses the correct path relative to the root while the first one has just file name. The sourcemaps seem to have the correct file and path.

[kamilogorek]

@matomesc the release you are pointing to (https://sentry.io/organizations/smslive/releases/fcd8534e7444c407b20f40153fc7532a7c8ebd1b/artifacts/) has no source files uploaded, just maps. Maps are used to read minified sourcefiles, thus we need both, .js.map _and_ .js files.

[matomesc]

@kamilogorek everything is working now you're a gem.