✨ [Feature #498]: Add Error Boundaries

[Sachin-chaurasiya]

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

I worked on adding an error boundary to the application, I have used https://www.npmjs.com/package/react-error-boundary package to achieve the same. It's a quite popular package and has 2,444,018+ weekly downloads.

If interested you can read Kent C. Dodds article. https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react

Fixes #498

Type of change

Please delete options that are not relevant.

• [x] New feature (non-breaking change which adds functionality)

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

Checklist:

• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-play	✅ Ready (Inspect)	Visit Preview	Aug 27, 2022 at 2:23PM (UTC)

[Sachin-chaurasiya]

@atapas @koustov , PR is ready for review.

[Sachin-chaurasiya]

@atapas , Awaiting for your approval.

[Angryman18]

we already have error-boundary in react official docs but as class based component (componentDidCatch method doesnt have alternative in functional component). we can think of using it does the same thing instead of the external npm package. looking forward for other thoughts. https://reactjs.org/docs/error-boundaries.html

[Sachin-chaurasiya]

we already have error-boundary in react official docs but as class based component (componentDidCatch method doesnt have alternative in functional component). we can think of using it does the same thing instead of the external npm package. looking forward for other thoughts. https://reactjs.org/docs/error-boundaries.html

Hey @Angryman18 , Thanks. the problem with this approach is that we have all components as functional components and React boundary is only supported for in-class components and we don't want to go with the class component approach.

The package we are using it's quite popular and suggested by many react experts. If interested you can read Kent C. Dodds article. https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react

[Angryman18]

we already have error-boundary in react official docs but as class based component (componentDidCatch method doesnt have alternative in functional component). we can think of using it does the same thing instead of the external npm package. looking forward for other thoughts. https://reactjs.org/docs/error-boundaries.html

Hey @Angryman18 , Thanks. the problem with this approach is that we have all components as functional components and React boundary is only supported for in-class components and we don't want to go with the class component approach.

The package we are using it's quite popular and suggested by many react experts. If interested you can read Kent C. Dodds article. https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react

thats fine but my point of view was not using a 56KB cost package where we could able to do it by adding few lines of code. other thant that that everything is fine. we can do it this way.

[Sachin-chaurasiya]

we already have error-boundary in react official docs but as class based component (componentDidCatch method doesnt have alternative in functional component). we can think of using it does the same thing instead of the external npm package. looking forward for other thoughts. https://reactjs.org/docs/error-boundaries.html

Hey @Angryman18 , Thanks. the problem with this approach is that we have all components as functional components and React boundary is only supported for in-class components and we don't want to go with the class component approach. The package we are using it's quite popular and suggested by many react experts. If interested you can read Kent C. Dodds article. https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react

thats fine but my point of view was not using a 56KB cost package where we could able to do it by adding few lines of code. other thant that that everything is fine. we can do it this way.

@Angryman18 , I got your point. but here we should look for maintainable code and not the package cost. It is used by millions of people to keep the code clean and maintainable.

[Sachin-chaurasiya]

@koustov @atapas, Awaiting for your approval.

[Sachin-chaurasiya]

@koustov , Waiting for your approval.