Sourcemaps not being applied.

[wilco-superbalist]

Upon build we can see that the files are being uploaded to sentry successfully as in the image:

We can see issues coming in under the new release and when browsing to the files with their hashes they are definitely available at those paths:

However the code is still minified on the details/dashboard screen:

our webpack config (the relevant parts):

const RELEASE_HASH = Math.round((new Date()).getTime() / 1000)

devtool: isProd
    ? '#hidden-source-map'
    : '#cheap-module-source-map',
output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/dist/',
    filename: '[name].[chunkhash].js'
},
plugins: [
    new webpack.DefinePlugin({
        'process.env.RELEASE_HASH': JSON.stringify(RELEASE_HASH || '')
    }),
    new SentryPlugin({
        release: RELEASE_HASH,
        include: './dist',
        ignore: [
            'node_modules',
            'webpack.base.config.js'
        ],
    })
]

Any assistance would be appreciated thank you.

[kamilogorek]

Hey @wilco-superbalist, notice that you are serving your files from root directory ~/app.12332123.js, where your frames point to ~/dist/app.123123123.js.

To fix this, add urlPrefix option mentioned here https://github.com/getsentry/sentry-webpack-plugin#options and it should work just fine.

[wilco-superbalist]

thanks @kamilogorek appreciate the assistance, I was able to get the correct routes into sentry. I am now waiting for assistance on this thread https://forum.sentry.io/t/add-query-string-to-js-and-js-map-requests/4036 to be able to test. I will report as soon as I can resolve. Thank you again.

[miksansegundo]

I had this same issue with my integration. I think my artifacts are well now because I'm serving the bundle form /assets:

Errors

Artifacts

But the code is code is still minified in our Sentry's dashboard. @kamilogorek do you know if the source-maps should start working immediately after I uploaded the artifacts with the correct path?

Any help would be much appreciated.

[kamilogorek]

@miksansegundo yes they should. Can you provide a link to the event in Sentry dashboard which I can investigate?

[miksansegundo]

Thanks @kamilogorek. Seems to be working now in most of them. First I had this config but didn't work:

new SentryCliPlugin({
    include: './public/assets',
    ignore: ['node_modules', 'webpack.*.js'],
    release: packageFile.version,
    urlPrefix: '~/assets'
})

This did it:

new SentryCliPlugin({
    include: './public',
    ignore: ['node_modules', 'webpack.*.js'],
    release: packageFile.version,
})

But I can see some errors still minified. Here you have one: https://sentry.io/demio-u7/demio-viewer/issues/571707692 I don't expect to see the original files of libraries like React but in that example the frames that are in my code don't show the original source, here a frame as example:

Other you have other event: https://sentry.io/demio-u7/demio-viewer/issues/571421152/

[kamilogorek]

Closing due to inactivity. Feel free to reopen if still relevant, just a cleanup.

[NikolaJankovic]

I'm having a similar issue. I've uploaded the sourcemaps using the sentry cli, the output of the cli references the minified files and their respective source files and the release is visible on the dashboard but events are still minified.

This is for an angular project, the build is stored in /dist with the sourcemaps.

This is for a new issue that's only occurred after the release.

On a semi-related note though, is there any way to have old issues reference the sourcemap? If I delete an issue and wait for it to be raised again will it reference the release?

[miksansegundo]

@nikolaJankovic the paths must match identically. In my case they had one difference because the build version number was added to the end of the URL​ to do cache busting.

Take that as a clue. If finally that is your issue there is a way to add a suffix to the artifact names: https://github.com/getsentry/sentry-webpack-plugin/issues/65

[NikolaJankovic]

@miksansegundo The paths should be identical, the sourcemaps are automatically generated with the angular cli and by default they're placed in the same directory as the minified files. The filenames are also identical and angular cli does cache busting by default by using the file hash as the filename.

Also, the sentry cli seems to trace the sourcemaps just fine - when I upload them to the release the output mentions that its found each minified file and its respective map file.

