React-native Android Systrace HTML is blank in Ubuntu 14.04

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?

Sudoriferous

FWIW, on Win10 Chrome 50.0.2661.87 my systraces come up blank, while Ubuntu Chrome 49.0.2623.110 still works. I'm guessing Chrome broke. – Schoolmistress

Answer 1

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

Catabasis

This fails with this message: Error: Couldn't create an importer for the provided eventData. at Import.createImporter_ (chrome://tracing/tracing.js:1348:3342) at Import.createImports (chrome://tracing/tracing.js:1343:21) at Task.run (chrome://tracing/tracing.js:2062:13) at runAnother (chrome://tracing/tracing.js:2074:136) at runTask (chrome://tracing/tracing.js:2037:57) at processIdleWork (chrome://tracing/tracing.js:2043:116) at window.requestIdleCallback.timeout (chrome://tracing/tracing.js:2031:81) – Deedradeeds

Answer 2

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.

Granville

In the Opera version 37.0 Systrace works fine for me. – Dishwasher

Answer 3

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+

Sudoriferous

That worked for me. Link to the full project: github.com/MaxArt2501/object-observe – Schoolmistress

FWIW, I wouldn't recommend using GitHub for anything than an experiment. Fortunately, the polyfill is available here too: cdnjs.com/libraries/object-observe – Egin

Answer 4

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

Narbada