Skip to content

A broken external source may break the UI. Add an ErrorBoundary. #72569

@cbravobernal

Description

@cbravobernal

What

If an external source contains any error on JS, it may crash the block. Something like this:

registerBlockBindingsSource( {
	name: 'bbe/smile-cry',
	useContext: [ 'postId', 'postType' ],
	getValues: ( { bindings } ) => {
		// Force a JS error to test API crash handling
		undefinedFunction();

		if ( bindings.content?.args?.key === 'smile' ) {
			return {
				content: '😊',
			};
		}
		if ( bindings.content?.args?.key === 'cry' ) {
			return {
				content: '😢',
			};
		}
		return {
			content: bindings.content,
		};
	},
	editorUI( { select, context } ) {
		return {
			mode: 'dropdown',
			data: [
				{
					key: 'smile',
					label: __( 'Smile', 'text-domain' ),
					type: 'string',
					args: {
						key: 'smile',
					},
				},
				{
					key: 'cry',
					value: '😢',
					label: __( 'Cry', 'text-domain' ),
					type: 'string',
					args: {
						key: 'cry',
					},
				},
			],
		};
	},
} );

causes

Image

The UI should have an error boundary that prevents this kind of issues.

Screenshare:

error_boundary.mp4

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions