tensorboard: Profile plugin, trace viewer, does not work in Chrome 80+

Chrome 80+ deprecated two APIs: document.registerElement and Element.prototype.createShadowRoot. This broke Chrome’s trace viewer, Catapult, which was assuming presence of the APIs on Chrome (it did not include proper polyfills; was only meant to run in Chrome anyways!).

To overcome the issue, we have tried few things and I will try to enumerate what was tried:

include the webcomponents polyfill
- Catapult uses Polymer 1.x which uses document.registerElement
- only polyfill v0.x (https://github.com/webcomponents/webcomponentsjs/tree/v0.7.24) contains the polyfill for document.registerElement
catapult has checks for real shadow DOM as opposed to polyfilled shadow DOM
- it uses the value here: https://github.com/Polymer/polymer/blob/7a0f0181f573b79a1ec0b42a12bee37508ca52c6/polymer-micro.html#L39
- Polymer.Settings does feature detection by checking for certain APIs
- webcomponentjs does not polyfill Element.prototype.createShadowRoot which is critical for the feature detection: https://github.com/Polymer/polymer/blob/7a0f0181f573b79a1ec0b42a12bee37508ca52c6/polymer-micro.html#L33
We can manually polyfill Element.prototype.createShadowRoot by using Element.prototype.attachShadow

Element.prototype.createShadowRoot = function() {
      const name = this.tagName;
      if (name.includes('-') ||
          name == 'div' ||
          name ==  'article' ||
          name == 'aside' ||
          name == 'blockquote' ||
          name == 'body' ||
          name == 'div' ||
          name == 'footer' ||
          name == 'h1' ||
          name == 'h2' ||
          name == 'h3' ||
          name == 'h4' ||
          name == 'h5' ||
          name == 'h6' ||
          name == 'header' ||
          name == 'main' ||
          name == 'nav' ||
          name == 'p' ||
          name == 'section' ||
          name == 'span'
      ) {
        return this.attachShadow({mode: 'open'});
      }
    };

Even with our polyfill for createShadowRoot, we still get below

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Nodes of type '#document-fragment' may not be inserted inside nodes of type '#document'.
    at DomApi.<computed> [as appendChild

At this point, we can try to identify the problem and manually patch everything to make sure trace_viewer works (barely), but I think we should try to look what it will take to:

turn off native shadow DOM requirement, and
upgrade dependency on catapult to use Polymer 2.x and polyfill v1

If above two things are done, we will be able to fix #1291.

@psybuzz I can see how to vulcanize the trace viewer but I have no idea how the dependencies are managed in Chromium/catapult. Can you please help us try above two? I think I can, too, check for correctness of (1).

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 2
Comments: 15 (5 by maintainers)

Commits related to this issue

Show warning if trace viewer is used with WebComponents v0 (#3248) Show warning if trace viewer is used with WebComponents v0. The message directs users to a workaround and more details at: https://... — committed to tensorflow/tensorboard by psybuzz 4 years ago

Most upvoted comments

Got the same problem and if the Host is local, you need to add a point after local like host=local.&run= to make it work

mathpluscode on Mar 2, 2020

If your TensorBoard process is running and you have a Chromium-based browser (e.g. the new Edge, Brave, Opera, Chrome), you can do this specifically as follows:

Get the [run name] (e.g. “profile_demo/foo”) from the left sidepane (or if you know it). If you have any [host name] other than ‘default’, get that too
Craft a URL in this form: http://<tensorboard-url>/data/plugin/profile/data?host=<host-name>&run=<run-name>&tag=trace_viewer. For example if you are running TensorBoard on the origin localhost:6006 with run profile_demo/foo and empty host name, you would write the URL: http://localhost:6006/data/plugin/profile/data?host=&run=profile_demo%2Ffoo&tag=trace_viewer
In your browser, open a tab and navigate to the URL you crafted from the last step. The page should show you the raw JSON data, something like this:
Now, you can do Ctrl+S to save the page as a .json file on your filesystem.
Then in a new browser tab, navigate to the url about://tracing. This should open your browser’s trace viewing tool. Click the “load” button in the top-left
Once you select the .json file that you saved earlier, it should load the trace into the viewer, and show what would normally appear in the TensorBoard Profile plugin:

Please let us know if one of these steps doesn’t work.

psybuzz on Feb 15, 2020

A Chromium bug here was filed to fix/upgrade the Catapult trace viewer. I would recommend ‘starring’ the chromium bug report to add attention. https://bugs.chromium.org/p/chromium/issues/detail?id=1020620

At this time, there isn’t a fix, but there are workarounds if viewing Profile data is critical:

Download your trace’s JSON data, go to chrome://tracing (if using Chrome), and load your data there to view it.

To get your data from TensorBoard, you can craft a URL like http://<tensorboard-url>/data/plugin/profile/data?host=&run=<your-URI-encoded-run-name>&tag=trace_viewer

for example: http://localhost:6006/data/plugin/profile/data?host=&run=profile_demo%2Ffoo&tag=trace_viewer

Run a Chromium-based browser from the command line with flags. Note that these flags apply not just to TensorBoard, but to any page loaded within that Chromium session. --enable-blink-features=ShadowDOMV0,CustomElementsV0,HTMLImports
If you are running 64-bit Linux specifically, you can download a snapshot of an earlier version of Chromium that has WebComponents V0 enabled. For example, https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/710083/

Note that using an older version of Chromium for an extended period introduces security risks.

psybuzz on Feb 10, 2020

It looks like this was fixed in the master branch of catapult, but I couldn’t figure out how to get the fix into Chrome or Firefox. I tried installing the Canary version of Chrome to no avail.

Also tried downloading both the .trace and .tracetable files and loading them locally with about://tracing. The .tracetable file loaded but nothing showed up and the .trace file produced the following error on load:

While importing:
Error: Couldn't create an importer for the provided eventData.
    at Import.createImporter_ (chrome://tracing/tracing.js:2019:2071)
    at chrome://tracing/tracing.js:2014:167
    at Task.run (chrome://tracing/tracing.js:3247:95)
    at runAnother (chrome://tracing/tracing.js:3250:371)
    at runTask (chrome://tracing/tracing.js:3015:57)
    at processIdleWork (chrome://tracing/tracing.js:3020:116)
    at window.requestIdleCallback.timeout (chrome://tracing/tracing.js:3013:81)

UPDATE - downloaded correct file Downloaded the file with the .trace.json.gz extension and was able to load it in about://tracing.

CalebEverett on Mar 4, 2020

As of latest TensorBoard and https://www.tensorflow.org/tensorboard/tensorboard_profiling_keras, the profile plugin should work on Firefox, Chrome, and others. Please give the new plugin a try. Thanks!

stephanwlee on May 11, 2020

The screenshot and errors are helpful. There’s a strange assertion error from the webcomponents polyfill code. Since the polyfill is at the start of the JS bundle in the trace viewer iframe, this should imply that we have properly received the JS bundle and started evaluating it.

Based on https://github.com/webcomponents/webcomponentsjs/issues/301 (a similar error), it seems like this could happen if someone other than our JS bundle evaluates DOM APIs before the polyfill loads.

It might be possible for a Chrome extension to run scripts in the iframe before our JS bundle. Could you please trying this out in Incognito (usually has no extensions enabled) or in a browser profile without extensions enabled?

If that doesn’t work, could you also try this out in Firefox, if available? I’m curious whether it is something browser specific.

cc @qiuminxu @ydko for visibility, and if they have any ideas

psybuzz on Apr 21, 2020