9

Occasionally (say, 1 in every 25) when improving another users' question by adding their existing code to a snippet using the editor I am unable to save the changes I have made; nothing happens when I click the button except an error appears in the console:

https://cdn.sstatic.net/Js/snippet-javascript.en.js?v=fe42278b2fe2
Uncaught TypeError: Cannot read property 'save' of undefined
at i (snippet-javascript.en.js?v=fe42278b2fe2:1)
at HTMLDivElement. (snippet-javascript.en.js?v=fe42278b2fe2:1)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:3)
at HTMLDivElement. (jquery.min.js:3)
at Function.each (jquery.min.js:2)
at n.fn.init.each (jquery.min.js:2)
at n.fn.init.trigger (jquery.min.js:3)
at e (stub.en.js?v=98d2853eec34:1)

Console screenshot

Similarly, when this happens I also cannot click the 'Cancel' button to close the snippet editor, although this does not show an error in the console.

The snippet editor itself still functions correctly in this state. I can edit the code and run it as normal.

My only course of action when this happens is to refresh the page and try to edit again.

I have not yet managed to reproduce the issue with certainty. I originally believed this happened when the question was edited by someone else, but I have had it happen when no other edits were made. I also surmised that it could be a timeout or permissions issue, but the edit that caused the above error took me no longer than 30 seconds.

For reference I am using Chrome 68 on Win10. This has happened on older versions of Chrome too. I haven't tried it in other browsers.

List of occurrences since opening this question:

Update 2018-12-21

On the last failure I noticed there was a delay in opening the editor so thought to open the network console to check traffic as @Stijn suggested, and sure enough there was an error:

Active resource loading counts reached a per-frame limit while the tab was in background. Network requests will be delayed until a previous loading finishes, or the tab is brought to the foreground. See https://www.chromestatus.com/feature/5527160148197376 for more details

The other two 'ERR_BLOCKED_BY_CLIENT' errors would appear to be unrelated and instead caused by my adBlocker.

enter image description here

16
  • 1
    yes! I thought I was the only one .. it happens to me too and I usually duplicate the tab so that my draft is kept and re-add the snippet in the new tab. It also does the same when writing answers too Commented Aug 23, 2018 at 10:20
  • 1
    Just had this again today. Any news on progress with this bug? Commented Sep 6, 2018 at 8:23
  • 1
    And again, twice on one question. I feel like I'm yelling in to the void here. Is anyone even bothering to monitor and feedback on raised bugs? Commented Sep 6, 2018 at 13:38
  • I am the only one that get notifiied here :p ... you can probably edit the question to put it back in the active queue Commented Sep 6, 2018 at 13:40
  • Just another bump as it happened yet again... Commented Oct 8, 2018 at 9:39
  • Are you able to view the network traffic after this problem occurs? Possibly a call fails and the JS doesn't handle the failure correctly.
    – user247702
    Commented Oct 8, 2018 at 9:49
  • I haven't yet, but next time it occurs I will update. Commented Oct 8, 2018 at 9:49
  • I will start doing edits with you I guess .. it's becoming more reccurent for me also. Commented Dec 14, 2018 at 15:33
  • Please do :) Checking network traffic is a great idea to diagnose the problem, but I never think to have it open before I open the editor Commented Dec 14, 2018 at 15:40
  • not easy to gather anything :/ also the code being compressed it's difficult to follow why the element is not defined ... by the way it also happens to me even when answering with the same error Commented Dec 17, 2018 at 20:47
  • @TemaniAfif finally managed it! I noticed there was a slight delay opening the editor and thought to open the console first - I've updated the question with the error Commented Dec 21, 2018 at 8:12
  • great, let's hope now someone will still consider the question ... Commented Dec 21, 2018 at 8:37
  • That message is probably unrelated. I actually meant this with 'network traffic', but I think any failed would also appear in the console (as is the case with the two blocked requests).
    – user247702
    Commented Dec 21, 2018 at 12:07
  • I'm a bit doubtful that the Chrome warning has anything to do with the problem - Chrome 69 was released on 2018-09-04. I know I've encountered this sporadically since before then. The Chrome warning is just something that happens to come up on many SO pages. Commented Dec 24, 2018 at 11:34
  • 2
    How. Is. This. Still. Not. Fixed?
    – adiga
    Commented Nov 1, 2019 at 11:15

