block editor - how to get a more significant error response from ServerSideRender

admin管理员组

文章数量:1334163

I'm having a heck of a time with the ServerSideRender component for a Gutenberg block I'm developing. I'm seeing this error in the (non-)rendered block: Error loading block: The response is not a valid JSON response. But where can I see the actual JSON response?

In the Chrome Inspector Tools I see:

Failed to load resource: the server responded with a status of 502 ()

along with the request that was sent, with all the block attributes:

;attributes%5BPARAGRAPHSTYLES_FONTFAMILY%5D=Times%20New%20Roman&attributes%5BPARAGRAPHSTYLES_LINEHEIGHT%5D=1.5&attributes%5BPARAGRAPHSTYLES_PADDINGTOPBOTTOM%5D=8&attributes%5BPARAGRAPHSTYLES_PADDINGLEFTRIGHT%5D=17&attributes%5BPARAGRAPHSTYLES_MARGINTOPBOTTOM%5D=24&attributes%5BPARAGRAPHSTYLES_MARGINLEFTRIGHT%5D=14&attributes%5BPARAGRAPHSTYLES_MARGINLEFTRIGHTUNIT%5D=auto&attributes%5BPARAGRAPHSTYLES_PARAGRAPHALIGN%5D=4&attributes%5BPARAGRAPHSTYLES_WIDTH%5D=85&attributes%5BPARAGRAPHSTYLES_NOVERSIONFORMATTING%5D=false&attributes%5BPARAGRAPHSTYLES_BORDERWIDTH%5D=4&attributes%5BPARAGRAPHSTYLES_BORDERCOLOR%5D=%230b02ac&attributes%5BPARAGRAPHSTYLES_BORDERSTYLE%5D=3&attributes%5BPARAGRAPHSTYLES_BORDERRADIUS%5D=12&attributes%5BPARAGRAPHSTYLES_BACKGROUNDCOLOR%5D=%23fdfbf7&attributes%5BVERSIONSTYLES_BOLD%5D=true&attributes%5BVERSIONSTYLES_ITALIC%5D=true&attributes%5BVERSIONSTYLES_UNDERLINE%5D=false&attributes%5BVERSIONSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSIONSTYLES_TEXTCOLOR%5D=%23000096&attributes%5BVERSIONSTYLES_FONTSIZE%5D=9&attributes%5BVERSIONSTYLES_FONTSIZEUNIT%5D=inherit&attributes%5BVERSIONSTYLES_VALIGN%5D=3&attributes%5BBOOKCHAPTERSTYLES_BOLD%5D=true&attributes%5BBOOKCHAPTERSTYLES_ITALIC%5D=false&attributes%5BBOOKCHAPTERSTYLES_UNDERLINE%5D=false&attributes%5BBOOKCHAPTERSTYLES_STRIKETHROUGH%5D=false&attributes%5BBOOKCHAPTERSTYLES_TEXTCOLOR%5D=%2302813d&attributes%5BBOOKCHAPTERSTYLES_FONTSIZE%5D=9&attributes%5BBOOKCHAPTERSTYLES_FONTSIZEUNIT%5D=em&attributes%5BBOOKCHAPTERSTYLES_VALIGN%5D=3&attributes%5BVERSENUMBERSTYLES_BOLD%5D=false&attributes%5BVERSENUMBERSTYLES_ITALIC%5D=false&attributes%5BVERSENUMBERSTYLES_UNDERLINE%5D=false&attributes%5BVERSENUMBERSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSENUMBERSTYLES_TEXTCOLOR%5D=%23ee0000&attributes%5BVERSENUMBERSTYLES_FONTSIZE%5D=7&attributes%5BVERSENUMBERSTYLES_FONTSIZEUNIT%5D=em&attributes%5BVERSENUMBERSTYLES_VALIGN%5D=1&attributes%5BVERSETEXTSTYLES_BOLD%5D=false&attributes%5BVERSETEXTSTYLES_ITALIC%5D=false&attributes%5BVERSETEXTSTYLES_UNDERLINE%5D=false&attributes%5BVERSETEXTSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSETEXTSTYLES_TEXTCOLOR%5D=%23706e6e&attributes%5BVERSETEXTSTYLES_FONTSIZE%5D=8&attributes%5BVERSETEXTSTYLES_FONTSIZEUNIT%5D=em&attributes%5BVERSETEXTSTYLES_VALIGN%5D=3&attributes%5BLAYOUTPREFS_SHOWBIBLEVERSION%5D=true&attributes%5BLAYOUTPREFS_BIBLEVERSIONALIGNMENT%5D=2&attributes%5BLAYOUTPREFS_BIBLEVERSIONPOSITION%5D=1&attributes%5BLAYOUTPREFS_BIBLEVERSIONWRAP%5D=2&attributes%5BLAYOUTPREFS_BOOKCHAPTERALIGNMENT%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERPOSITION%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERWRAP%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERFORMAT%5D=3&attributes%5BLAYOUTPREFS_BOOKCHAPTERFULLQUERY%5D=false&attributes%5BLAYOUTPREFS_SHOWVERSENUMBERS%5D=true&attributes%5BVERSION%5D%5B0%5D=LUZZI&attributes%5BVERSION%5D%5B1%5D=NVBSE&attributes%5BQUERY%5D=Lc10%2C1-16&attributes%5BPOPUP%5D=false&attributes%5BFORCEVERSION%5D=false&attributes%5BFORCECOPYRIGHT%5D=false&post_id=1178&lang=it&_locale=user

