Broken block editor because of uncatched fatal error in field JSON serialization

[rvdsteege]

I just came across a broken block editor (Classic block) because a fatal error occurred during JSON serialization of a field.

wp-pay-core/src/Fields/SelectField.php

Lines 100 to 112 in 7baee62

	/**
	* Serialize to JSON.
	*
	* @return array
	*/
	public function jsonSerialize() {
	$data = parent::jsonSerialize();
	$data['type'] = 'select';
	$data['options'] = $this->get_flat_options();
	return $data;
	}

The gateway configuration had invalid credentials and the option were retrieved through a IDealIssuerSelectField class.

The issue was triggered from WooCommerce via the JSON encode of $this->data in https://github.com/woocommerce/woocommerce-blocks/blob/2ff8573d5426ebee180e50539f113c211362d1b9/src/Assets/AssetDataRegistry.php#L348-L373

Internal Help Scout ticket: https://secure.helpscout.net/conversation/2036688566/24611

[remcotolsma]

A possible solution is:

$data['options'] = [];

try {
	$data['options'] = $this->get_flat_options(); 
} catch ( \Exception $e ) {
	$data['error'] = $e->getMessage();
}

return $data; 

But the question is also why is there an IDealIssuerSelectField instance in Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry->data?

I know we use the field JSON for the registerPaymentMethod content property:

https://github.com/woocommerce/woocommerce-blocks/blob/060f63c04f0f34f645200b5d4da9212125c49177/docs/third-party-developers/extensibility/checkout-payment-methods/payment-method-integration.md#payment-methods---registerpaymentmethod-options-

• https://github.com/pronamic/wp-pronamic-pay-woocommerce/blob/74892ffadc5d50a9774ba6125f1814523a5a6aca/js/src/index.js#L129-L140
• https://github.com/pronamic/wp-pronamic-pay-woocommerce/blob/74892ffadc5d50a9774ba6125f1814523a5a6aca/js/src/index.js#L39-L78
• https://github.com/pronamic/wp-pronamic-pay-woocommerce/blob/74892ffadc5d50a9774ba6125f1814523a5a6aca/src/PaymentMethodType.php#L126-L156

The field.options property is directly injected in the WordPress <SelectControl options={ field.options } /> component:

• https://developer.wordpress.org/block-editor/reference-guides/components/select-control/
• https://wp-gb.com/selectcontrol/

We currently also use <BaseControl />, is there a default way to display errors for these control components? Should we add a <Notice status="error">An unknown error occurred.</Notice> when field.error is set? Is field.error a common property for field errors?

• https://developer.wordpress.org/block-editor/reference-guides/components/base-control/
• https://developer.wordpress.org/block-editor/reference-guides/components/notice/

Apart from this I think it is correct to add a try catch in jsonSerialize?