RewriteFrames not functional in browser environments

[segevfiner]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/vue

SDK Version

7.23.0

Framework Version

Vue 3.2.40

Link to Sentry event

https://sentry.io/organizations/swimm/issues/3788945788/events/387150439b9a4cb787c4582e97bd40ae/?project=4504236048646144&query=is%3Aunresolved&referrer=previous-event

Steps to Reproduce

We have a virtual server (Inside a VS Code webview, they use a ServiceWorker to simulate it internally), that hosts our assets under a dynamic subdirectory, which is in fact the full path to the file on the users system. As such the filenames in the reported Sentry stack traces include prefix and don't match the uploaded source maps which are uploaded without it. As it is dynamic, I can't just use urlPrefix, so as in similar cases I tried to use RewriteFrames to normalize the uploaded paths to match the actual root Sentry knows about. But... RewriteFrames doesn't do anything in the browser by default when just specifying root, and it looks like I'll have to write my own iteratee. This is not very convenient. I'd rather it just worked given the proper root path to strip even in browser context.

Steps to Reproduce:

1. Install Sentry in any web project hosted in a web server subdirectory, yet don't use urlPrefix, instead try to use RewriteFrames to normalizes the paths.

Expected Result

RewriteFrames should support such scenarios.

Actual Result

It doesn't do anything due to the check at

sentry-javascript/packages/integrations/src/rewriteframes.ts

Line 77 in 71b308f

if (isWindowsFrame || startsWithSlash) {

, as it doesn't know how to handle URLs instead of paths.

[segevfiner]

Ended up doing something like this (We are setting the base in an HTML base tag):

      new RewriteFrames({
        // https://github.com/getsentry/sentry-javascript/issues/6423
        iteratee(frame) {
          if (!frame.filename) {
            return frame;
          }

          const re = new RegExp(`^${escapeRegExp(document.head.baseURI)}`);
          frame.filename = frame.filename.replace(re, 'app:///');

          return frame;
        },
      }),

This is harder then it should have been...

[lforst]

Hi, thanks for writing in. How exactly would you have wanted the root option to behave here?

[segevfiner]

I want to give it my website root path or full URL, and have it stripped from the start of filenames, kinda like what I'm doing in the code snippet I sent, this was what I needed to do to handle the dynamic subpath this web page is served under.

[lforst]

Makes sense. Considering that this is somewhat breaking behaviour I think we should do this in a major release.