All the attributes look correct, and how they're handled in the PHP render callback is looking correct. I had the ServerSideRender working until yesterday, and now suddenly this "non valid JSON response error" is popping up.

I haven't made any changes to my render callback in PHP. I have even stepped through the render callback PHP function to make sure it was receiving all the attributes correctly and handling them correctly, and I have verified that that is the case. I have a function that will write to a debug.txt file, and I have stepped through the render callback making sure that each condition is working correctly. I can even see the final output that the render callback is returning, and it is correct. And yet, I am seeing this error on the Gutenberg block side. It would be helpful to have a more significant error message rather than "not a valid JSON response".

Looking at the Network tab of the Chrome Inspector Tools I am seeing that the actual response from the request posted above is 502 Bad Gateway - nginx.

I have no idea what this is supposed to mean, because the request from the block is being sent to the server callback, the server callback is processing the request and returning a correct response. Something is happening somewhere between the response that is returned from the callback and the client side rendering of the block. Any ideas what could possibly be going on?

I'm having a heck of a time with the ServerSideRender component for a Gutenberg block I'm developing. I'm seeing this error in the (non-)rendered block: Error loading block: The response is not a valid JSON response. But where can I see the actual JSON response?

In the Chrome Inspector Tools I see:

Failed to load resource: the server responded with a status of 502 ()

along with the request that was sent, with all the block attributes:

