Deep linking with a string instead of ArrayBuffer about perfetto HOT 13 CLOSED

Maybe I'm missing something but is there any reason why you cannot just use the TextEncoder Javascript API to convert the string to an ArrayBuffer on the Javascript side (e.g. https://stackoverflow.com/questions/6965107/converting-between-strings-and-arraybuffers)?

from perfetto.

Here's the data that I have serialized and trying to send to Perfetto. I'm not loading any other JavaScrip, but might have some way to do so. But this doesn't seem to load the file up. I'm using a [Uint8] array here to supply the ArrayBuffer.

webView.evaluateJavascript(
"window.postMessage({"perfetto":{"title":"squish.json","buffer":[123,34,116,114,97,99,101,69,118,101,110,116,115,34,58,91,123,34,112,105,100,34,58,52,...]}})")

from perfetto.

Just to make sure this is not some weird problem with the iOS webview (e.g. not supporting postMessage properly), can you try the same Javascript you are executing on desktop Chrome?

from perfetto.

This tool is actually running all on macOS, but let me try that. I could do a JSON.parse(), I'm assuming Perfetto wants an object and not a string passed to postMessage. But JSON.parse() complains about this which I assume is the array. I did try Json.stringify(new ArrayBuffer()) and just got {} as output. With more chars, I got {"0":123, "1":3, ...} as output. I thought ArrayBuffer wasn't truly serializable since it's not a stock Json type.

Will test a few things in browser with ui.perfetto.dev as you suggested. This is just way harder than it needs to be though. A url param would have been more way simpler, but I get that CORS is painful.

SyntaxError: JSON Parse error: Unexpected identifier "object"

• parse ([native code])
• global code (/:1:30)

from perfetto.

A url param would have been more way simpler,

Why this is not the case is very clearly spelled out in the docs - https://perfetto.dev/docs/visualization/deep-linking-to-perfetto-ui#why-can-39-t-i-just-pass-a-url-

Blame the state of the web, not us :)

from perfetto.

I realize that, and referenced it above on CORS. I'm just trying to pull up files into Perfetto from a Swift list view. The WKWebView hosts Perfetto, and I have the file read on the Swift side, and I just need to pass the JSON data to Perfetto to get it to load.

With the JSON.parse, I get the object error. Without the JSON.parse, I get the following. So my JS skills must have gotten rusty over the years.

Uncaught (in promise) Error: Failed assertion
at assertTrue (frontend_bundle.js:4440:16)
at TraceBufferStream.readChunk (frontend_bundle.js:428084:35)
at TraceController.loadTrace (frontend_bundle.js:430132:48)
assertTrue @ frontend_bundle.js:4440
readChunk @ frontend_bundle.js:428084
loadTrace @ frontend_bundle.js:430132
Promise.catch (async)
run @ frontend_bundle.js:430007
invoke @ frontend_bundle.js:414078
(anonymous) @ frontend_bundle.js:414105
invoke @ frontend_bundle.js:414111
runControllers @ frontend_bundle.js:430871
setTimeout (async)
(anonymous) @ frontend_bundle.js:479880
(anonymous) @ frontend_bundle.js:5303
applyEdits @ frontend_bundle.js:5302
edit @ frontend_bundle.js:5288
dispatchMultiple @ frontend_bundle.js:479895
dispatch @ frontend_bundle.js:480005
openTrace @ frontend_bundle.js:442184
postMessageHandler @ frontend_bundle.js:442192
postMessage (async)
(anonymous) @ VM140:1

from perfetto.

I copied and pasted our "example caller" part of our documentation into JSFiddle and it's successfully able to open a JSON trace no problem: https://jsfiddle.net/vrsofx1p/

from perfetto.

I finally got Perfetto to open the first JS payload send to it. And I built the ArrayBuffer on the JS side. But that's all Perfetto loads. I can't send another file payload to it. It continues to display only the first file that I send. Your fiddle opens up the same file in a new window every time the button is pushed, so maybe if the target was set to open different traces in the same window, that would exhibit this same problem.

The point of this app is to review multiple Perfetto json traces, but using the same ui.perfetto.dev page running in the WKWebView (embedded Safari). In Chrome, I know I can drag+drop new traces onto the UI, and those reload, so something is off here. The UI should reflect the selection, and not KramLog.json which was my first selection in the list.

Probably need a location.reload(), but then I have to do the pings until perfetto loads.

from perfetto.

This latching of state happens even in Chrome. Is there a way to disable this, and have Pefetto respond each time a {"perfetto":...} payload is sent over. I don't really want to have to reload the page due to the flash and loss of context for the user. I just need it to reflect the current selected file.

from perfetto.

Hey!

Do you set keepApiOpen here https://cs.android.com/android/platform/superproject/main/+/main:external/perfetto/ui/src/frontend/post_message_handler.ts;l=178?q=postMessage%20f:perfetto

You can see what Flutter devtools does here: https://github.com/flutter/devtools/blob/master/packages/devtools_app/lib/src/screens/performance/panes/timeline_events/perfetto/_perfetto_web.dart#L174

from perfetto.

That keepAPIOpen looks like exactly what I need, so thanks! That wasn't in the deepLinking docs, so would help to detail that there. Not quite sure where I set that (on my perfetto object?), but I'll dig through the sources you sent.

Here's what I have so far. I'll have a macOS build of this with my CI when I get a chance. For now it's a small number of Swift files to build using Xcode.

https://github.com/alecazam/kram/blob/main/kram-profile/kram-profile/kram_profileApp.swift

from perfetto.

Worked like a charm! App is all good now. Will checkout the flutter setup more closely too. Pasting relevant code here:

 _postMessage({
      'perfetto': {
        'buffer': buffer,
        'title': 'DevTools timeline trace',
        'keepApiOpen': true,
      },
    });

from perfetto.

Great! Glad it worked out. I will update the docs.

from perfetto.