[miksansegundo]

I mean the artifact names and the paths requested on your app.

Because your app is doing cache busting the whole path could not be identical.

Here is the reply I got from support explaining my issue:

Taking a look at the JSON for that issue, it looks like the abs_path is resolving to "/assets/project.bundle.js?v=5.0.10", which is what we match on for the uploaded artifacts. In this case, your uploaded artifact should be named ~/assets/project.bundle.js?v=5.0.10 (notice the addition of ?v=5.0.10).

Hope that helps.

[NikolaJankovic]

@miksansegundo You're right but I'm not sure why. I looked into the json issue file and the stacktrace references my local filesystem for some reason (i.e. abs_path: https://website.com/Users/username/Documents/Projects/app-user/node_modules/zone.js/dist/zone.js). Also, even though I'm uploading the sourcemaps to sentry and not hosting them, for whatever reason the json file lists the path to the sourcemaps to be remote on my site (i.e. sourcemap: "https://app.com/polyfills.c881b0089dab66ac560d.bundle.js.map").

I'll move this discussion to the sentry-cli repo since it's more appropriate to my use case, but if you have any ideas or if please let me know.

Also, when I said angular does cache busting by default I meant that it names the minified files with a hash to any updates are reflected in the filename. That shouldn't be an issue here because both the minified js file and the map file share the hashed filename.

[icewind7030]

@kamilogorek Sorry, Here's my event frame display and I tried every possible urlPrefix but none of them worked, could you please tell me what I made wrong?

JSON for the issue:

{
  "id": "985c2e2baa7842c3b16df08cecd1872a",
  "project": 2,
  "release": null,
  "dist": null,
  "platform": "javascript",
  "culprit": "/fe/extra/sentry-test1/dist/js/app.c2ed46a6.js in a.<anonymous>",
  "message": "TypeError Cannot read property 'nickName' of undefined /fe/extra/sentry-test1/dist/js/app.c2ed46a6.js in a.<anonymous>",
  "datetime": "2018-12-18T13:44:26.000000Z",
  "time_spent": null,
  "tags": [
    ["transaction", "/fe/extra/sentry-test1/dist/js/app.c2ed46a6.js in a.<anonymous>"],
    ["level", "error"],
    ["url", "https://test.du.163.com/fe/extra/sentry-test1/dist/index.html"],
    ["device.family", "iPhone"],
    ["sentry:user", "ip:123.58.160.153"],
    ["device", "iPhone"],
    ["os.name", "iOS"],
    ["browser.name", "Mobile Safari"],
    ["os", "iOS 11.0"],
    ["browser", "Mobile Safari 11.0"]
  ],
  "contexts": {
    "device": {
      "model": "iPhone",
      "brand": "Apple",
      "family": "iPhone"
    },
    "os": {
      "version": "11.0",
      "name": "iOS"
    },
    "browser": {
      "version": "11.0",
      "name": "Mobile Safari"
    }
  },
  "errors": [],
  "extra": {},
  "fingerprint": ["{{ default }}"],
  "key_id": 2,
  "metadata": {
    "type": "TypeError",
    "value": "Cannot read property 'nickName' of undefined"
  },
  "received": 1545140666.0,
  "sdk": {
    "version": "4.4.1",
    "name": "sentry.javascript.browser"
  },
  "sentry.interfaces.Breadcrumbs": {
    "values": [{
      "category": "ui.click",
      "timestamp": 1545140666.07,
      "message": "body > div#app > button",
      "type": "default"
    }, {
      "category": "xhr",
      "timestamp": 1545140666.098,
      "type": "http",
      "data": {
        "url": "/login/context.json",
        "status_code": "200",
        "method": "GET"
      }
    }]
  },
  "sentry.interfaces.Exception": {
    "exc_omitted": null,
    "values": [{
      "stacktrace": {
        "frames": [{
          "function": "a.<anonymous>",
          "abs_path": "https://test.du.163.com/fe/extra/sentry-test1/dist/js/app.c2ed46a6.js",
          "module": "fe/extra/sentry-test1/dist/js/app",
          "in_app": false,
          "lineno": 1,
          "colno": 2068,
          "filename": "/fe/extra/sentry-test1/dist/js/app.c2ed46a6.js",
          "context_line": "{snip} (\"/login/context.json\").then(function(n){e.nickName=n.user.nickName})}}},c=i,a=(t(\"5c0b\"),t(\"2877\")),s=Object(a[\"a\"])(c,o,u,!1,null,null,nul {snip}"
        }]
      },
      "type": "TypeError",
      "value": "Cannot read property 'nickName' of undefined"
    }]
  },
  "sentry.interfaces.Http": {
    "url": "https://test.du.163.com/fe/extra/sentry-test1/dist/index.html",
    "headers": [
      ["User-Agent", "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1"]
    ]
  },
  "sentry.interfaces.User": {
    "ip_address": "123.58.160.153"
  },
  "type": "error",
  "version": "7"
}

My webpack plugin config

      new SentryCliPlugin({
        include: 'dist',
        urlPrefix: '~/fe/extra/sentry-test1/dist/' //I tried 'https://test.du.163.com/fe/extra/sentry-test1/dist/', '~/dist/' and default value
      })

My artifacts looks fine

The error still displays in the minified code so I can not figure out why this not work? I use hidden-source-map and not publish the .map file to public, is this the reason? Cause the sourcemap display of sentry works when I use just source-map mode and publish the .map file as well.

[maxime1992]

@NikolaJankovic have you found how to fix this?

I'll move this discussion to the sentry-cli repo since it's more appropriate to my use case

Could you please share the link?

I'm facing the same issue with Angular-Cli :sweat_smile: ...

[chj-damon]

@kamilogorek I have no idea why sentry still looks for the sourcemap in my environment even though I've already uploaded all the sourcemap to sentry, which I can see them in the Artifacts tab in Release.

[kamilogorek]

@chj-damon can you link me to this specific event in your Sentry dashboard?

[chj-damon]

@kamilogorek sorry to bother you. I've solved this problem. It's because some configuration went wrong in my docker environment.

[kamilogorek]

No worries, thanks for letting me know. Cheers! :)

