React-native Android Systrace HTML is blank in Ubu

Question

I collected a trace of my React-Native based Android app using systrace.py util from Android SDK into an html file. When I open this html trace file in either Chrome 50.0.2661.86 (64 bit), or Firefox 45.0.2, I see blank screen and a few JavaScript errors in Developer console. OS Ubuntu 14.04 64 bit OS.

However on my Windows machine a html trace is rendered correctly without errors in Chrome 49.0.2623.112.

Can anyone help me sort out this issue?

Answer 1

Simply adding

<script src="https://rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>

to the head section of HTML document with trace makes it work in Chrome 50+

Answer 2

Systrace in Android SDK is outdated. You can use the systrace from the AOSP project:

git clone https://android.googlesource.com/platform/external/chromium-trace

Answer 3

In Chrome 49 there was a warning about Object.observe being deprecated.

https://developers.google.com/web/updates/2016/02/chrome-49-deprecations?hl=en#objectobserve-is-deprecated

In Chrome 50 they finally removed it.

https://www.chromestatus.com/features/6147094632988672

Unfortunately, the systrace in Android platform-tools didn't follow-up. In the latest version (I tried Android SDK platform-tools 24 rc2) it is still generating html reports with Object.observe in it, so starting from Chrome 50 we're not able to open any of the reports.

I guess one way is to use a pre-50 release of Chrome.

Answer 4

As a temporary workaround you can use the following approach:

• Save the .html dump file to disk
• Open tab in chrome chrome://tracing
• Load file in the tracing console