https://www.bibleget.io/wp-json/wp/v2/block-renderer/bibleget/bible-quote?context=edit&attributes%5BPARAGRAPHSTYLES_FONTFAMILY%5D=Times%20New%20Roman&attributes%5BPARAGRAPHSTYLES_LINEHEIGHT%5D=1.5&attributes%5BPARAGRAPHSTYLES_PADDINGTOPBOTTOM%5D=8&attributes%5BPARAGRAPHSTYLES_PADDINGLEFTRIGHT%5D=17&attributes%5BPARAGRAPHSTYLES_MARGINTOPBOTTOM%5D=24&attributes%5BPARAGRAPHSTYLES_MARGINLEFTRIGHT%5D=14&attributes%5BPARAGRAPHSTYLES_MARGINLEFTRIGHTUNIT%5D=auto&attributes%5BPARAGRAPHSTYLES_PARAGRAPHALIGN%5D=4&attributes%5BPARAGRAPHSTYLES_WIDTH%5D=85&attributes%5BPARAGRAPHSTYLES_NOVERSIONFORMATTING%5D=false&attributes%5BPARAGRAPHSTYLES_BORDERWIDTH%5D=4&attributes%5BPARAGRAPHSTYLES_BORDERCOLOR%5D=%230b02ac&attributes%5BPARAGRAPHSTYLES_BORDERSTYLE%5D=3&attributes%5BPARAGRAPHSTYLES_BORDERRADIUS%5D=12&attributes%5BPARAGRAPHSTYLES_BACKGROUNDCOLOR%5D=%23fdfbf7&attributes%5BVERSIONSTYLES_BOLD%5D=true&attributes%5BVERSIONSTYLES_ITALIC%5D=true&attributes%5BVERSIONSTYLES_UNDERLINE%5D=false&attributes%5BVERSIONSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSIONSTYLES_TEXTCOLOR%5D=%23000096&attributes%5BVERSIONSTYLES_FONTSIZE%5D=9&attributes%5BVERSIONSTYLES_FONTSIZEUNIT%5D=inherit&attributes%5BVERSIONSTYLES_VALIGN%5D=3&attributes%5BBOOKCHAPTERSTYLES_BOLD%5D=true&attributes%5BBOOKCHAPTERSTYLES_ITALIC%5D=false&attributes%5BBOOKCHAPTERSTYLES_UNDERLINE%5D=false&attributes%5BBOOKCHAPTERSTYLES_STRIKETHROUGH%5D=false&attributes%5BBOOKCHAPTERSTYLES_TEXTCOLOR%5D=%2302813d&attributes%5BBOOKCHAPTERSTYLES_FONTSIZE%5D=9&attributes%5BBOOKCHAPTERSTYLES_FONTSIZEUNIT%5D=em&attributes%5BBOOKCHAPTERSTYLES_VALIGN%5D=3&attributes%5BVERSENUMBERSTYLES_BOLD%5D=false&attributes%5BVERSENUMBERSTYLES_ITALIC%5D=false&attributes%5BVERSENUMBERSTYLES_UNDERLINE%5D=false&attributes%5BVERSENUMBERSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSENUMBERSTYLES_TEXTCOLOR%5D=%23ee0000&attributes%5BVERSENUMBERSTYLES_FONTSIZE%5D=7&attributes%5BVERSENUMBERSTYLES_FONTSIZEUNIT%5D=em&attributes%5BVERSENUMBERSTYLES_VALIGN%5D=1&attributes%5BVERSETEXTSTYLES_BOLD%5D=false&attributes%5BVERSETEXTSTYLES_ITALIC%5D=false&attributes%5BVERSETEXTSTYLES_UNDERLINE%5D=false&attributes%5BVERSETEXTSTYLES_STRIKETHROUGH%5D=false&attributes%5BVERSETEXTSTYLES_TEXTCOLOR%5D=%23706e6e&attributes%5BVERSETEXTSTYLES_FONTSIZE%5D=8&attributes%5BVERSETEXTSTYLES_FONTSIZEUNIT%5D=em&attributes%5BVERSETEXTSTYLES_VALIGN%5D=3&attributes%5BLAYOUTPREFS_SHOWBIBLEVERSION%5D=true&attributes%5BLAYOUTPREFS_BIBLEVERSIONALIGNMENT%5D=2&attributes%5BLAYOUTPREFS_BIBLEVERSIONPOSITION%5D=1&attributes%5BLAYOUTPREFS_BIBLEVERSIONWRAP%5D=2&attributes%5BLAYOUTPREFS_BOOKCHAPTERALIGNMENT%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERPOSITION%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERWRAP%5D=1&attributes%5BLAYOUTPREFS_BOOKCHAPTERFORMAT%5D=3&attributes%5BLAYOUTPREFS_BOOKCHAPTERFULLQUERY%5D=false&attributes%5BLAYOUTPREFS_SHOWVERSENUMBERS%5D=true&attributes%5BVERSION%5D%5B0%5D=LUZZI&attributes%5BVERSION%5D%5B1%5D=NVBSE&attributes%5BQUERY%5D=Lc10%2C1-16&attributes%5BPOPUP%5D=false&attributes%5BFORCEVERSION%5D=false&attributes%5BFORCECOPYRIGHT%5D=false&post_id=1178&lang=it&_locale=user

All the attributes look correct, and how they're handled in the PHP render callback is looking correct. I had the ServerSideRender working until yesterday, and now suddenly this "non valid JSON response error" is popping up.

I haven't made any changes to my render callback in PHP. I have even stepped through the render callback PHP function to make sure it was receiving all the attributes correctly and handling them correctly, and I have verified that that is the case. I have a function that will write to a debug.txt file, and I have stepped through the render callback making sure that each condition is working correctly. I can even see the final output that the render callback is returning, and it is correct. And yet, I am seeing this error on the Gutenberg block side. It would be helpful to have a more significant error message rather than "not a valid JSON response".

Looking at the Network tab of the Chrome Inspector Tools I am seeing that the actual response from the request posted above is 502 Bad Gateway - nginx.

I have no idea what this is supposed to mean, because the request from the block is being sent to the server callback, the server callback is processing the request and returning a correct response. Something is happening somewhere between the response that is returned from the callback and the client side rendering of the block. Any ideas what could possibly be going on?

• block-editor
• json
• nginx

Share Improve this question edited Jun 5, 2020 at 12:58 Tom J Nowell♦ 61.1k77 gold badges7979 silver badges148148 bronze badges asked Jun 5, 2020 at 12:06 JohnRDOrazioJohnRDOrazio 15177 bronze badges 14

• Have you checked the PHP error log? That URL is extremely long, are you sure that it's valid at that length? Would it not make more sense to use block styles for things like font family etc rather than putting them on the block itself as parameters? It'd be easier to use, more performant, and have a much nicer UI with previews. Normally you would see the JSON response in the dev tools, but you can't see it because there isn't one. The response was not JSON, it was "502 bad gateway". – Tom J Nowell ♦ Commented Jun 5, 2020 at 12:56
• only relevant error I can see in the logs would be this: 3146#0: *230188 upstream sent too big header while reading response header from upstream – JohnRDOrazio Commented Jun 5, 2020 at 13:45
• since these attributes are being saved as a single option array in the ServerSideRender callback, is it possible to instead save to WordPress options from the client side code? And is it possible to read transients from the client side code? I am using transients to cache requests to an external service, and the ServerSideRender callback is checking against the transients. If I can do that client side, why by all means. – JohnRDOrazio Commented Jun 5, 2020 at 13:48
• I seem to have found the solution by upping the proxy_buffer_size for my nginx requests, as indicated here: talk.plesk/threads/… . However, I can imagine that if it was a problem for myself in the development phase, it could very well be a problem for users in production phase, so it would be a good idea to avoid the ServerSideRender. I guess I'll turn this into a new question: whether transients and options can be handled in the client side apis. – JohnRDOrazio Commented Jun 5, 2020 at 14:48
• storing it as options doesn't sound like it would solve the problem, I would expect it to multiply any existing problems. I would not completely change the question, it would be swapping the ground from under your feet. If you have a new question, ask a new question don't change an existing one, and I would STRONGLY advise agaiinst the transients/options path, I cannot state more strongly that it is the wrong approach – Tom J Nowell ♦ Commented Jun 5, 2020 at 19:13

 |  Show 9 more comments

2 Answers 2

Sorted by: Reset to default 1

After discovering the exact problem in this case, the request headers being too large because ServerSideRender sending too many attributes in a GET request, I opened a ticket on the Gutenberg development repository proposing a few possible solutions for this issue. And the issue had actually already been addressed because I wasn't the first one to have this problem, so there is currently a pull request to solve this by allowing POST request to be made instead of GET requests.

As for the initial question of getting a more significant response from the ServerSideRender when there is an error, that still stands. It would be helpful to see something more than Error loading block: The response is not a valid JSON response. Perhaps seeing what the exact http status code from the response is, instead of having to dig for it in the Network requests of the browser's Inspector Tools...

The problem is that your block has a lot of attributes, and when they're turned into a GET url the HTTP headers are larger than your Nginx setup is configured to handle.

This is why you get a 502 Gateway error, it isn't a WP error, WP doesn't even get loaded.

There are 5 possible solutions:

• require nginx configuration changes in order to use your code, to support the super long URLs
• reduce the number of attributes passed to the server, perhaps by breaking up the block, or relying on block editor features such as block styles rather than dedicated attributes
• re-implement using javascript, and use an API to interact with PHP yourself, allowing you to do the necessary PHP bits then apply the attributes yourself in JS
• Break this block apart into multiple blocks, it sounds like it does a lot and might benefit from composability

But the final one:

• Don't rely on serverside rendering to display both the saved output, and the edit output. They don't have to be the same. You don't even need to use server side rendering in the edit function of your block, you could make it render a placeholder in the edit screen, or implement something completely different

本文标签： block editorhow to get a more significant error response from ServerSideRender