[alexeychikk]

Not working for me:

My config:

{
  include: path.join(__dirname, "../../www/assets/js"),
  release: config.getRelease(packageJson.version),
  debug: false,
  dryRun: config.dryRun,
  configFile: path.resolve(__dirname, ".sentryclirc"),
  urlPrefix: "/assets/js",
}

[kamilogorek]

@alexeychikk same question: can you link me to this specific event in your Sentry dashboard?

[alexeychikk]

@kamilogorek http://sentry.cluster-staging.trucknet.io/share/issue/d21a342a871942ac961fc44f15983148/

[kamilogorek]

Oh, it's self-hosted. I cannot see the original event this way, sorry. I'm not much of a help when it comes to configuring Sentry locally. Your best bet is asking in the main repo, as this is just a webpack plugin wrapper and it has nothing to do with the server resolution.

[alexeychikk]

@kamilogorek I think the problem is that Sourcemap header is not matching uploaded sourcemap filename.
Response body for main.027d9124bcf5fa3bf953.js:

{"sha1": "b42c62e813e2a11d996520c781e0b4d3796b5749", 
"dist": null, 
"name": "~/assets/js/main.027d9124bcf5fa3bf953.js", 
"dateCreated": "2019-09-09T12:37:59.018Z",
 "headers": {"Sourcemap": "main.027d9124bcf5fa3bf953.js.map", 
"Content-Type": "application/octet-stream"}, "id": "269572", "size": 2441972}

Response body for the matched sourcemap:

{"sha1": "ea840f0018f8740032b474a86bbbff8aaf3e3664",
 "dist": null, 
"name": "~/assets/js/main.027d9124bcf5fa3bf953.js.map",
 "dateCreated": "2019-09-09T12:38:27.726Z", 
"headers": {"Content-Type": "application/octet-stream"}, "id": "269613", "size": 6471513}

As you can see, name here starts with ~/assets/js/ but in the previous response Sourcemap is a plain filename without any prefixes. It's probably an issue with @sentry/cli.

[ankitduseja]

Same issue. I have verified the source maps locally and using hidden-source-maps. Sentry doesn't pick them up.

[madhu131313]

Same issue, for staging release it worked fine, but for production release in react it didn't worked for me.

[webmstk]

Same issue. It doesn't work

[alexeychikk]

@ankitduseja @madhu131313 @webmstk Guys, if you running self-hosted sentry make sure you have persistentWorkers: true in your values.yaml config. For some reason it's disabled by default thus preventing you from using your uploaded source maps. You won't find this in the docs.

[BYK]

@alexeychikk - I'm not aware of such a config options or any values.yaml. Can you elaborate on what you are referring to so we can do the proper fixes?

[webmstk]

@alexeychikk thanks, but I couldn't find this option for sentry docker image

[alexeychikk]

@BYK @webmstk https://github.com/helm/charts/blob/master/stable/sentry/values.yaml

[BYK]

@alexeychikk that helm chart is not maintained by us. Would you mind filing an issue there to update this value?

[throrin19]

If you run Sentry with docker, You should to use the same volume for all sentry containers (worker, cron and sentry). They should to share their /var/lib/sentry/files directory.

After that the sourcemap resolution works fine

[llisonly]

@throrin19 how to config?

[superman66]

@throrin19 thanks a lot, it works for me.

[paolosanchi]

Hi! I got stuck in getting the source on sentry issues, I followed the troubleshooting but I couldn't solve the problem. I have an angular multi language app, I don't want so have my .map s public on my host, so I publish only the js and upload the sourcemap to sentry. using these commands:

sentry-cli releases new myapp@2.2.19 --finalize
sentry-cli releases files myapp@2.2.19 upload-sourcemaps ./www

From the issue, in the sentry panel, i can see the Release, click on it and reach the artifacts I have uploaded, so I suppose the "release" part is ok. the jsfile url is like:

https://app.myapp.io/main-es2015.443768d30fc24e8b4fa6.js the last line of this file is this:

//# sourceMappingURL=main-es2015.443768d30fc24e8b4fa6.js.map I the artifact archive they it is listed like this:

~/en/main-es2015.443768d30fc24e8b4fa6.js
~/en/main-es2015.443768d30fc24e8b4fa6.js.map

and in the json of the event I have this

"errors": [{
        "type": "fetch_invalid_http_code",
        "value": 404,
        "url": "https://app.myapp.io/en/polyfills-es2015.8349f94245c376c7ce6b.js.map"
    }, {
        "type": "fetch_invalid_http_code",
        "value": 404,
        "url": "https://app.myapp.io/en/main-es2015.25e300e8d5d5aeb29fd8.js.map"
    }, {
        "type": "fetch_invalid_http_code",
        "value": 404,
        "url": "https://app.myapp.io/en/40-es2015.932da1c04859196a3ecd.js.map"
    }
],

and this:

{
    "function": "Object.onInvokeTask",
    "module": "en/main-es2015",
    "filename": "/en/main-es2015.25e300e8d5d5aeb29fd8.js",
    "abs_path": "https://app.myapp.io/en/main-es2015.25e300e8d5d5aeb29fd8.js",
    "lineno": 3,
    "colno": 884348,
    "pre_context": [
        "var $localize=Object.assign(void 0===$localize?{}:$localize,{locale:\"en\"});",
        "\"use strict\";(function(global){global.ng=global.ng||{};global.ng.common=global.ng.common||{};global.ng.common.locales=global.ng.common.local {snip}"
    ],
    "context_line": "{snip} arZone:!0},onInvokeTask:(n,r,i,o,s,a)=>{try{return _y(e),n.invokeTask(i,o,s,a)}finally{(e.shouldCoalesceEventChangeDetection&&\"eventTask\"=== {snip}",
    "post_context": [
        "//# sourceMappingURL=main-es2015.25e300e8d5d5aeb29fd8.js.map"
    ],
    "in_app": true,
    "data": {
        "sourcemap": "https://app.myapp.io/en/main-es2015.25e300e8d5d5aeb29fd8.js.map"
    }
},