1 Answer 1

4

I figured out the source of the problem. In short: it occurs when you click rapidly after opening a snippet for the first time, before the snippet framework HTML has had a time to load. Clicking triggers a listener which expects the snippet HTML (and associated data) to be loaded. An error is thrown, and further JS execution stops, preventing you from saving / canceling the snippet to get back to the question/answer box. It's pretty reproducible if you try to make it happen deliberately and live more than a few milliseconds away from the servers.

The problem is ultimately caused by the primary.css stylesheet rule of

.modal.auto-center.snippet-modal {
  pointer-events: none;
}

User-side, this can be fixed by inserting the following CSS rule onto the page. I haven't seen any negative consequences from using it:

.snippet-modal {
  pointer-events: auto !important;
}

You could do this automatically with something like Stylish or a userscript:

// ==UserScript==
// @name             Snippet Modal Fixer
// @author           CertainPerformance
// @description      Prevents snippet double-clicking from breaking the snippet interface
// @version          1.0
// @match            https://stackoverflow.com/questions/*
// @grant            none
// ==/UserScript==

document.body.appendChild(document.createElement('style')).textContent = `
.snippet-modal {
  pointer-events: auto !important;
}
`;

I think the purpose of the original rule is an odd way to have clicks outside the .snippet-holder (that is, clicks on the dark rectangle on the edges) trigger the modal-closing mechanism. If you override the rule like this, you'll have to click on the Save or Cancel buttons to exit the snippet editor.


Complicated Javascript error details ahead:

The first time you click on the <> button to create a snippet, or when you click on "edit the above snippet", the site makes a network request to /snippets/editor-ui to get the snippet modal's HTML. Two elements immediately appear as children of the <body>: a lightbox <div class="lightbox" ...</div> and, on top of it (with z-index), a <div class="modal snippet-modal ..., which gets populated with the snippet HTML once the network request resolves.

The snippet modal follows the following CSS rule:

.modal.auto-center.snippet-modal { pointer-events: none }

Once the network request finishes, this .snippet-modal gets populated by a child, <div class="snippet-holder">, which has pointer-events: auto;. But, this means that before the request finishes, clicks on .snippet-modal will instead be registered by (have an event.target of) whatever element's behind the .snippet-modal, which is the .lightbox.

There is a mousedown listener on the body:

$('body').mousedown(function (e) {
  var target = $(e.target);
  if (target.closest('.ac_results, .popup, .wmd-prompt-dialog, .message, .modal, .body-click-hide').length) return;
  // close some interfaces under certain conditions:
  if (!target.closest('.share-tip').length) {
    doEscapeClose('.share-tip', clickOutside);
  }
  // other calls to doEscapeClose

It's intended to return immediately if the clicked element has a .modal ancestor. But, if the response hasn't come back yet, the .snippet-modal hasn't been populated with .snippet-holder yet, so the click goes through the .snippet-modal and is registered on the lightbox instead. The above code won't return, and doEscapeClose will be called, eventually leading to these lines:

var popupClosing = $.Event('popupClosing', eventData);
items.trigger(popupClosing);

This event is observed in snippet-javascript.en.js:

var save = function (isEscape) {
  var state = snippetPopup.data('_snippet').save(); // <-------- error
  // do some other stuff
}

snippetPopup.on('popupClosing', function (e) {
  // do some stuff
  save(isEscape);
});

The _snippet data is intended to be populated when the initEditor function runs:

var initEditor = function () {
  elem.data('_snippet', snippet);
  // ...
}
// ...
  loadEditorInnerHtml(options.readonly).then(initEditor);

But if the snippet HTML hasn't come back yet, the loadEditorInnerHtml Promise hasn't resolved yet, so snippetPopup.data('_snippet') returns undefined, and undefined.save() throws the error.

Lots of ways to fix it, but that's up to the devs.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .