Loading the site editor hangs

[ajlende]

Description

Loading the site editor hangs while loading. No errors showed up in the JS console or in the PHP error logs, but I found some that were being hidden in the core Redux state.

Reverting 959b616 fixes the issue.

{
  type: 'FAIL_RESOLUTION',
  selectorName: 'getSite',
  args: [],
  error: {
    code: 'invalid_json',
    message: 'The response is not a valid JSON response.'
  }
}

{
  type: 'FAIL_RESOLUTION',
  selectorName: 'getEntityRecord',
  args: [
    'root',
    'site',
    undefined
  ],
  error: {
    code: 'invalid_json',
    message: 'The response is not a valid JSON response.'
  }
}

It seemed this OPTIONS request added in https://github.com/WordPress/gutenberg/pull/59243/files#diff-38a74d088ea018dbbea00d8f5bd5c03ea54bfc099d1d1836686c24a5582bf579R420-R423 isn't returning JSON for me, triggering the errors.

OPTIONS /wp-json/wp/v2/settings?_locale=user HTTP/2
Host: wp.local
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0
Accept: application/json, */*;q=0.1
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://wp.local/wp-admin/site-editor.php
X-WP-Nonce: 15846d7f7d
Origin: https://wp.local
DNT: 1
Connection: keep-alive
Cookie: XDEBUG_SESSION=XDEBUG_ECLIPSE; wp-settings-1=libraryContent%3Dbrowse%26mfold%3Do%26posts_list_mode%3Dlist; wp-settings-time-1=1703206470; wordpress_logged_in_xxx; wp_lang=en_US; wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_xxx
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
Pragma: no-cache
Cache-Control: no-cache
TE: trailers

HTTP/2 200 
server: nginx/1.16.0
date: Fri, 22 Mar 2024 20:23:56 GMT
content-type: text/plain; charset=utf-8
content-length: 0
access-control-allow-origin: *
access-control-allow-methods: *
access-control-allow-headers: *
access-control-max-age: 1728000
X-Firefox-Spdy: h2

Step-by-step reproduction instructions

1. Open the site editor
2. See that it hangs (screenshot below)

@Mamaduka and @jeryj both tried to reproduce the issue, but were unable to, so it must not affect all site configurations.

Screenshots, screen recording, code snippet

Environment info

• https://github.com/WordPress/wordpress-develop/tree/84c21abf36dc2d8cb2b58c03e0e1f237c0a6b18d
• Gutenberg since https://github.com/WordPress/gutenberg/tree/959b61675cb5d5fb02bd5c696f4c892b6d5f37f3

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Mamaduka]

@ajlende, are you still able to reproduce the issue consistently?

[ajlende]

@ajlende, are you still able to reproduce the issue consistently?

Yeah, I've still been working around it by reverting the commit in my local development. It's looking like something is causing the body of the OPTIONS request to be empty for me, so I don't think that #59243 is the root cause of the issue.

However, getting the errors from the Redux state is probably still a worthwhile task to come out of this even if it just means sending them to the error console with a stack trace to help with debugging and reporting problems if this ends up happening to anyone else.

[Mamaduka]

@ajlende, what env are you using for local development?

I'm intentionally trying to reproduce the same editor's state, but without any success so far. I've tried throwing errors in entity resolves, but the editor still loads even though it's in a broken state.

IIRC, silencing the errors in the Redux state was an intentional decision. The actions have options to throw them, but selectors rely on FAIL_RESOLUTION metadata.

@tyxla, you worked on improving the Site Editor's loading state. Do you have any clues as to why this might be happening?

[ajlende]

I've tried throwing errors in entity resolves, but the editor still loads even though it's in a broken state.

The response has to return 200 (success) with an incorrect empty body for the bug to trigger.

IIRC, silencing the errors in the Redux state was an intentional decision. The actions have options to throw them, but selectors rely on FAIL_RESOLUTION metadata.

We don't need the errors thrown, just logged in the JS console so you don't need to install the Redux extension to see if you have errors.

[tyxla]

@ajlende I was unable to reproduce this earlier today.

Could you access and share with us the malformed request response with the errors, in case that sheds more light on what the underlying issue might be?

[ajlende]

Thanks for taking a look @tyxla! I just tested trunk again today, and the site editor no longer hangs. 🤷 So closing this unless it pops up again.