Issue with error boundaries and custom error types

[bllfrnch]

I think I may have found a bug in React.

I've defined a custom error type in a React application, which I'm throwing. I have an error boundary defined at the top of my application's component tree whose purpose is to catch uncaught errors and display an error page. The error boundary is catching the custom error, but isn't able to distinguish it from an error of type Error. Put simply, custom error types, created with the following syntax:

class CustomError extends Error {}

... are, from the error boundary's perspective, simply errors of type Error, not CustomError. Further illustration – even though I'm explicitly throwing a CustomError, the error boundary's componentDidCatch method thinks its error argument is of type Error.

componentDidCatch(error, info) {
  console.log(error instanceof Error); // true
  console.log(error instanceof CustomError); // false
  this.setState({
    hasError: true,
    error
  });
}

Am I crazy or is this a bug in React?

This issue is reproduced here: https://codepen.io/heywilly/pen/wyrKjz – the code is all documented, butin a nutshell, I've implemented an Application component that wraps its contents in an error boundary. A custom error is thrown from a subcomponent, and the custom typing gets lost somewhere along the way. That is, from the error boundary's perspective, the error that's thrown is of type Error, not the custom type defined in the application.

Also on StackOverflow: https://stackoverflow.com/questions/48777152/how-do-i-work-with-custom-error-types-in-react-error-boundaries/48792418

The expected behavior is that custom error types would be preserved as they crossed error boundaries.

Tested in React/ReactDOM 16.2.0, in Chrome 63.0.3239.132, MacOS 10.12.6.

[aweary]

Hey @bllfrnch, I copied your example into a JSFiddle and am unable to reproduce the issue. My guess is that codepen is compiling classes in a way that does not support instanceof. loganfsmyth/babel-plugin-transform-builtin-extend#14 has some context around this kind of issue. I hope that helps!