Render components with an error boundary

[matthewlynch]

Description

Editors may enter invalid data that a component was not expecting or a component be misconfigured to handle data correctly.

Considerations

Users can wrap components with their own error boundaries but it would be nice for the editor to handle this scenario automatically.

Proposals

Proposal 1

An error boundary should catch component errors which allows the user to correct the data issue without the entire page breaking because of an error that has been thrown.

It would be nice for users to be able to choose a custom error boundary / UI component to render.

[OsamuBlack]

I am using a wrapper error boundary with some of my components, so build-in support would be nice, though it should be opt-in similar to inline or a prop on the Slot rather than enabled on all components.

[FedericoBonel]

Maybe this could be part of field validation (#362), but not entirely sure

[OsamuBlack]

Maybe this could be part of field validation (#362), but not entirely sure

I believe the issue #362 is more about field validation, and while that is a good features, I believe @matthewlynch wants to wrap the render output of the components.

Something like this would work.

export const errorBoundedConfig: UserConfig = {
  ...defaultConf,
  components: Object.keys(defaultConf.components).reduce((acc, key) => {
    const component =
      defaultConf.components[key as keyof typeof defaultConf.components];
    acc[key as keyof UserConfig["components"]] = {
      ...component,
      render: (props) => (
        <ErrorBoundary
          errorComponent={({ error }) => (
            <div>An error occurred on rendering {key}: {error.message}</div>
          )}
        >
          {component.render(props as any)}
        </ErrorBoundary>
      ),
    } 
    return acc;
  }, {} as UserConfig["components"]),
};

We can pass an array of components to filter the components for error-boundary.