Add Profiling to mobile web debug options

[puneetlath]

Problem

On our mobile apps, we have the Use profiling option for performance profiling. We don't have this on web because profiling can be done via the JS console. However, mobile web doesn't have a JS console, so it'd be useful to be able to have some way to do profiling there. Recently, we've had an employee experiencing performance issues specifically on mobile web.

Solution

Add the Use profiling option to mobile web.

cc @Szymon20000

[Szymon20000]

👋🏻

[melvin-bot[bot]]

Current assignee @puneetlath is eligible for the NewFeature assigner, not assigning anyone new.

[kirillzyusko]

Hey 👋 I think I added this option on web in https://github.com/Expensify/App/pull/46133? It could be activated via Cmd+K combination, though yeah, I'm not sure how to show that menu on mobile web 😅

[hannojg]

On mobile we have the 4-finger tap gesture to open that menu (implemented using RNGH), would the same work for mWeb @kirillzyusko ?

[kirillzyusko]

Thanks @hannojg ! ❤️

I just tested and this indeed works:

File sample:

Profile_trace_for_9.0.17-0.cpuprofile

But keep in mind that not all browsers support "sampling profiling", so not all browsers will produce an actual stacktrace (I tested in Safari and it didn't work, the downloaded file was empty). To see which browsers support that you can check this link 👀

The file above was captured in Android Google Chrome broswer.

[kirillzyusko]

@puneetlath @muttmuure since it was deployed to staging - can we verify that it actually works there and close the issue?

[puneetlath]

I do see the option. This was on iOS Safari. Do we need to do anything else to verify it?

[kirillzyusko]

You can toggle this button do some interactions in the app and stop profiling to be sure that performance profile is actually generated.

But you'll need to use Google Chrome, since Safari doesn't support this feature.

[puneetlath]

I tried it on iOS Chrome, but the profile was empty. It just had:

{"traceEvents":[],"samples":[],"stackFrames":[]}%

Does it work for you @kirillzyusko?

[kirillzyusko]

@puneetlath I've observed, that sometimes profile can not be generated and we just generate an empty stack trace (it happens randomly). But if I try second time, then everything works well 🤷‍♂️ I haven't figured out why it happens exactly, but may I ask you to try several times? Typically if the first time it was generated empty, then the second time you should get a real report 😅

[puneetlath]

I tried many times in iOS Chrome on both staging and production and it was empty every time. Very weird! Any ideas?

[kirillzyusko]

@puneetlath you are right, I've just tested Google Chrome iOS and I also can not generate a proper report. I think on iOS a self profiling is simply not supported (irrespective to the browser that you use) 😔

It's kind of weird, because on desktop we have a difference between Chrome/Safari, but on mobile it looks like both browsers behave in the same way 🤔

[puneetlath]

Ah ok got it. But it works on Android?

[kirillzyusko]

@puneetlath yes, Android should work fine :)

[puneetlath]

Ok cool. Closing out then!