Built-in Error/SuspenseBoundaries for React DecoratorNodes

[zurfyx]

It happens. Your video component crashes; or your component comes with some asynchronous GraphQL behavior that makes the component suspend. Both of them currently need developer awareness as otherwise it can break the whole editor (yes, not having a Suspense layer on a Decorator makes React swallow all the DOM).

We can make this better on our @lexical/react framework. We can ship this by default. And that's exactly what this PR fixes.

Screen.Recording.2022-10-13.at.2.48.20.pm.mov

API

TypeScript

<RichTextPlugin
  contentEditable={
    <div className="editor-scroller">
      <div className="editor" ref={onRef}>
        <ContentEditable />
      </div>
    </div>
  }
  placeholder={placeholder}
  ErrorBoundary={ErrorBoundary}
/>
export default function ErrorBoundary({children, onError}: Props): JSX.Element {
  return (
    <ReactErrorBoundary
      fallback={
        <span className="ErrorBoundary__container">
          React crashed. Please,{' '}
          <a href="/facebook/lexical/issues/new/choose">
            file a task
          </a>
          .
        </span>
      }
      onError={onError}>
      {children}
    </ReactErrorBoundary>
  );
}

Flow and WWW

ErrorBoundary={({children, onError}) => (
  <ErrorBoundary
    fallback={() => <span>Crashed</span>}
    onError={onError}>
    {children}
  </ErrorBoundary>
)}

Or just simply (because it doesn't require fallback) -- don't really endorse this

ErrorBoundary={ErrorBoundary}

Why custom ErrorBoundary component support but not for Suspense?

ErrorBoundary is a must have. Users shouldn't have to understand about error propagation on nested editor and the private editor._onError property.

At the same time, Suspense is a fairly common user-visible state and it's a good practice to customize the glimmer to adjust the UI best. This can be done easily by adding another Suspense layer on the app. However, this one will act as a fallback mechanism in case the user didn't.

⚠️ 0.6 breaking change

It is unwise to have ErrorBoundaries with a fallback to null. For newcomers, we may want to provide a built-in way to postpone this effort and simplify it. We can iterate on this later. react-error-boundary thinks the same way:

Uncaught Error: react-error-boundary requires either a fallback, fallbackRender, or FallbackComponent prop

Second, we don't want to ship an opinionated implementation of React Error Boundary, just like React never did. For WWW, we have a internal-specific ErrorBoundary that we certainly want to reuse.

---

Kudos to @fantactuka for the ErrorBoundary idea

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
lexical	✅ Ready (Inspect)	Visit Preview	Oct 14, 2022 at 0:46AM (UTC)
lexical-playground	✅ Ready (Inspect)	Visit Preview	Oct 14, 2022 at 0:46AM (UTC)

[fantactuka]

Fixes #3089

[fantactuka]

QQ: is this one required, given default value is some sort of cope of react-error-boundary?

[zurfyx]

Yeah, but it is just for the playground; other people can just their own replacement