Bug 278290 – "InvalidStateError: The object is in an invalid state" is not very helpful

• Status: NEW
• Component: JavaScriptCore

[John A. Bilicki III]

"InvalidStateError: The object is in an invalid state."

What object? The pipe for the hot water in my sink?

So what I do know is that the user clicked a submit button to create a page on my web platform. My best-guess is that perhaps a form field wasn't properly filled out however I have very thorough JavaScript validation because of there being layers.

So in short: this error message is unfortunately completely useless. I can only guess at the context of why it happened, I don't know anything about which object. Here is the stack of events my platform recorded for this error:

===

1721149945860, onclick:
Left Button
Event Target: <input data-status="Loading Page,." formnovalidate="true" id="admin_post_cms_preview" name="webmaster_cms_preview" tabindex="3" type="submit" value="Save &amp; Preview" />
Event Target Parent: <span><input data-status="Loading Page,." formnovalidate="true" id="admin_post_cms_preview" name="webmaster_cms_preview" tabindex="3" type="submit" value="Save &amp; Preview" /></span>
URL: /admin/cms/create

1721149945870, onsubmit:
Event Target: <form action="admin/" id="editor_rich_form" method="post"></form>
Event Target Parent: <section><form action="admin/" id="editor_rich_form" method="post"></form></section>
Event Target Closest Ascending Parent Id: <form action="admin/" id="editor_rich_form" method="post"></form>
URL: /admin/cms/create

1721149945875, onerror:
InvalidStateError: The object is in an invalid state.

===

Her user agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15

She uses a MacBook though not sure that is really relevant.

I've done a bit of searching and have come across people talking about audio objects. I have some minor suspicions to follow up on for tomorrow though that is it. I have a Mac Mini and am happy to try to reproduce the issue if possible.

So the goal here should be to try to ensure that the error message gives some sort of meaningful insight in to what that object is, otherwise I have little-to-nothing to act on.

[John A. Bilicki III]

Okay so it's a fresh day and I successfully reproduced the issue on my Mac Mini.

Here is the stack call from the developer console:

[Error] InvalidStateError: The object is in an invalid state.

collapseToEnd (editor_rich.js:920)

rich_caret_move (editor_rich.js:920)

rich_event_focus (editor_rich.js:1673)

webmaster_cms (webmaster.js:626:249)

window_onsubmit (index.js:11887)

(anonymous function) (index.js:11827)


Either the error is too self-contained or there is an issue with my error-handling functions cleaning up the parameters passed to it. I'll look in to it further to see if this is more of an issue on my end or the browser's.

[Karl Dubost]

The message comes from 
https://searchfox.org/wubkat/rev/b36cbce69fddb7da33823f316bd8ead5bebee970/Source/WebCore/dom/DOMException.cpp#47

which is used in a lot of places
https://searchfox.org/wubkat/search?q=InvalidStateError&path=&case=false&regexp=false

[Karl Dubost]

John, 
could you provide a simplified test case for the specific case you are encountering?
Thanks!

[John A. Bilicki III]

Hi Karl, so I can create a minimal test case though I'd need a few days to get through my immediate obligations first.

What I can share right now is that the exact problem is that WebKit does NOT like trying to move the keyboard caret to an element that is not visible. The line that triggers this in my code is:

window.getSelection().collapseToEnd();

There are two instances of that in the following file:

https://www.jabcreations.com/scripts/editor_rich.js

The function containing it is: function rich_caret_move(e,p).

I don't have any easy-to-produce and publicly accessible ways, known me me at least, ways to produce this issue. If you still need more information and want the test case let me know and I'll try to get it done before the end of this week.

[Radar WebKit Bug Importer]

<rdar://problem/134645414>

[Karl Dubost]

Hi John,

>  WebKit does NOT like trying to move the keyboard caret to an element that is not visible

That is a separate interesting issue. 

Let's keep this one as the issue about Invalid State Error message

[Karl Dubost]

https://www.jabcreations.com/scripts/editor_rich.js is not accessible when linked directly. :)

[Karl Dubost]

If you open a new bug with a test case for collapsetoend, this is the spec reference.
https://w3c.github.io/selection-api/#dom-selection-collapsetoend

> collapseToEnd() method
> The method must throw InvalidStateError exception if the this is empty. Otherwise, it must create a new range, set the start both its start and end to the end of this's range, and then set this's range to the newly-created range.

[John A. Bilicki III]

Hi Karl,

So an FYI I finally had some time to start working on a standalone test case today. I will hopefully have it finished and confirmed working and reproducing the issue on my Mac Mini later this afternoon and hopefully posted later today. If it gets delayed then either tomorrow or worst case scenario the end of this week.

[John A. Bilicki III]

