Is it possible to control perfetto ui time position and zoom after loading a trace?

[unphased]

I want to continuously trace a python service running in production (using tg4perfetto, but that's really just a lightweight tracegen layer) and produce rotating trace files. I can open these fine already with deep linking. I will have a web interface that collects monitoring information and correlates these perfetto traces.

My concept is to be able to have perfetto's ui in a separate tab or in an iframe with external dynamic programmatic control over its timeline offset and zoom.

Another similar high level capability i will want is the ability to swap out the opened trace dataset with others when navigating far enough away without having to close/reopen the perfetto UI.

So far my attempts to use postMessage({perfetto: { ... }, "https://ui.perfetto.dev/") to try to adjust the start/end time and push new buffers are failing. I'm obviously doing them after the initial push of the buffer which works perfectly.

If I try to include hardcoded time values during the initial buffer load e.g.:

                window.targetWindow.postMessage({
                    perfetto: { buffer, title, fileName: title, timeStart: 1_000_000_000n, timeEnd: 2_000_000_000n }
                }, 'https://ui.perfetto.dev');

I get the error

post_message_handler.ts:281 Could not scroll to time range. Trace viewer not ready.

The fact that a time range scroll was understood to be requested shows me i'm barking up the right tree but it's frustrating that I cannot seem to get it to do anything no matter what I try. If i put a postMessage that tries to change the title or fileName on a timeout to run 10000ms later, it just doesn't do anything.

I am able to point my browser devtools console to the perfetto ui page context and use monitorEvents(window, 'message'); in there, and that lets me see the incoming postMessage payload, but that does not help me with the fact that these messages are all ignored.

I'm trying to use AI to help comb through perfetto's documentation, but it's difficult. I did use PasteMax on (most of) perfetto's documentation dir (1.3M tokens) with Gemini 2.5 Pro in Vertex and it gave me this response:

Why Your postMessage Approach for Zooming Fails

You're trying to control the UI (zooming) after a trace has already been loaded. Your zoomInPerfetto function attempts to do this by posting a message with the format:
{ perfetto: { timeStart: ..., timeEnd: ... } }

The core issue is that this message format is not supported by the Perfetto UI for controlling the view state, at least according to the official documentation you've provided.

If we look closely at the visualization/deep-linking-to-perfetto-ui.md file, it describes the postMessage API for one primary purpose: to load a trace into the UI.

The documented message format for this is:

{
  'perfetto': {
    buffer: ArrayBuffer, // The trace data
    title: string,       // A title for the trace
    fileName?: string,   // Optional: for downloading
    url?: string         // Optional: for the 'Share' link
  }
}

As you can see, this format is for sending the trace content itself (via the buffer key) and is fundamentally different from what you're trying to send. The code you have was likely for an internal, experimental, or now-outdated API. The UI is silently ignoring your postMessage for zooming because it doesn't recognize the format.

The Correct Way: Manipulating the URL Fragment

The same documentation file, deep-linking-to-perfetto-ui.md, provides the correct solution in the section "Opening the trace at a specific event or time".

It describes controlling the UI state using URL fragments (the part of the URL after the #). For example:
.../#!/?visStart=...&visEnd=...

While the documentation frames this as for the initial load, this is a standard mechanism for single-page applications (SPAs) like the Perfetto UI. You can change the URL fragment of the Perfetto window at any time, and the UI will react to it without a full page reload.

So, to programmatically zoom or pan after the trace is loaded, you should manipulate the location.hash of the Perfetto UI window you opened.

Can somebody from the project please confirm for me that my information is up to date? That is to say:

• postmessage only used for loading traces the FIRST time on a perfetto ui app instance, subsequent messages will be ignored
• manipulating url.hash can let me dynamically control time and zoom on an open instance
• i will need to reopen a new instance to load a different trace

I'm 90% sure by this point that the above is the case. However it makes the Could not scroll to time range. Trace viewer not ready. error i saw earlier very confusing. Perhaps this error is just slightly outdated and the url hash method of controlling time is the new official method.

[unphased]

I'm trying to load the page as

https://ui.perfetto.dev/#!/?ts=0&dur=10000000

but it becomes forcibly changed to

https://ui.perfetto.dev/#!/viewer?local_cache_key=00000000-0000-0000-8d97-c8ec6e4229cb

once the trace buffer is loaded.

[unphased]

Also, at no point am I able to get the perfetto UI to update if I simply modify the URL bar with any of these time manipulation parameters and hit enter. It feels like I'm barking up the wrong tree.

Since it's going to be a lot of extra work to try to fork and host my own perfetto UI app instance (where i would be able to add the basic functionality I'm talking about to automate trace navigation from a separate browsing system) i'd like to get an authoritative answer on what is supported so I can make a decision on that.

[LalitMaganti]

I think your overarching goal of "rotating trace files" in the way you're going to describe is going to be a janky and suboptimal experience. We don't support "steaming" traces in the UI so updating the contents of traces in the way you describe is not going to work.

For the specific problem of planning around a trace programmaticly after the trace is loaded: I think that's something which is not supported today but could probably be added. PRs for that welcome if you can suggest a good design for it. We would need to design some postMessage API so that you can specify what you want to happen. We would probably have it hook into our action system.

[unphased]

Hi, thank you so much for the response.

Luckily:

I was just able to find by browsing in the source code in post_message_handler.ts that there is a special flag I can specify in the payload where i deliver the trace, a critical keepApiOpen?: true option.

I did this and now i am able to get a highly performant instantaneous response to a subsequent message delivered like targetWindow.postMessage({ perfetto: { timeStart: 1753846921.0, timeEnd: 1753846922.0 }}, 'https://ui.perfetto.dev');

This completely addresses my ask, and will allow me to embed the deeplinked perfetto UI loading traces from my custom monitoring page with complete control over the timeline zoom which is going to be an absolute gamechanger for easily diving into execution traces while browsing independently captured/aggregated events. Since the response to this posted message on perfetto UI's side is so performant I will have no issue binding that directly to mouse or touch based interaction on timeline graphs in the external controlling tool.

I particularly love that the perfetto ui can be leveraged without introducing any kind of complex dependencies on the part of my app.

I can definitely say, though, that clearly documenting keepApiOpen would have saved me a lot of stress.

[unphased]

In regard to rotating trace files or anything like that, I totally understand if memory management in the perfetto ui application has issues for cycling through data like that. I will evaluate whether it is feasible to do such a thing by re-sending trace buffers, but I'll be quite happy to fully reload the page if it ends up being the case that I need to do that. being able to control the time and zoom is the main thing i was looking for so far.

[LalitMaganti]

Cool, I forgot about keepApiOpen. Yeah that is indeed probably what you need. Glad to see you found something which works.

Feel free to send a PR documenting this.

[LalitMaganti]

Also the idea that you can control the page by changing the URL hash is a pure hallucination of the LLM. There is no such feature.

Today both postMessage and the URL params are designed only for controlling behaviour post load and not in the general case when trace has been loaded.

[unphased]

Well I will say that the documentation here https://perfetto.dev/docs/visualization/deep-linking-to-perfetto-ui#opening-the-trace-at-a-specific-event-or-time makes it very clear that i am intended to use the url params to manipulate the UI. It's even under the deeplinking page.

However at least with the way I'm loading the trace (as described in the same document) i could not get this to work at all.

My usage of LLMs has helped me get this far with this but sadly it was not able to pick up on keepApiOpen until I ferreted it out myself, so I am indeed disappointed in that. I was attempting to shove the entire frontend code into a prompt in vertex AI but the one time i got that page to respond after pasting, it complained eventually that it was 1.4 million tokens and too big to send... so i wasn't able to quickly data mine the frontend source. luckily i didn't give up and kept digging into it myself.

[LalitMaganti]

Please read my answer carefully: I said that the URL works for controlling what happens "post load". As in, as a one-off, "please go to this region of the trace immediately after loading the trace". It does not allow for controlling what happens on the page at arbitrary times after load time.