Errors not reported in some circumstances

[mudetroit]

Description

When using the ErrorBoundary there are errors reported to the console which do not seem to be reported to Rollbar properly.

Steps to recreate

1. Create a new app using create react app
2. install @rollbar/react and rollbar
3. Update the app.js file to the following

import { Provider as RollbarProvider, ErrorBoundary } from "@rollbar/react";

import "./App.css";

const rollbarConfig = {
  accessToken:  <Put a project key in here>,
  captureUncaught: true,
  captureUnhandledRejections: true,
  payload: {
    environment: `dev`,
  },
};

function ErrorFallback() {
  return <div>Oops</div>;
}

function App() {
  return (
    <RollbarProvider config={rollbarConfig}>
      <ErrorBoundary fallbackUI={ErrorFallback}>{undefined}</ErrorBoundary>
    </RollbarProvider>
  );
}

export default App;

4. Start the app up

Note now that the error caused by trying to render undefined appears in the console, but does not appear in the rollbar project

[waltjones]

I see what's happening, but not sure yet how to handle.

In versions of React before 18, it is sometimes permitted to return undefined from a component and sometimes not. starting in React 18, it is always valid to return undefined. reactwg/react-18#75

This is also reflected in the current docs: https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored)

I'm testing with React 17 and I can make React happy with a div:
<ErrorBoundary><div>{undefined}</div></ErrorBoundary>

So it's OK for div's to have undefined children, but not an application component. Again, this is made fully consistent in React 18 and undefined is always allowed.

So there's still an error raised. Why isn't it getting reported?
Because the error doesn't happen in ErrorBoundary's children. An ErrorBoundary only sees errors thrown in its children.

When there is no error, ErrorBoundary returns the value of children, which in this case is undefined.

The error is then raised after ErrorBoundary returns because it returned undefined. It can't catch and report this because the error happens outside ErrorBoundary.

Solution?
We could detect undefined and return null. e.g.: if (typeof children === undefined) return null

But that won't be the correct behavior for future React versions, and I'm not convinced it's the correct behavior for past versions either.

@mudetroit Thoughts?

[mudetroit]

@waltjones okay this sounds like an edge case than. We stumbled across it because we had an error not getting tracked and we were confused as to why.

In our case, I am pretty sure we can safely update to React v18. But I think the best thing here might be to put a note in the documentation here with this being a possible issue that people could run into.

[waltjones]

This has been submitted to readme.io.