one last detail: when I upload the files I get this

> Found 1740 release files
> Analyzing 1740 sources
> Rewriting sources
> Adding source map references                                                                                                                              0
> Bundled 1740 files for upload                                                                                                                             0
> Uploaded release files to Sentry                                                                                                                          0
> File upload complete (processing pending on server)                                                                                                       )

Source Map Upload Report
  Scripts
    ~/de/90-es2015.24335a64e17ba1c555d5.js
    ~/de/93-es2015.0a81b1e9717c2ff01a68.js
    ~/de/assets/js/console-log-viewer.js
    ~/en/90-es2015.24335a64e17ba1c555d5.js
    ~/en/93-es2015.0a81b1e9717c2ff01a68.js
    ~/en/assets/js/console-log-viewer.js
    ~/it/90-es2015.24335a64e17ba1c555d5.js
    ~/it/93-es2015.0a81b1e9717c2ff01a68.js
    ~/it/assets/js/console-log-viewer.js
  Minified Scripts
    ~/de/1-es2015.0516a4a9df42d75645f1.js (sourcemap at 1-es2015.0516a4a9df42d75645f1.js.map)
    ~/de/1-es5.0516a4a9df42d75645f1.js (sourcemap at 1-es5.0516a4a9df42d75645f1.js.map)
    ~/de/10-es2015.2a9cf9ef216acfbafa4c.js (sourcemap at 10-es2015.2a9cf9ef216acfbafa4c.js.map)
    ~/de/10-es5.2a9cf9ef216acfbafa4c.js (sourcemap at 10-es5.2a9cf9ef216acfbafa4c.js.map)
    ~/de/100-es2015.ccb39294416f8c45f5a7.js (sourcemap at 100-es2015.ccb39294416f8c45f5a7.js.map)
...

I really can't understand what I'm doing wrong, if upload the map files to the host it works, so the map files are valid. Somehow sentry does't match the files in the artifacts.

[kamilogorek]

@paolosanchi do you use on-premise or SaaS? If latter, can you provide a link to one of affected events?

[paolosanchi]