Created attachment 472301 [details]
Fully self-contained test case with easy form to move the caret to one of two editors, one visible and one not with tons of options to make testing as painless as possible.

I've attached webkit_bug_278290.xhtml which is fully self-contained and is exceptionally easy to reproduce the bug with. The directions are contained in the test case, simply click the first paragraph to show the details.

The quickest test: click on "Caret to p[0]" button and the keyboard caret is moved without errors. Then click the "Switch Editors" button below and repeat the process. When an error occurs a short beep will be played to remind you to look at the developer console for errors.

I would like to note that while testing this in WebKit/Safari I found another bug: WebKit does not treat files with .xhtml file extensions as application/xhtml+xml correctly, it incorrectly treats them as text/html. So a 'p' element's nodeName was incorrectly returned as 'P' (uppercase). Annoying.

Any way, I hope this test case is helpful.

[Karl Dubost]

Hi John, thanks a lot for the testcase. 

So As we are talking here about the error message 
The console is giving information about the error type:


[Error] InvalidStateError: The object is in an invalid state.
	collapseToEnd (attachment.cgi:198)
	rich_caret_move (attachment.cgi:198)
	onclick (attachment.cgi:262)

And the line where it happens. 
In the code is calling:
   window.getSelection().collapseToEnd();

What information would you have expected. 


When artificially creating a state where it should return InvalidStateError:



Safari:
InvalidStateError: The object is in an invalid state.
    collapseToEnd

Chrome:
Uncaught InvalidStateError: Failed to execute 'collapseToEnd' on 'Selection': there is no selection.

Firefox:
Uncaught DOMException: Selection.collapseToEnd: No selection range exists


The 3 browsers are sending more or less the same information with 
   * Error type (except for Firefox)
   * the function which fails (collapseToEnd)
   * the location in the script




Now there is a difference of behavior on when this is triggered, but that's a separate bug. 
I will open it with a reduced test case.

[Karl Dubost]

John, for the other part of the issue on why InvalidStateError is being triggered I created Bug 278687. 


For this bug about the error message, What would have been a better error message for Safari given the same information is given but presented differently in other browsers.

[John A. Bilicki III]

Hi Karl,

So two key pieces of information are missing for developers.

First, what is the state? Well, the element isn't visible so that is the invalid state but remember, we're under a lot of pressure so most of the time we're not going to interpret "invalid state" as "not visible".

Secondly, which element? I've done an excessive amount of work to create very clean and easy to comprehend JavaScript error reports cleaning the error.stack object between different browsers and odd text formatting within the same rendering engines. So most developers don't have that. So they'll get lost at the interpretation stage.

So an error message that would be much more helpful and save developers time would be something along the times of:

InvalidStateError: The element object [<div id="editor_rich">] is not currently visible to the user, unable to execute [collapseToEnd()] for the [selection].

I would hope to be able to click the element object in the developer console to have the DOM inspector open and highlight the element I'm attempting to have my script interact with. Then it should be clear from both the error message and the faded code in the DOM Inspector that the element is not currently visible.

I don't remember offhand if we're talking about textNodes specifically since they're not elements. So in that case I might adapt it to be more like:

InvalidStateError: The textNode object [] of the element object [<div id="editor_rich">] is not currently visible to the user, unable to execute [collapseToEnd()] for the [selection].

Oddly enough I have not encountered this problem with Gecko/Waterfox or Blink/Vivaldi. I actually do prefer to get error messages versus "silent errors" because if I don't know there is an error I very likely won't fix it. Though my case is likely different from other developers. For my CMS custom page editor there are layers: Meta, Rich and XML. Often I'll save a page in the Meta layer while the other layers are hidden. My Rich Editor always switches states when saving (I can't remember if it is XML to Rich or vice-versa) to then collect the XML code to send in an AJAX request to the server to save the page. I have since fixed the bug in my system. Since it's Webmaster/Administrator access only that is why I created the test case.

I hope this information is helpful? Thank you for taking the time to work on this.

[Karl Dubost]

Hi John,

yes this is useful. 
Note that these proposals are also absent in Firefox and Chrome. 
I would encourage to file bug reports for it. 

If you want to trigger a similar error in Firefox and Chrome
in this test case https://bugs.webkit.org/attachment.cgi?id=472307
comment these

//            var sel = window.getSelection();
//            sel.removeAllRanges();
//            sel.addRange(range);

This will trigger the error. 

So you can access the level of information in other browsers.

[Karl Dubost]

In https://bugs.webkit.org/show_bug.cgi?id=278687#c4
Ahmad proposes an avenue to fix this specific Error message in the case of collapseToEnd.

I wonder if we should aim at fixing just this one or all the unclear InvalidStateError.