VSCode extension shows blank screen on vscode remote

[RmZeta2718]

After clicking View with VizTracer, I got a blank tab. And it is still blank after waiting for 10 minutes.

I'm using VSCode Remote to connect to a linux server.

But I've tested that it does work in WSL (v0.81.8) though.

Environments:

• VSCode 1.85.1
• VSCode Remote Extension v0.107.1
• VizTracer Extension v0.2.2
• VizTracer package 0.16.1
• local OS: Windows 11
• remote OS: Ubuntu 22.04

[gaogaotiantian]

How large is your trace file? Does it work with command line vizviewer?

[RmZeta2718]

Yes, it works in command line. Sorry I forgot to include this information in the first place.

I can run vizviewer on the linux server, and port forward 9001 in vscode. Then I can open http://localhost:9001/ on my local Windows using Edge browser. Everything works fine this way.

My trace file is around 10MB.

It worth note that sometimes I will also see a blank screen when using the browser, but I just need to refresh the web page in this case and then perfetto shows up as normal. I'm not sure if this is relevant. I can't find a refresh counterpart in vscode.

[gaogaotiantian]

So this behavior is always reproducible when you use vscode extension? It never works? It's possible that this is related to remote extension. I've never tested connecting to a remote server. I'm personally using WSL so that should work.

[RmZeta2718]

I've tried many different result.json and it never works on remote server, 100% reproducible.

As I said, WSL does work in my environment (for the same 10M result.json), so it is weird that it fails on remote.

[gaogaotiantian]

Okay. With right-click -> view with vizviewer, you are supposed to bring up a server process for the trace. Could you try opening localhost:9001 directly in your webbrowser and see if the website shows up? If not, could you confirm that there is such a process in your remote server? You can probably do ps -aux | grep viztracer in your remote server and search for the process.

There could be multiple reasons:

1. The webserver was never brought up
2. The webserver was brought up in a weird place with remote setup
3. Webbrowser of VSCode refuses to load remote content
4. Some network forwarding issues between the remote and local

Experiments mentioned above might help to narrow down the issue.

[RmZeta2718]

Oh! I solved it. I just tried to port forward before clicking View with VizTracer, it's fixed! So, the issue is that the tab opens localhost:port, there is nothing unless correctly port forwarded. I'm not sure why WSL don't need port forward.

[RmZeta2718]

Some experiment details:

1. After clicking View with VizTracer, a blank vizviewer tab shows up as usual.
2. I find the process python -m viztracer.viewer on server, with argument -p 9001, and lsof says 9001 is used by the same PID.
3. Then I port forward 9001 using vscode, it forwards to localhost:9002 for me. I double check that 9001 is indeed in use on my local Windows (using TCPView that I downloaded 2 minutes ago).
4. I can now open localhost:9002 in my browser, everything is fine.

So, what if the ports on local and remote are the same?

1. Preoccupy 9001 use another vizviewer on server
2. View with VizTracer, still a blank tab
3. Now the vizviewer behind vscode has -p 9002 as argument, double checked using lsof
4. I can port forward server:9002 to localhost:9002 in vscode, and open in browser, everything is fine.
5. So I hope this means that 9001 on my local Windows is not a problem.

Then I port forward server:9002 -> localhost:9002 before clicking View with VizTracer (9001 is preoccupied), it works!

But if server uses 9001 and I forward server:9001 -> localhost:9002, the vizviewer tab is still blank, I think it is now opening localhost:9001

So, if the fix is to port forward for me when working with VSCode Remote, it should open tab based on vscode port forward result, instead of the port that server uses.

I'm also using another tool tensorboard, and there is a vscode extension for that. The extension forward 6006 for me when opened in vscode. And if localhost:6006 is in use, it correctly forwards to and opens localhost:6007

I think there is a built-in way to do this. For example, when I run vizviewer in vscode command line, it will automatically port forward.

I don't know if there is a better solution, it's now up to you, my hero.

[gaogaotiantian]

Okay seems like I need to somehow forward the port. I'll take a look at it when I get a remote server! Thanks for the experiments!

[gaogaotiantian]

This is probably fixed by 0.2.3 extension. Could you try it out with the latest extension?