How to let react electron ignore undefined error?

Question

React electron on windows, if A is null, call A.test will make the application stop working, then the user has to close the application and restart it. How to let react ignore the error, and continue work. The code has many A.test, I can't write everywhere if(A) A.test. If this can't be resolved, can I print the error on the web view? So I don't have to remote visit the user's computer to see the console error.

Answer 1

NOTE

I think the solution is to use react error boundaries, as suggested in the console.

You already pointed out that you're using error boundaries, so after testing your scenarios in this fiddle I believe your implementation might be incorrect.

---

Given a similar implementation for ErrorBoundary in the docs:

class ErrorBoundary extends React.Component {
  state = { hasError: '' };
  render() {
    return this.state.hasError ? (
      <span>Oops! Something went wrong:<br />{this.state.hasError}</span>
    ) : this.props.children;
  }
}
ErrorBoundary.getDerivedStateFromError = (error) => ({ hasError: error.toString() });

This component will render the fallback when any of its children breaks.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI

It will look similar to:

<MyReactApp>
  <ErrorBoundary>
    <ChatContent />
  </ErrorBoundary>
</MyReactApp>

Now any error in ChatContent will be catch by ErrorBoundary giving you the opportunity to render the fallback like:

Oops! Something went wrong:
ReferenceError: test is not defined

Answer 2

The code has many A.test, I can't write every where if(A) A.test

But why? You can use some editor for multi file editing. So you can replace A.test() to safeTest(A) function.

export const safeTest = (Obj) => {
 if (Obj) {
  Obj.test();
 } else {
  // Any action you want
 }
}

Answer 3

It is hard to offer an answer to your question because I don't see your project codes, but if your react version is 16 you can use a special component lifecycle method that name is componentDidCatch.

Inside this method you will have these values:

componentDidCatch(error, info) {
  // Do something with error and info
}

Even you can use setState inside this method and show you want. I think this method can help you for your second desire, the printing error in web view.

Answer 4

I tend to favor using default props. You can set a value for the component to assign to a prop if the prop is passed in undefined. For example, if your component depends on an array nested within an object, you could set that value as an empty array by default. This is especially handy when your component depends on an array of results from an API call, but the component renders before the request finishes.

Answer 5

If you want to make the minimal effort to catch all the unhandled errors from both main and renderer processes within Electron as well as showing them to the user via a dialog, the easy way is to use electron-unhandled which does exactly that:

After having installed it (npm i electron-unhandled), in both your main and renderer entry files (likely their root index.js), you just have to add, at the beginning:

const unhandled = require('electron-unhandled');

unhandled({ showDialog: true });

Now, that being said, it's a good practice to use a global error catcher but it's a really bad one if you use only that. You should try covering your error handling more accurately, at least method by method:

• .then() { ... }.catch(err => ...) for your promises,
• (..., (err, res) => { if (err !== null) { ... } ... ) for your callbacks,
• try { ... } catch(err) { ... } for non-async or await-based code code parts.

And, as a side-note, I myself created a dependenciless library to make it safe and easy to create a global errors dictionary in order to well-organize your errors but there are other alternatives if this one doesn't fit your needs.