[COMPASS-5075] Add react error boundaries to `connect` Created: 08/Sep/21  Updated: 10/Jan/24  Resolved: 28/Jan/22

Status: Closed
Project: Compass
Component/s: Connectivity, Tech debt
Affects Version/s: None
Fix Version/s: 1.31.0

Type: Task Priority: Major - P3
Reporter: Rhys Howell Assignee: Rhys Howell
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Depends
depends on COMPASS-5229 Create new `connect` package Closed
Related
is related to COMPASS-4462 Connectivity exceptions are not caugh... Closed
is related to COMPASS-5074 Add error boundary to Compass sidebar Closed
Epic Link: COMPASS-4948
Story Points: 3
Documentation Changes: Not Needed
Sprint: Iteration Seoul, Iteration Tokyo

 Description   

Currently we only have react error boundaries set up for the various tabs in compass (databases, collections, collection views). We should add error boundaries to the rendering of parts of the connection form as well. It will help gracefully handle errors that occur when the component is rendered. This should ideally should never happen, but in the case that it does happen, a user should be able to see the error that occurred without opening the console, and possibly use other parts of Compass that are unaffected since the error no longer breaks the react window instance (with the connect form this would mean they could choose a non-erroring connection and continue using compass).

React error boundaries:
https://reactjs.org/docs/error-boundaries.html

Here's an example of how we currently handle them in Compass:
https://github.com/mongodb-js/compass/blob/main/packages/compass-collection/src/modules/context.js#L263
This uses the UnsafeComponent component from hadron-react-components: https://github.com/mongodb-js/compass/blob/main/packages/hadron-react-components/src/unsafe-component.jsx

We should update UnsafeComponent to use the current recommended react implementation:
https://reactjs.org/docs/error-boundaries.html



 Comments   
Comment by Githook User [ 04/Feb/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(connections): Add react error boundary to compass-components and wrap new connect form COMPASS-5075 (#2730)
Branch: 1.31-releases
https://github.com/mongodb-js/compass/commit/eb33e539a6b98537423e32542b16506ac291d0b4

Comment by Githook User [ 01/Feb/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(connections): Add react error boundary to compass-components and wrap new connect form COMPASS-5075 (#2730)
Branch: compass-5413-open-agg-query
https://github.com/mongodb-js/compass/commit/eb33e539a6b98537423e32542b16506ac291d0b4

Comment by Githook User [ 31/Jan/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(connections): Add react error boundary to compass-components and wrap new connect form COMPASS-5075 (#2730)
Branch: COMPASS-5409-tests
https://github.com/mongodb-js/compass/commit/eb33e539a6b98537423e32542b16506ac291d0b4

Comment by Githook User [ 28/Jan/22 ]

Author:

{'name': 'Rhys', 'email': 'Anemy@users.noreply.github.com', 'username': 'Anemy'}

Message: chore(connections): Add react error boundary to compass-components and wrap new connect form COMPASS-5075 (#2730)
Branch: main
https://github.com/mongodb-js/compass/commit/eb33e539a6b98537423e32542b16506ac291d0b4

Generated at Wed Feb 07 22:38:21 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.