[Bug]: UI Mode with subpath proxying does not report traces during test

[GLeurquin]

Version

1.49.0

Steps to reproduce

Following on this issue: #29564

Using the playwright UI to run any test.

In my case, the playwright UI is running inside a docker running VSCode's codeserver instance. When the UI mode is started (on port 9501), it is proxied on a path that looks like this: https://mydomain/proxy/9501/trace/uiMode.html

Hence all api requests made by playwright UI must include the prefix /proxy/9501, especially for the /trace endpoint. This is already the case for most requests made by UI mode, but not for trace requests happening during the execution of a test (the ones asking for a .json file that is generated by the trace server), where an absolute path is used instead, which prevents the UI from displaying ongoing progress in the test.

• /trace/contexts?trace=... use relative paths correctly --> https://mydomain/proxy/9501/trace/contexts?trace=...
• /trace/file?path=my_trace.zip use relative paths correctly. --> https://mydomain/proxy/9501/trace/file?path=my_trace.zip
• /trace/file?path=my_trace.json use an absolute path which makes them fail. --> https://mydomain/trace/file?path=my_trace.json (no /proxy/9501)

The issue only happens for network calls asking for a JSON trace (zip trace and contexts work)

I think the issue may come from here:

playwright/packages/trace-viewer/src/sw/traceModelBackends.ts

Line 152 in fc19e6e

const url = new URL('trace/file', this.baseUrl);

altough I'm not familiar enough with the code to be 100% sure.

In the sw.bundle.js file that is shipped with the playwright package, this is the line that causes the issue (there are 2 such lines):
fetch("/trace/file?path="+encodeURIComponent(t))

Replacing it by

fetch("./file?path="+encodeURIComponent(t))

In my case solves it, but I'm aware it's a fix inside a bundled file, which is not ideal.

Expected behavior

Running a test in a playwright UI running behind a proxy should display test progress during the test.

Actual behavior

Running a test in a playwright UI running behind a proxy does not display test progress during the test, but only reports on the status when the test ends. A bunch of network errors are seen in the network debug tab of chrome.

Additional context

No response

Environment

System:
    OS: Linux 5.10 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (4) x64 Intel(R) Xeon(R) Platinum 8375C CPU @ 2.90GHz
    Memory: 13.19 GB / 15.35 GB
    Container: Yes
  Binaries:
    Node: 20.15.1 - ~/workspace/.config/versions/node/v20.15.1/bin/node
    npm: 10.9.0 - ~/workspace/.config/versions/node/v20.15.1/bin/npm
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
  npmPackages:
    @playwright/test: ^1.49.0 => 1.49.0

[dgozman]

Assigning to @Skn0tt that has recently touched this area to figure things out.

[Skn0tt]

I'll validate this next, but I believe this bug existed before 1.49, and is already fixed on main by 445ff73.

[Skn0tt]

I've reproduced this behaviour on release-1.49 branch using Caddy and this config to setup a reverse proxy:

http://localhost:3000 {
    handle_path /subdir/* {
        reverse_proxy localhost:4000
	}	
}

It's fixed on main. We could try cherry-picking 445ff73 over to 1.49.1, but it would probably need to be more than one commit.

[Skn0tt]

I verified it also exists on release-1.48, so this isn't a regression. The fix will ship as part of 1.50, and i'll try writing a test to ensure this doesn't break again.