interactive examples are broken (empty) on "open in new tab"

[wbamberg]

UPDATE (Jan 10, peterbe)
Let's make this issue exclusively about the JavaScript TypeError that only happens when using "open in new tab". The problem with the line number gutter is for #6310.

---

• Visit a page, say: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

• Right-click a link to a docs page from the sidebar, say https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt/asIntN, and select "Open Link in New Tab"

• Switch to the new tab.

In Chrome 80, I get an interactive example where the line numbers overlap the example:

In Firefox Nightly (73, adblockers disabled), I get an empty interactive example:

In both these cases, reloading the page fixes it.

In Firefox release (71) it works as expected.

[peterbe]

I can't reproduce. In either browser. It seems sporadic. Perhaps there's some other JS error that's blocking something. Are you saying it's only happening after it has been opened in a new tab? If you can reproduce it, can you open the Web Console and share what it says. Or the Browser Console even?

I have a vague theory. We have a bunch of badly configured JS that's set to execute async which means that if the browser cache is hot, some of these scripts might fire too early.

With regards to the messed up line numbers, I think we can focus on #6310 for that.

[peterbe]

Possibly related: https://bugzilla.mozilla.org/show_bug.cgi?id=1607442

[wbamberg]

For the Chrome problem:

#6310 looks totally like a duplicate of the Chrome problem I'm talking about here. I get this all the time when opening in a new tab, and never/hardly ever when I just click a link.

I don't see anything interesting in the Chrome console:

Because I always see the Chrome problem, I can't tell you if the console output is different when there isn't a problem.

[wbamberg]

For the Firefox problem:

If you can reproduce it, can you open the Web Console and share what it says. Or the Browser Console even?

In the Web console I do get an error when this problem happens (and only when it happens), from CodeMirror:

which maps to:

(not particularly helpful I know).

[peterbe]

"When called on an <iframe> that is not displayed (eg. where display: none is set) Firefox will return null, whereas other browsers will return a Selection object with Selection.type set to None."
https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

So it's arguably dangerous of CodeMirror to assume that e is something that is not null.

Either way, I don't understand the description. What does it mean "When called on <iframe>"?
Sure, this code is run inside an iframe but it's just using window.getSelection() so what does that have to do with iframes??

[peterbe]

By the way, CodeMirror's code has changed:
codemirror/codemirror5@a5f44b4
to this:
https://github.com/codemirror/CodeMirror/blob/c18094eab567211f73050beaa5c3fcceb2133888/src/input/ContentEditableInput.js#L189-L194

That PR is 1.5 years old.

Also, we're using CodeMirror 5.31.0 (based on the file URL). That was released in Oct 2017.
Unless we upgrade to something modern that seems to indicate that a fix is relevant, I don't think there's much more we can do to try to hunt this further with hacks within Kuma.

[peterbe]

This is now reproducibly every time for me. On prod and on localhost.
Sadly, the interactive examples piece is not run locally. You're using the remote URL even when you're on localhost.

Perhaps it's time to start to own this so that you can run interactive examples locally.

[schalkneethling]

I and @tobinmori have looked at this as well. Strangely enough in Chrome we can reproduce it pretty regularly although there is no obvious error to correlate the problem too. The only one that came up a few times is the following:

perf.654b849a6fd9.js:1 Uncaught DOMException: Failed to execute 'measure' on 'Performance': The mark 'interactive-editor-loading' does not exist.
    at Object.setMeasure (https://developer.mozilla.org/static/build/js/perf.654b849a6fd9.js:1:703)
    at handlePerfMarks (https://developer.mozilla.org/static/build/js/perf.654b849a6fd9.js:1:948)
    at perfMsgHandler (https://developer.mozilla.org/static/build/js/perf.654b849a6fd9.js:1:1557)
setMeasure @ perf.654b849a6fd9.js:1
handlePerfMarks @ perf.654b849a6fd9.js:1
perfMsgHandler @ perf.654b849a6fd9.js:1
perf.654b849a6fd9.js:1 Uncaught DOMException: Failed to execute 'measure' on 'Performance': The mark 'interactive-editor-loading' does not exist.
    at Object.setMeasure (https://developer.mozilla.org/static/build/js/perf.654b849a6fd9.js:1:703)
    at handlePerfMarks (https://developer.mozilla.org/static/build/js/perf.654b849a6fd9.js:1:948)
    at perfMsgHandler (https://developer.mozilla.org/static/build/js/perf.654b849a6fd9.js:1:1557)
setMeasure @ perf.654b849a6fd9.js:1
handlePerfMarks @ perf.654b849a6fd9.js:1
perfMsgHandler @ perf.654b849a6fd9.js:1

I honestly thought we solved this problem but alas, there it is :) While we could not correlate as mentioned above, here is what I am going to do to get the ball rolling:

1. Ensure the above happens in a try/catch block so we do not have this Uncaught DOMException floating around. (this is in the Kuma codebase)
2. Update CodeMirror to the latest
3. Fix Bob's auto-publishing and get the above on production.

Once this has all been done, we can revisit and see whether the problem persists.

[tobinmori]

@peterbe to verify that this is occurs in Chrome (not just nightly FF). if Chrome, then p1.

[schalkneethling]

Opened https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt in Fx Nightly 74. Right clicked on BigInt.asIntN() and selected open in New Tab.

Interactive example renders correctly and works as expected. Did multiple refreshes and could no reproduce blank example, nor gutter/line numbers overlap.

[schalkneethling]

Cannot reproduce in Chrome(latest release 79.0.3945.117 (Official Build) (64-bit))

[tobinmori]

thanks @schalkneethling, we'll keep this at p2 then, for next sprint.

[schalkneethling]

We have updated CodeMirror and there is a new release of Bob:
mdn/interactive-examples#1525

I will do some testing locally to ensure nothing broke but I have also asked @wbamberg to kick the tires.

[schalkneethling]

Ok, mdn/interactive-examples#1525 has been merged. In ~30min the new builds of interactive examples will be on production. 🤞

[schalkneethling]

I can unfortunately still reproduce this on production in Chrome. While it does not happen on the first load, refreshing the page in the new tab a couple of times(4-5) reproduces the issues.

I just noticed this is the issue about the empty editor.

[tobinmori]

Closing for now, since this problem has been greatly reduced.

[wbamberg]

This seems to be a problem still, see mdn/bob#977.

[tobinmori]

We know about this and it seems to be a rare occurrence so it's a p5. It was worse before!