title: Error Boundary in React: why does 'throw new Error('some message')' fail and 'throw errorObj' work?
body: <p>I'm learning Error Boundaries in React.  I think I've got a good basic understanding but am having trouble implementing them for asynchronous processes, such as loading data.  </p>
  
  <p>Let's say I have a simple component that, using React hooks, loads some data from a remote API.   Since error boundaries won't work using asynchronous processes per se, instead of throwing an error in <code>catch</code>, this component stores the <code>error</code> in <code>state</code> and throws it on next re-render</p>
  
  <pre><code>// MovieDb.js
  import axios from "axios"
  import {useEffect,useState} from 'react'
  
  export default (query) =&gt; {
  
    const [movies, setMovies] = useState([])
    const [error,setError] = useState(null)
  
    if (error) throw error
  
    useEffect(() =&gt; {
      const getData = async () =&gt; {
        try {
          const results = await axios.get('https://api.themoviedb.org/3/search/movie', {
            params: {
              api_key: 'somethingsomething',
              query
            }
          })
          setMovies(results.data.results)
        } catch (e) {
         setError(e)
        }
      }
      getData()
    }, [query])
  
    return movies
  
  }
  </code></pre>
  
  <p>This component is used in my App:</p>
  
  <pre><code>// App.js
    function App() {
  
    const [query, setQuery] = useState('Lord of the Rings')
  
    const movies = MovieDb(query)
    return (
      &lt;div className="App"&gt;
        &lt;SearchInput onChange={e =&gt; setQuery(e.target.value)} defaultValue={query}/&gt;
        {movies &amp;&amp; movies.map(movie=&gt; &lt;div key={movie.id}&gt;{movie.title}&lt;/div&gt;) }
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>My Error Boundary is very simple:</p>
  
  <pre><code>//Catch.js
  import React, { Component } from 'react'
  
  export default class Catch extends Component {
    state = { hasError: false ,error:''}
  
    static getDerivedStateFromError(error) {
      return { hasError: true,error }
    }
  
    render() {
      if (this.state.hasError) {
  
        return &lt;h1&gt;{`There was a problem: ${this.state.error.message}`}&lt;/h1&gt;
      }
  
      return this.props.children
    }
  }
  </code></pre>
  
  <p>This <code>Catch</code> component then wraps the App:</p>
  
  <pre><code>// index.js
  ReactDOM.render(&lt;Catch&gt;&lt;App/&gt;&lt;/Catch&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>The Error Boundary seems to work when I throw an error inside <code>MovieDb</code>, such as when calling the API.  However, when I change</p>
  
  <pre><code> if (error) throw error
  </code></pre>
  
  <p>to </p>
  
  <pre><code> if (error) throw new Error('some message')
  </code></pre>
  
  <p>or</p>
  
  <pre><code> if (error) throw new Error(error.message)
  </code></pre>
  
  <p>the Error Boundary doesn't work and the app crashes.  Why is this?  I'm asking so that I can understand better <em>what</em> I'm doing, not just to make it work.  Thanks for any help!</p>