📚 Subject area/topic

/concepts/control-flow/error-boundary.mdx

📋 Page(s) affected (or suggested, for new content)

https://docs.solidjs.com/concepts/control-flow/error-boundary

📋 Description of content that is out-of-date or incorrect

The docs says:

When encountering an error, this component will render a fallback UI instead of the problematic child component(s).
[...]

This is clearly not how ErrorBoundary works. In case of an error, it renders fallback UI instead of all child components (not just instead of problematic ones). The illustrative image should not contain the header and sidebar.

Additionally, the ErrorBoundary doesn't just catch errors from child components, but sometimes also from child elements. For example, in the following code, the error happens and is caught within the same component:

export const ThrowError = (props: { catchInside: boolean }) => {
  const [signal, setSignal] = createSignal(true);

  return (
    <ErrorBoundary fallback={'Error caught within ThrowError.tsx'}>
      {signal() && accessUndefinedVariable} // accessUndefinedVariable is caught by this component
      {accessUndefinedVariable} // accessUndefinedVariable is caught by parent component
    </ErrorBoundary>
  );
};

I actually wanted to check the docs to get clarity about when the error is caught by the same component, and when it's caught by the parent. I would appreciate if this was clarified in the docs.

Thanks for your work!

🖥️ Reproduction in StackBlitz (if reporting incorrect content or code samples)

https://stackblitz.com/edit/solidjs-templates-trbmh2?file=src%2FApp.tsx