google/perfetto

deploy perfetto ui in the remote server

shovsj opened this issue · 12 comments

shovsj commented

Is this possible to deploy the perfetto ui in the remote server?

I'm just testing using run-dev-server, which seems to use build.js to create a http server.
I slightly modify startServer function in the perfetto/ui/build.js to run the server to listen 0.0.0.0:30000 for example.

I passed the perfetto protobuf file using window.postMessage to open a new tab.
It seems work(my trace is showing well) but an error occurs like:

To assist with debugging please attach or link to the trace you were viewing.

Viewed on: http://MY_REMOTE_HOST:PORT

ReferenceError: caches is not defined
ReferenceError: caches is not defined
    at Object.<anonymous> (http://MY_REMOTE_HOST:PORT/v18.0.0/frontend_bundle.js:10341:28)
    at Generator.next (<anonymous>)
    at http://MY_REMOTE_HOST:PORT/v18.0.0/frontend_bundle.js:131:75
    at new Promise (<anonymous>)
    at Object.__awaiter (http://MY_REMOTE_HOST:PORT/v18.0.0/frontend_bundle.js:127:16)
    at Object.cacheTrace (http://MY_REMOTE_HOST:PORT/v18.0.0/frontend_bundle.js:10309:18)
    at TraceController.<anonymous> (http://MY_REMOTE_HOST:PORT/v18.0.0/frontend_bundle.js:86545:27)
    at Generator.next (<anonymous>)
    at fulfilled (http://MY_REMOTE_HOST:PORT/v18.0.0/frontend_bundle.js:128:62)

v18.0.0 45571639857aa59be41f77a2d774f6577d03c86c
UA: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

when I use the default setting, localhost:10000, It works well.

LalitMaganti commented

It's not clear to me what you're trying to accomplish. Are you trying to replicate a ui.perfetto.dev instance somewhere else? Or are you just trying to load a remote trace on ui.perfetto.dev? Each of these has a different solution.

shovsj commented

Yes, I want to replicate ui.perfetto.dev in our cluster, where internet access is blocked by firewall.

shovsj commented

Or, I just want to use simply like jupyter or tensorboard, if it is possible.
Http server will be run in the remote server not in localhost.

LalitMaganti commented

If you just want to replicate ui.perfetto.dev, then you just need to run the build ui/build script from the Perfetto repo. This will then build the UI in the out/ui folder and place the final artifacts in out/ui/ui/dist folder.

You can then use any webserver (Apache, NGINX, whatever your company uses to host static content) and serve the contents of the out/ui/ui/dist folder and that will replicate what we do for ui.perfetto.dev

shovsj commented

Yes, It was what I did.

My question is about the address.
When I access the web service using localhost:10000 (using tunneling since webserver is in the remote host), it works well.
However, if the server listens to 0.0.0.0:10000 and if I directly access without tunnel(MY_REMOTE_HOST:10000),
then I faced the error message.

Is there any restriction? do I have to use localhost or the same domain name like perfetto.dev?

shovsj commented

This is when I access directly to the remost host - CACHES RAISE AN EXCEPTION
image

This is when I access through localhost, using tunneling - CACHES CAN BE USED
image

primiano commented

I don't follow the discussion here.
The Perfetto UI is fully static, doesn't require any special server.
run-dev-server is only for local testing and should not be used in produciton.
If you want to run your own copy just use nginx, apache2 or any other web server able to host static content (any HTTP server on earth).

shovsj commented

Thanks, I expect so.

I think I can reproduce it simply, just using python, could you test this?

I just downloaded the output files in dist folder(index.html, v18.0.0 folder, ...)
in this folder, run the following script if python is properly installed,

python3 -m http.server 31015

which will run a simple http server listening to 0.0.0.0:31015, NOT 127.0.0.1:31015
then we can access to the perfetto ui through localhost:31015 and also my_host_ip:31015
(if the server is run in the remote server, then we can use port-fowarding to access through localhost.)

In each page, using the devtools to check if we can use caches or not.
My result is the figures in the above,
in localhost it was possible,
but in my_host_ip, it raised an exception.

primiano commented

What is the exception you are concerned about?
The LiveReload SSE error only happens if you use the run-dev-server which exposes hooks for some livereload code.

primiano commented

Ah I know what's going on, you need to use a HTTPS server with SSL/TLS if it's != localhost.
There are a number of features (serviceworker, webusb, ...) that browser allow only if the origin is "secure".
With some degree of simplification an origin is considered "secure" if:

  • It's localhost
  • It's a non-localhost server which uses https

so if you bind 0.0.0.0 and then connect to 192.168.x.y (even if that happens to be your own IP) that will be considered as non-secure. It really needs to be 127.0.0.1 to be considered secure. Otherwise use SSL.

  • 👍1
shovsj commented

Okay, I got it.
Then I should use https instead of http. I will try this, thanks!

shovsj commented

It was exactly the secure origin problem! Thanks again.

I just tested using chrome with unsafely-treat-insecure-origin-as-secure flag as in
https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339

and It works well, as expected.

  • 👍1