How to nicely render instant events?

[Jan Feitsma]

Hi!

I am trying to use the trace viewer to visualize python logging+autologging.

Autologging is like tracing, this is the easy part.

But logging events (INFO, DEBUG etc) are not so easy, or, I am missing something?

If I use instant events ("ph":"i"), then events are rendered only one pixel wide. The problem is: this is basically invisible to the user ...

Example picture, I added the arrows to highlight.

For completeness, this is the example corresponding log fragment produced by logging/autologging. (I made a tool to convert this into tracing .json.)

2022-05-08 10:27:12,727408:TRACE:demo.py,6:__init__:CALL *('some_argument',) **{}
2022-05-08 10:27:12,727512:TRACE:demo.py,9:f:CALL *() **{}
2022-05-08 10:27:12,727564:INFO:demo.py,10:f:hi!
2022-05-08 10:27:12,727655:TRACE:demo.py,9:f:RETURN None
2022-05-08 10:27:12,727710:DEBUG:demo.py,8:__init__:__init__ done
2022-05-08 10:27:12,727738:TRACE:demo.py,6:__init__:RETURN None
2022-05-08 10:27:12,727767:TRACE:demo.py,12:g:CALL *() **{}
2022-05-08 10:27:12,727793:TRACE:demo.py,12:g:RETURN 3
2022-05-08 10:27:12,727838:WARNING:demo.py,21:<module>:done

So my main question: Is there a way to have these events rendered as circles or triangles, insensitive to zoom level? (Am I correct in assuming that using "instant events" is correct approach?)

I would be really happy to have something similar to the automagic alerts, or circles from the top lane of the screenshot from Android demo.

Thanks in advance!

Best regards,

Jan Feitsma

[Stephen Nusko]

Have you tried using ui.perfetto.dev? (docs at perfetto.dev), instant events there are rendered as arrows: 

Note for completeness chrome://tracing is in maintenance mode and JSON based traces are mostly supported in ui.perfetto.dev, but some support is missing, and proto format is the new standard in chromium.

Cheers,

Stephen

--
You received this message because you are subscribed to the Google Groups "tracing" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tracing+u...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/tracing/12d26242-c5ac-4f10-bd2f-e596a6f8e4b5n%40chromium.org.

[Jan Feitsma]

Hi Stephen,

Thanks, I tried Perfetto after your suggestion and managed to get it to work (took a little bit of massaging my generated json).

The arrow visualization is pretty much what I was looking for!

However, trying to adopt Perfetto in my scripts, I run into a new problem.

Previously I was making use of catapult trace2html, then launch browser from commandline with latest html, but I cannot find something equivalent in Perfetto.

Documentation says: it works offline but only after first visit...

Is it possible to create a standalone PerfettoUI.html based on given trace.json? That would fit perfectly in my workflow.

(For offline use and to skip click/load dialog.)

If not, then should I submit a feature request or contribute this feature myself, or just start hacking and see how far I get :)?

Best regards,

Jan

[Eric Seckler]

See https://perfetto.dev/docs/visualization/deep-linking-to-perfetto-ui for ways to integrate with the UI.

We don't support embedding or generating a standalone html (and don't plan to), but you're welcome to run your own UI server locally if you need a way to run truly offline (as you mention, ui.perfetto.dev uses service workers for offline use).

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/tracing/CAGJ3hEfuMgNuc4nOyhZkoB3xbTaGA0G3iGrfk1kdDkd_QascHg%40mail.gmail.com.

[Jan Feitsma]

Thanks for all the info and suggestions! I think I can proceed.

Btw the deep-linking examples from given documentation site appear to be broken:

1. rawgit.org domain expired

2. when trying the gist myself, it errors out:

Viewed on: https://ui.perfetto.dev SyntaxError: An invalid or illegal string was specified postMessageHandler@https://ui.perfetto.dev/v25.0-d1f7cc575/frontend_bundle.js:111385:22

Best regards, Jan

[Eric Seckler]

+perfe...@googlegroups.com for the docs feedback

[Eric Seckler]

Another attempt and +Hector Dearman  and +Octavian Tuchila 

[Hector Dearman]

Thanks for pointing out the docs issue. Sent aosp/2096656 to fix that. The new links are:

https://bl.ocks.org/chromy/170c11ce30d9084957d7f3aa065e89f8

https://gist.github.com/chromy/170c11ce30d9084957d7f3aa065e89f8

I couldn't reproduce the SyntaxError you are seeing. Can I ask what browser you are using? Do you still have the same issue with the links above?

Thanks,

Hector

[Jan Feitsma]

Hi Hector,

Link 1 works fine for me!

For link 2, I still get errors:

* I save the file index.html : wget https://gist.githubusercontent.com/chromy/170c11ce30d9084957d7f3aa065e89f8/raw/576483e3bdabb005cf5fa1825304e2f449920ae3/index.html

* error when I open it in Firefox and click to run a trace:

To assist with debugging please attach or link to the trace you were viewing. Viewed on: https://ui.perfetto.dev SyntaxError: An invalid or illegal string was specified postMessageHandler@https://ui.perfetto.dev/v25.0-d1f7cc575/frontend_bundle.js:111385:22 v25.0-d1f7cc575 d1f7cc5758b10aa536178aaccc01ea8b90d42b58 UA: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:99.0) Gecko/20100101 Firefox/99.0

* similar error, using chrome:

To assist with debugging please attach or link to the trace you were viewing. Viewed on: https://ui.perfetto.dev Uncaught SyntaxError: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'. Error: Failed to execute 'postMessage' on 'Window': Invalid target origin 'null' in a call to 'postMessage'. at postMessageHandler (https://ui.perfetto.dev/v25.0-d1f7cc575/frontend_bundle.js:111385:22) v25.0-d1f7cc575 d1f7cc5758b10aa536178aaccc01ea8b90d42b58 UA: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36

At this point I am starting to wonder if I am just doing something wrong, perhaps trying to run the little gist html fragment in an unintended way?

I hope I am not wasting your time with this.

Thanks,

Jan

[Hector Dearman]

Ah, I imagine the issue is something to do with how browsers handle file:// urls vs. served urls.

The following works for me:

$ curl https://gist.githubusercontent.com/chromy/170c11ce30d9084957d7f3aa065e89f8/raw/576483e3bdabb005cf5fa1825304e2f449920ae3/index.html > index.html

$ python3 -m http.server

$ [navigate to localhost:8000]

$ [click open with link]

But:

$ curl https://gist.githubusercontent.com/chromy/170c11ce30d9084957d7f3aa065e89f8/raw/576483e3bdabb005cf5fa1825304e2f449920ae3/index.html > index.html

$ open index.html

$ [click open with link]

Produces the error you see above. I'm unsure exactly what UX you are after, if you can serve the postMessage code that will work best. Alternatively you may be able to use a script like this: tools/open_trace_in_ui.

It may be possible to work about the issue with postMessaging from a file:// URL - however it's also possible that it is an on purpose security feature of the browser in which case it might be harder. Patches welcome if you manage it, otherwise serving the postMessage code seems like the best bet to me.

Cheers!

Hector