Added error boundary for react

[mdshamoon]

Summary

Added error boundary for react.

Steps to test:

Add a constant in any file
const test: any= {}

now try to nested check for that object

if(test.button.show === true)

It will show the error boundary

[github-actions[bot]]

🚀 Deployed on https://deploy-preview-1991--fervent-hypatia-766178.netlify.app

[codecov[bot]]

Codecov Report

Base: 70.01% // Head: 69.97% // Decreases project coverage by -0.04% :warning:

Coverage data is based on head (6442ace) compared to base (05645ac). Patch coverage: 47.05% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1991      +/-   ##
==========================================
- Coverage   70.01%   69.97%   -0.05%     
==========================================
  Files         238      239       +1     
  Lines        8082     8099      +17     
  Branches     1740     1741       +1     
==========================================
+ Hits         5659     5667       +8     
- Misses       1838     1846       +8     
- Partials      585      586       +1     

Impacted Files	Coverage Δ
...c/routes/AuthenticatedRoute/AuthenticatedRoute.tsx	76.47% <ø> (ø)
src/components/errorboundary/ErrorBoundary.tsx	47.05% <47.05%> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[cypress[bot]]

---

Test summary

172 • 0 • 0 • 0 • 1

---

Run details

Project	Glific
Status	Passed
Commit	94330c71d9 ℹ️
Started	Jan 3, 2023 11:14 AM
Ended	Jan 3, 2023 11:32 AM
Duration	17:25 💡
OS	Linux Ubuntu - 22.04
Browser	Electron 89

View run in Cypress Dashboard ➡️

---

Flakiness

	cypress/integration/staffmanagement/StaffManagement.spec.ts		1
1	Staff Management > should have require field

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[mdshamoon]

if(test.button.show === true)

Yes. Its happening due to the react-scripts-issue that I told you earlier. An iframe blocks the entire screen https://github.com/facebook/create-react-app/issues/11773 I have added a fix written in this issue. Setting react-error-overlay to v6.0.9. This works but let's upgrade reacts-scripts soon

[kurund]

@mdshamoon

We might need to change the implementation as we are using the latest React.

[mdshamoon]

@mdshamoon

We might need to change the implementation as we are using the latest React.

Based on the documentation React doesnt have anything new for Error Boundary in the latest version. It uses the same approach of the class component. Please let me know if I am missing something here.