Gutenberg crashes on Block validation failed for core/image (browser extension conflict with "JavaScript Errors Notifier" in Chrome)

[marcin-gryszkalis]

The commit e8f6bb0
from pull request #7721 referencing #5292 changes definition of image adding div around figure.

This seems to cause fatal exception when trying to edit post created before the change.
(currently I'm using Gutenberg 3.9.0 on WP 4.9.8).

The exception (from gutenberg demo article):

VM127:37 Block validation: Block validation failed for `core/image`

Expected:

<div class="wp-block-image aligncenter"><figure class="aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape"/><figcaption>If your theme supports it, you'll see the "wide" button on the image toolbar. Give it a try.</figcaption></figure></div>

Actual:

<figure class="wp-block-image aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape"/><figcaption>If your theme supports it, you'll see the "wide" button on the image toolbar. Give it a try.</figcaption></figure>

Expected behavior
I don't know, but total crash is not something expected. And I guess change in block definition isn't something rare - is there any migration function that didn't work? Should I fix the content manually to get past the problem?

Note
There are also two other exceptions on console, not sure if they're important.

TypeError: Converting circular structure to JSON
 Uncaught (in promise) TypeError: Converting circular structure to JSON

[designsimply]

I tried testing this after upgrading to 4.0.0-rc.1 and opening a demo post published using a past version of Gutenberg and I didn't see a fatal exception or a total crash. I also tried opening a post with an image block made with a past Gutenberg version separate from the demo post, and that post opened normally for me as well. I tested using WordPress 4.9.8 and Gutenberg 4.0.0-rc.1 with Firefox 62.0.3 and Chrome 69.0.3497.92 on macOS 10.13.6. Are my testing steps exactly the same as yours or am I missing a step for testing?

By fatal exception, do you mean the block was marked as invalid or do you mean the whole editor crashed or did something in between happen?

Out of curiosity, does clearing browser cache make the problem go away?

Would you be okay to try testing with 4.0.0-rc.1? You can download it at https://github.com/WordPress/gutenberg/releases/tag/v4.0.0-rc.1

Thank you for including console errors! I don't recognize the ones you've listed but I see several results for the 2nd line in a search at https://www.google.com/search?q=%22TypeError%3A+Converting+circular+structure+to+JSON%22. I am just not sure why you might be seeing that error while I am not. May I ask if you have added any additional custom blocks yourself or do you have any plugins installed that have added custom blocks?

[marcin-gryszkalis]

Your steps are exactly what I'm doing - open demo post created with older gutenberg (IIRC I made no changes to the original content).

fatal exception = white page with empty gutenberg block, ie.

<div id="editor" class="gutenberg__editor"></div>

Cache is not involved (I just checked in the browser that never visited the site).

Below you can see full trace for 2 additional errors:

VM46:37 TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at window.console.error (<anonymous>:39:101)
    at Object.error (index.js?ver=1538435654:2)
    at et (index.js?ver=1538435654:2)
    at pt (index.js?ver=1538435654:2)
    at index.js?ver=1538435654:2
    at Array.reduce (<anonymous>)
    at index.js?ver=1538435654:2
    at Array.SETUP_EDITOR (index.js?ver=1538435654:50)
    at Object.dispatch (index.js?ver=1538435654:12)
window.console.error @ VM46:37
VM46:39 Uncaught (in promise) TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at window.console.error (<anonymous>:39:101)
    at Object.error (index.js?ver=1538435654:2)
    at et (index.js?ver=1538435654:2)
    at pt (index.js?ver=1538435654:2)
    at index.js?ver=1538435654:2
    at Array.reduce (<anonymous>)
    at index.js?ver=1538435654:2
    at Array.SETUP_EDITOR (index.js?ver=1538435654:50)
    at Object.dispatch (index.js?ver=1538435654:12)

[youknowriad]

I think this one has been fixed by #10532 right @iseulde ?

[marcin-gryszkalis]

I just tested on Firefox and the behavior is a bit different - the editor opens but images are not there. The console shows block validation errors for core/image, core-embed/vimeo, and core/pullquote - but no other exceptions

Block validation: Expected tag name `div`, instead saw `figure`. index.js:2:144385
Block validation: Block validation failed for `core/image` ( 
Object { name: "core/image", title: "Image", description: "They’re worth 1,000 words! Insert a single image.", icon: {…}, category: "common", keywords: (1) […], attributes: {…}, transforms: {…}, getEditWrapperProps: getEditWrapperProps()
, edit: WithSelect(WithViewportMatch((t)))()
, … }
 ).

Expected:

<div class="wp-block-image aligncenter"><figure class="aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape"/><figcaption>If your theme supports it, you'll see the "wide" button on the image toolbar. Give it a try.</figcaption></figure></div>

Actual:

<figure class="wp-block-image aligncenter"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="Beautiful landscape"/><figcaption>If your theme supports it, you'll see the "wide" button on the image toolbar. Give it a try.</figcaption></figure> index.js:2:144385
Block validation: Expected token of type `StartTag` ( 
Object { type: "StartTag", tagName: "div", attributes: (1) […], selfClosing: false }
 ), instead saw `Chars` ( 
Object { type: "Chars", chars: "\nhttps://vimeo.com/22439234\n" }
 ). index.js:2:144385
Block validation: Block validation failed for `core-embed/vimeo` ( 
Object { name: "core-embed/vimeo", title: "Vimeo", description: "Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.", icon: {…}, category: "embed", keywords: (1) […], attributes: {…}, supports: {…}, transforms: undefined, edit: WithSelect(r)()
, … }
 ).

Expected:

<figure class="wp-block-embed-vimeo alignwide wp-block-embed is-type-video is-provider-vimeo"><div class="wp-block-embed__wrapper">
https://vimeo.com/22439234
</div></figure>

Actual:

<figure class="wp-block-embed-vimeo alignwide wp-block-embed is-type-video is-provider-vimeo">
https://vimeo.com/22439234
</figure> index.js:2:144385
Block validation: Expected tag name `figure`, instead saw `blockquote`. index.js:2:144385
Block validation: Block validation failed for `core/pullquote` ( 
Object { name: "core/pullquote", title: "Pullquote", description: "Highlight a quote from your post or page by displaying it as a graphic element.", icon: {…}, category: "formatting", attributes: {…}, supports: {…}, edit: edit()
, save: save()
, deprecated: (2) […] }
 ).

Expected:

<figure class="wp-block-pullquote"><blockquote><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote></figure>

Actual:

<blockquote class="wp-block-pullquote"><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote> index.js:2:144385
wp.editor.RichTextProvider is deprecated and will be removed from Gutenberg in 4.0.0. Please use wp.data.select( 'core/editor' ) methods instead. Note: This is a global warning, shown regardless of whether the component is used. index.js:1:1163

[marcin-gryszkalis]

It seems that opening it in FF fixed old demo page (saved draft opens properly in Chrome).

Upgrading gutenberg to 4.0.0-rc1 didn't fix the problem (I have other posts that are still "broken" - the cause errors in Chrome).

[marcin-gryszkalis]

Ok, I found the original cause - it's incompatibility with "JavaScript Errors Notifier" chrome extension:
https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd

[marcin-gryszkalis]

Notified upstream on barbushin/javascript-errors-notifier#79

[designsimply]

Nice find!! Thank you for reporting and referencing that report.