ErrorBoundary fallback has inconsistent typing

[jcomo]

Core or SDK?

Platform/SDK

Which part? Which one?

Javascript / React

Description

The fallback prop of the ErrorBoundary accepts a React.ReactNode (or function that returns one), but the body of the render method checks for isValidElement (see:

sentry-javascript/packages/react/src/errorboundary.tsx

Lines 163 to 165 in 316566e

	if (React.isValidElement(fallback)) {
	return fallback;
	}

)

The docs suggest that a string (ReactNode) can be passed in, but the ErrorBoundary will render null.

Note that if you supply a function for fallback that returns a ReactNode (eg. string), it will actually render because there is no check for isValidElement around the fallback function variant.

Suggested Solution

The solution depends on the preference.

Personally, I think it should be an element. If that's the consensus, we should update the typings in sentry-javascript and the docs to reflect that.

If it should be a ReactNode, then we need to remove the isValidElement check.

Happy to implement either solution! Either way, we should include a new test for this in sentry-javascript.

[getsentry-release]

Routing to @getsentry/team-webplatform for triage. ⏲️

[AbhiPrasad]

Thanks for opening an issue. I agree that it should be an element. If you're interested in helping out, contributions are welcome!

[jcomo]

Thanks @AbhiPrasad! When you get a chance, here are the PRs for review:

• fix(react): Require ReactElement in ErrorBoundary props and render #3857
• Show ReactElement as fallback in ErrorBoundary example sentry-docs#3963

[AbhiPrasad]

Closed with #3857. Will be available with the next release of the SDK (which should be sometime this week).