Prevent application crashes with error boundaries

[zrthxn]

2.0 Milestone
https://reactjs.org/docs/error-boundaries.html

[TateDeVito]

Hi @zrthxn - I could try to take a look at this one. Could you give any more detail on specific components you would like to apply the Error Boundary to? Any class of errors you are most trying to prevent?

[zrthxn]

@TateDeVito

The application was susceptible to crashes usually caused by "cannot read property ... of undefined/null" errors. I took care to make sure, as best I could, to prevent these in #229 and #231. However this is not completely guaranteed as this is a JS app and we can't properly fix these things ahead-of-time.

The error boundary needs to mostly prevent the following types of errors

• errors caused by accessing properties on component "props" which are undefined or null,
• errors caused by unexpected API responses, like null instead of data,
• errors caused by infinite loops or infinite re-renders.

Currently what we have is a showNotification function in every component that might have an error and we catch where we think an error might arise, and then call that function. What I wanted to do was make a global, application wide error system wherein any component that errored-out would register that error message and then a notification can be shown or some action taken (maybe log or report if its caused by a logical error?).
The goal is that the user should never have to look at a blank errored-out application.

The following components are the ones where errors are likely to happen (not that they currently do)

• Plugin.jsx
• PluginMeta.jsx
• Plugins.jsx
• Dashboard.jsx
• CreatePlugin.jsx

Further details and advice on the direction of this whole application can be taken from @jennydaman. And you can also talk to me about any of the code I've written.

[TateDeVito]

Ok thanks @zrthxn . I will take a look at this! Will get back if I have any questions/other items.

[TateDeVito]

Hey another quick question @zrthxn @jennydaman - are feature branches off of master what we should be using? Any branch naming conventions to be aware of?

[zrthxn]

@TateDeVito
next is the new features branch. Base your work off of this and submit PRs to this.
When it becomes stable, submit PR to master.
master is somewhat stable. PRs for bug fixes etc can be submitted directly to master.

[TateDeVito]

Got it. Working off of a new branch called error-boundaries which has been created based on the next branch.

[archijaiswal]

I would like to work on it if it's still there. Kindly assign it to me @jennydaman . Thanks!

[jennydaman]

That would be great! There are so many modern features new to React which would greatly benefit this codebase.

[roy98]

Any update here? @jennydaman We could also implement a webhook to notify developers when any of these errors happen. What do you think? I will also implement a fallback UI when the app crash.