feat(react): Support render props in ErrorBoundary (#3793)

Extend the ErrorBoundary component to allow it to support render props
children. This means that patterns like the following are viable:

```jsx
<Sentry.ErrorBoundary>
  {() => (
    <Suspense fallback={<div>Loading...</div>}>
      <Other />
    </Suspense>
  )}
</Sentry.ErrorBoundary>
```

Fixes #3052

Author: AbhiPrasad

packages/react/src/errorboundary.tsx

@@ -156,7 +156,7 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
   };
 
   public render(): React.ReactNode {
-    const { fallback } = this.props;
+    const { fallback, children } = this.props;
     const { error, componentStack, eventId } = this.state;
 
     if (error) {
@@ -171,7 +171,10 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundarySta
       return null;
     }
 
-    return this.props.children;
+    if (typeof children === 'function') {
+      return children();
+    }
+    return children;
   }
 }
 

packages/react/test/errorboundary.test.tsx

@@ -132,6 +132,14 @@ describe('ErrorBoundary', () => {
     expect(container.innerHTML).toBe('<h1>children</h1>');
   });
 
+  it('supports rendering children as a function', () => {
+    const { container } = render(
+      <ErrorBoundary fallback={<h1>Error Component</h1>}>{() => <h1>children</h1>}</ErrorBoundary>,
+    );
+
+    expect(container.innerHTML).toBe('<h1>children</h1>');
+  });
+
   describe('fallback', () => {
     it('renders a fallback component', async () => {
       const { container } = render(