Proper way to handle file:/// paths

[irkinwork]

Environment

self-hosted (https://develop.sentry.dev/self-hosted/)

Version

22.5.0.dev0

Steps to Reproduce

I try to add Sentry sourcemaps on smarttv app. Sourcemaps are uploaded correctly. It works nice on PC, but not on smarttv, where paths to js files look like:

file:///media/developer/apps/usr/palm/applications/app/main.js And sourcemaps don’t work.

What I already tried:

1.

Sentry.init({
    new RewriteFramesIntegration({
      iteratee: frame => {
        if (!frame.filename) {
          return frame;
        }
        const [filename] = frame.filename.split('/').reverse();

        return { ...frame, filename: `~/${filename}` };
      },
    }),
}

2.

Sentry.init({
    new RewriteFramesIntegration({
      iteratee: frame => {
        if (!frame.filename) {
          return frame;
        }
        const [filename] = frame.filename.split('/').reverse();

        return { ...frame, filename };
      },
    }),
}

3.

Sentry.init({
    new RewriteFramesIntegration({
      iteratee: frame => {
        if (!frame.filename) {
          return frame;
        }
        const [filename] = frame.filename.split('/').reverse();

        return { ...frame, filename: `app:///${filename}` };
      },
    }),
}

4.

new SentryWebpackPlugin({
        urlPrefix: '/media/developer/apps/usr/palm/applications/app/',
}),

5.

new SentryWebpackPlugin({
        urlPrefix: 'file:///media/developer/apps/usr/palm/applications/app/',
}),

What is a proper solution to handle this case?

Expected Result

Sourcemaps work

Actual Result

No sourcemaps

[getsentry-release]

Routing to @getsentry/owners-ingest for triage. ⏲️

[getsentry-release]

Routing to @getsentry/team-web-sdk-frontend for triage. ⏲️

[getsentry-release]

Routing to @getsentry/team-web-sdk-frontend for triage. ⏲️

[lforst]

Hi @irkinwork, thanks for writing in. Can you let us know more about your setup? What do the source map files look like (especially the comment line at the bottom)?

[irkinwork]

@lforst Thank for your response.

Comment line at the bottom looks like:

//# sourceMappingURL=32-3e6aa3.js.map

As I mentioned before I have no problem when I host them on PC.

[lforst]

Is the code on the smart tv running through node or some sort of browser?

[irkinwork]

@lforst App on smarttv running through Chrome like browser.

[lforst]

@irkinwork Sorry for the delay, would it be possible for you to provide screenshots of your artifacts in the UI? The name/path of the artifacts is important.

Basically what we need to do is to match the stack frame filename up with the uploaded file.

[irkinwork]

Names are matched.

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[lforst]

Hi, sorry for not getting back to you sooner. Could you resolve the issue?

If not, here's what I would check. For sentry to pick up your source maps, the comment at the bottom of your minified file (e.g. //# sourceMappingURL=foobar.js.map) needs to match the path of the uploaded artifacts in the sentry interface (e.g. ~/foobar.js.map). Both the minified file, and the source map need to be uploaded.

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

[irkinwork]

@lforst thank for your reply. No, I couldn't solve this issue. But everything is matched.

[lforst]

@irkinwork Not long ago we shipped an update to the Sentry CLI which helps you troubleshoot why your sourcemaps aren't applied. It's called sourcemaps explain and you can read more about it here: https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/

Maybe this will help in finding the culprit.

[lobsterkatie]

@irkinwork, I notice from your screenshot that your names do not in fact match.

If the script that errors is at, say, file:///a/b/c/script.js, and in script.js the sourceMappingURL is script.map.js (meaning the file lives at /a/b/c/script.map.js, since sourceMappingURL is a relative path), then the files need to be uploaded as either file:///a/b/c/script.js and file:///a/b/c/script.map.js or ~/a/b/c/script.js and ~/a/b/c/script.map.js. If that were your only case, you could use sentry-cli to get either of those using urlPrefix and not use RewriteFrames at all. But since you have another case, you'll have to use RewriteFrames.

It's not clear from what you've said what part differs between your two cases, but is it possible to distinguish your files by basename alone? (In other words, you don't have c/script.js living alongside d/script.js, both of which might be in your stacktrace.) If that's the case, then upload your files as you have (so they come out as ~/script.js and ~/script.map.js) and use RewriteFrames with the default iteratee, which will change the script name in the stacktrace to be app:///script.js. (~ matches any scheme (in this case app://) and hostname (in this case the empty string between the second and third slashes).)

If that's not true, use urlPrefix in sentry-cli to upload your files as ~/c/script.js and ~/d/script.js (or however much of the path is necessary to distinguish the files). Then use RewriteFrames with a custom iteratee to cut your filenames down to either ~/c/script.js and ~/d/script.js or app:///c/script.js and app:///d/script.js.

[github-actions[bot]]

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

---

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