CODEWITHSUNDEEP
reactjs
stateless
stateless

Reputation: 246

ReactJS ErrorBoundary Not Catching Undefined Variable

I tried the new ErrorBoundary functionality of ReactJS 16. I am trying to use it to catch undefined variables which rendering of certain components. This was causing my whole app to behave strangely. I am trying to encapsulate side effects of undefined variables so that components break down gracefully. I have the ErrorBoundary component defined here like this-

import React, { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, info) {
    // Display fallback UI
    this.setState({ hasError: true });
    // You can also log the error to an error reporting service
  }

  render() {
    if (this.state.hasError) {
      return <div></div>;
    }else{
      return <div>{this.props.children}</div>;
    }
  }
}

export default ErrorBoundary;

I have the ErrorBoundary imported correctly. It is sitting in my container component's render function and wrapping a child component like this:

<ErrorBoundary>
  <MyComponent
    data={data}
    showData={this.state.showData}
    toggle={this.toggle}/>
</ErrorBoundary>

In order to test the broken app functionality I put in an undefined variable into the render function

<ErrorBoundary>
  {brokenVar}
</ErrorBoundary>

And when the component with the ErrorBoundary and included undefined variable gets rendered, this happens in the browser. The rest of my app stops working correctly.

Uncaught ReferenceError: brokenVar is not defined
    at WrappedComponent.render (main.bundle.ae5f4b25250d970680ca.js:sourcemap:52285)
    at WrappedComponent.render (main.bundle.ae5f4b25250d970680ca.js:sourcemap:44248)
    at main.bundle.ae5f4b25250d970680ca.js:sourcemap:32355
    at measureLifeCyclePerf (main.bundle.ae5f4b25250d970680ca.js:sourcemap:31635)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32354)
    at ReactCompositeComponentWrapper._renderValidatedComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32381)
    at ReactCompositeComponentWrapper._updateRenderedComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32305)
    at ReactCompositeComponentWrapper._performComponentUpdate (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32283)
    at ReactCompositeComponentWrapper.updateComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32204)
    at ReactCompositeComponentWrapper.receiveComponent (main.bundle.ae5f4b25250d970680ca.js:sourcemap:32106)

Do I have a syntax error or is this not how ErrorBoundaries are supposed to behave?

Upvotes: 4

Views: 2822

Answers (1)

palsrealm
palsrealm

Reputation: 5243

An undefined variable is a compile time error, which would be shown when the application is compiled.

As per the React blog

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

So the error boundary will catch runtime errors, which cannot be handled during compile time. Try throwing an error, like they do in the example provided in the blog, to test your ErrorBoundary component.

Upvotes: 5

Related Questions