oh, sorry, I forgot to mention, I host it on firebase host. You can download the event here https://www.mediafire.com/file/h1yg0aaemtkl62z/download.json/file Please, note that I had to rename the real host name because the app is not yet on the market. the 404 of the map file is returned with the firebase standard page and to get this I've configurated a rewrite in the the firebase.json like this:

      "rewrites": [
        {
          "source": "**/*.js.map",
          "destination": "**/*.js.map"
        },

It was one of my attempt to make it working

[kamilogorek]

"dist": "web",

dist is treated as a "subdirectory" within the release itself when it comes to artifacts. This mean that you need to change this command sentry-cli releases files myapp@2.2.19 upload-sourcemaps ./www to sentry-cli releases files myapp@2.2.19 upload-sourcemaps ./www --dist web

Also make sure that release is the same, as your uploaded JSON file points to 2.2.18, not 2.2.19.

[paolosanchi]

Also make sure that release is the same, as your uploaded JSON file points to 2.2.18, not 2.2.19.

sure

Thank you very, very much @kamilogorek. The problem was exactly the "dist" thing, I saw just now in the artifacts list the label "none" with the hint "no distribution set".

The problem was exactly that.

Maybe you could add another tip about this in the troubleshooting, it seems it's missing: https://docs.sentry.io/platforms/javascript/guides/angular/sourcemaps/troubleshooting_js/

[kamilogorek]

Sure thing: https://github.com/getsentry/sentry-docs/pull/3943

[Eruich]

@kamilogorek sorry to bother you. I've solved this problem. It's because some configuration went wrong in my docker environment.

hi,小姐姐你好，我也遇到同样的问题，可以分享一下你改了哪个变量吗，非常感谢

[SoldierAb]

@kamilogorek I have no idea why sentry still looks for the sourcemap in my environment even though I've already uploaded all the sourcemap to sentry, which I can see them in the Artifacts tab in Release.

same issue = =. can you tell me how to resolve that? please.

[kamilogorek]

@SoldierAb can you show an actual path to the file (minified + raw button on the right side)? As well as all event tags from the section above the stacktrace

[SoldierAb]

@SoldierAb can you show an actual path to the file (minified + raw button on the right side)? As well as all event tags from the section above the stacktrace

My Config:

{
  // sentry-cli configuration
  authToken: process.env.VUE_APP_SENTRY_AUTH_TOKEN,
  url: process.env.VUE_APP_SENTRY_HOST,
  org: process.env.VUE_APP_SENTRY_ORG,
  configFile: 'sentry.properties',
  project: pkg.name,
  release: `${pkg.name}@v${pkg.version}`,
  urlPrefix: "~/thematic/xqkfhd/js/",
  // webpack specific configuration
  include: "./dist",
  ignore: ["node_modules"],
  errorHandler (err){
   console.error('\n\n@sentry/webpack-plugin upload sourceMap error', err, '\n\n');
  },
}

Sorry I can't find the original error message, but now I have encountered the same problem in sentry22.2.0 as shown in the figure above.

[kamilogorek]

@SoldierAb change urlPrefix: "~/thematic/xqkfhd/js/", to urlPrefix: "~/thematic/xqkfhd/",. You can clearly see that the path has a doubled /js/js part :)

[SoldierAb]

@SoldierAb change urlPrefix: "~/thematic/xqkfhd/js/", to urlPrefix: "~/thematic/xqkfhd/",. You can clearly see that the path has a doubled /js/js part :)

Works perfectly, thanks for your reply

[kamilogorek]

@MudasirFarooq reposting due to exposed auth token.

---

@kamilogorek hi! i have an issue that my sourcemaps not applied on sentry issues . I can't find the original error message. i have tried sentry cli to upload sourcemap that react generate by default also use webpack to generate and upload sourcemap to sentry.

Details using webpack. my webpack cnfigration

new SentryCliPlugin({
        include: './dist',
        urlPrefix: "~/static/js",
        ignoreFile: '.sentrycliignore',
        ignore: ['node_modules', 'webpack.config.js'],
        configFile: 'sentry.properties',
        release: '0.4.3',
        project: 'react',
        org: 'codility',
        attach_stacktrace: true,
        authToken: "<redacted>"
})

Sourcemap that react generate uploaded using sentry cli show same stacktrace

when Sentry logs an error, stacktrace is from the minified file. It's not using the sourcemaps. What am I doing wrong in my setup? Or what other info should I give to get help? please response as soon as possible i am stuck on this from past 25 days.Any help will be highly appreciated.

[kamilogorek]

It is mapped, however sourcemaps are malformed, which the error points you to. You either upload maps that are not related to the release you trigger error with, or you upload them somewhere in the middle of webpack pipeline, and there are more transforms after the upload. If sourcemaps are malformed, there is nothing we can do to fix that.

[MudasirFarooq]

@kamilogorek stack trace -> source maps mapped on incorrect file.could you please tell me why this is happening.flow is working fine problem is source maps mapped on incorrect files. Error on browser : source maps working perfect on browser

stack trace in sentry

please guide me..thanks

[MudasirFarooq]

@benvinegar @kamilogorek please check this

[kamilogorek]

Then you are most likely either uploading artifacts which then are somehow transformed further, or you are using different artifacts in production, than the one you upload.