Skip to content

Extend React ErrorBoundary component to accept render props for children #3052

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
dan-overton opened this issue Nov 16, 2020 · 0 comments · Fixed by #3793
Closed

Extend React ErrorBoundary component to accept render props for children #3052

dan-overton opened this issue Nov 16, 2020 · 0 comments · Fixed by #3793
Assignees
@AbhiPrasad
Labels
Type: Improvement

Comments

@dan-overton
Copy link

Package + Version

@sentry/react

Version:

5.27.3

Description

I'm using the Sentry ErrorBoundary as the default ErrorBoundary in my application, and want to wrap the lazy loading of a React module via React.lazy.

As per facebook/react#14254 (comment) this requires the Error Boundary to accept render props for it's children. The Sentry Error Boundary currently doesn't, but instead brings up 'Warning: Functions are not valid as a React child in React component' as any function passed in children is not called.

I've extended the Sentry ErrorBoundary locally, and added the following clause to the render method:

 if (typeof this.props.children === 'function') {
      return this.props.children();
    }

    return this.props.children;

This seemingly works well, but it would be nice to have this available in the Sentry component itself. I'm happy to provide a pull request if that would help.
AbhiPrasad added a commit that referenced this issue Jul 9, 2021
@AbhiPrasad
feat(react): Support render props in ErrorBoundary
305f3a0 
Extend the ErroBoundary 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
AbhiPrasad added a commit that referenced this issue Jul 9, 2021
@AbhiPrasad
feat(react): Support render props in ErrorBoundary
6e9f38a 
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
@AbhiPrasad AbhiPrasad self-assigned this Jul 9, 2021
@AbhiPrasad AbhiPrasad mentioned this issue Jul 9, 2021
Merged
kamilogorek pushed a commit that referenced this issue Jul 12, 2021
@AbhiPrasad
feat(react): Support render props in ErrorBoundary (#3793)
3095f4b 
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@AbhiPrasad AbhiPrasad

Labels
Type: Improvement
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(react): Support render props in ErrorBoundary getsentry/sentry-javascript
3 participants
@dan-overton @AbhiPrasad @rodolfoBee