Sentry: Stack Trace => Source Map mapping incorrect

Created on 2 Aug 2018 · 8Comments · Source: getsentry/sentry

Generally source map feature works for me on sentry.io, however stack trace is not mapped correctly. For example on chrome I see this:

airchitect

And when I click that error code in vue component is highlighted correctly which means that chrome parses source map correctly:

menubar_and_airchitect

On sentry however I see this: (as you can see it does not refer to TestErrors.vue component code but instead to some "file" ./src/pages/TestErrors.vue?06aa

typeerror__cannot_set_property__xyz__of_undefined

And here is what sentry shows when "minified" is clicked:

typeerror__cannot_set_property__xyz__of_undefined

I checked with some sourcemap visualization tool and here is how it looks like:

source-map-visualization

Why sentry is loading TestErrors.vue?06aa instead of TestErrors.vue? What is exactly TestErrors.vue?06aa? Why it works in chrome and not with sentry?

I use source maps hosted next to their original files, I also ensured that the map file downloaded by sentry matches original file.

Source

alekbarszczewski

All 8 comments

Guys any idea what might be wrong? I would like to use Sentry in prod but there is no point if I am not able to track errors correctly...

alekbarszczewski on 7 Aug 2018

@alekbarszczewski Do you have a reproduction repo handy that I can take a look at?

billyvg on 30 Aug 2018

👎1

@billyvg I was able to reproduce it: https://github.com/alekbarszczewski/sentry-test.
Instructions are in a README. Just tested it and again source mapping looks incorrect.

alekbarszczewski on 30 Aug 2018

I'm confused. Your visualization tool appears to have output the same result for the stack frame with TestErrors.vue?06aa. Ours just snips the context because we can't store the entire lines, which is thousands of characters.

Re: TestErrors.vue?06aa – in your screenshot at the top, Chrome generates that same value, so again this is not the case that Sentry is generating that value.

Ah – I see it looks like some frames are "missing" to you. Did you click "Full" frames to make sure we haven't attributed some of these to Vue? Applying a source map does not alter the number of frames.

benvinegar on 1 Oct 2018

👎1

Hmm, you are right, after clicking on "full" and expanding first stack entry I see correct code that caused the error:

typeerror__cannot_set_property__xyz__of_undefined

Strange, I could have sworn that before there wasn't such entry there... Anyway, thanks, it works as expected now :)

alekbarszczewski on 1 Oct 2018

^I'm a little concerned that we tagged that as in_app=False (meaning, not your application code). That might be something worth exploring.

cc @kamilogorek

benvinegar on 1 Oct 2018

👎1

@benvinegar @alekbarszczewski this is a very odd issue, which seems to be broken on the webpack/vue side.

When you investigate stack trace of the error, you can see that first two frames, despite coming from the same file, have different absolute paths:

first: webpack:///src/TestErrors.vue'
second: 'webpack:///./src/TestErrors.vue?da2d'

In addition to this, when you dig into source maps, it appears that TestErrors file is mapped multiple times, where it definitely shouldn't.

{
  "sources": [
    "webpack:///webpack/bootstrap",
    "webpack:///./src/TestErrors.vue?6f0c",
    "webpack:///src/TestErrors.vue",
    "webpack:///./src/TestErrors.vue",
    "webpack:///./src/TestErrors.vue?da2d",
    "webpack:///./src/App.vue",
    "webpack:///./src/App.vue?d096",
    "webpack:///./src/app.js"
  ]
}

We cannot easily fix this, as webpack:///<anything other than . or ~> is a reserved pattern, which we use to detect internal webpack frames (which is why the top-most frame is guessed as not in_app one), see: https://github.com/getsentry/sentry/blob/1976f480c9fbe46515f2c3a61558fdc691bfc5f3/src/sentry/lang/javascript/processor.py#L667-L712