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.

Let's say I have a simple ponent 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 catch, this ponent stores the error in state and throws it on next re-render

// MovieDb.js
import axios from "axios"
import {useEffect,useState} from 'react'

export default (query) => {

  const [movies, setMovies] = useState([])
  const [error,setError] = useState(null)

  if (error) throw error

  useEffect(() => {
    const getData = async () => {
      try {
        const results = await axios.get('', {
          params: {
            api_key: 'somethingsomething',
            query
          }
        })
        setMovies(results.data.results)
      } catch (e) {
       setError(e)
      }
    }
    getData()
  }, [query])

  return movies

}

This ponent is used in my App:

// App.js
  function App() {

  const [query, setQuery] = useState('Lord of the Rings')

  const movies = MovieDb(query)
  return (
    <div className="App">
      <SearchInput onChange={e => setQuery(e.target.value)} defaultValue={query}/>
      {movies && movies.map(movie=> <div key={movie.id}>{movie.title}</div>) }
    </div>
  );
}

export default App;

My Error Boundary is very simple:

//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 <h1>{`There was a problem: ${this.state.error.message}`}</h1>
    }

    return this.props.children
  }
}

This Catch ponent then wraps the App:

// index.js
ReactDOM.render(<Catch><App/></Catch>, document.getElementById('root'));

The Error Boundary seems to work when I throw an error inside MovieDb, such as when calling the API. However, when I change

 if (error) throw error

to

 if (error) throw new Error('some message')

or

 if (error) throw new Error(error.message)

the Error Boundary doesn't work and the app crashes. Why is this? I'm asking so that I can understand better what I'm doing, not just to make it work. Thanks for any help!

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.

Let's say I have a simple ponent 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 catch, this ponent stores the error in state and throws it on next re-render

// MovieDb.js
import axios from "axios"
import {useEffect,useState} from 'react'

export default (query) => {

  const [movies, setMovies] = useState([])
  const [error,setError] = useState(null)

  if (error) throw error

  useEffect(() => {
    const getData = async () => {
      try {
        const results = await axios.get('https://api.themoviedb/3/search/movie', {
          params: {
            api_key: 'somethingsomething',
            query
          }
        })
        setMovies(results.data.results)
      } catch (e) {
       setError(e)
      }
    }
    getData()
  }, [query])

  return movies

}

This ponent is used in my App:

// App.js
  function App() {

  const [query, setQuery] = useState('Lord of the Rings')

  const movies = MovieDb(query)
  return (
    <div className="App">
      <SearchInput onChange={e => setQuery(e.target.value)} defaultValue={query}/>
      {movies && movies.map(movie=> <div key={movie.id}>{movie.title}</div>) }
    </div>
  );
}

export default App;

My Error Boundary is very simple:

//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 <h1>{`There was a problem: ${this.state.error.message}`}</h1>
    }

    return this.props.children
  }
}

This Catch ponent then wraps the App:

// index.js
ReactDOM.render(<Catch><App/></Catch>, document.getElementById('root'));

The Error Boundary seems to work when I throw an error inside MovieDb, such as when calling the API. However, when I change

 if (error) throw error

to

 if (error) throw new Error('some message')

or

 if (error) throw new Error(error.message)

the Error Boundary doesn't work and the app crashes. Why is this? I'm asking so that I can understand better what I'm doing, not just to make it work. Thanks for any help!

• javascript
• reactjs
• error-handling
• react-hooks

• 1 Does it make any difference if you do throw Error('some message') ? Just curious – Vencovsky Commented Jul 30, 2019 at 15:19
• 2 @Vencovsky It should work the same as with or without new, it's the same according to MDN - developer.mozilla/en-US/docs/Web/JavaScript/Reference/… – dance2die Commented Jul 30, 2019 at 15:41
• 2 I get the consistent "working" result with Error Boundaries (codesandbox.io/s/soanswer57274551-2lkov) with both throw error/throw new Error. Would you be able to post a runnable sample? – dance2die Commented Jul 30, 2019 at 16:04
• @Sung M. Kim -- I didn't think it made a difference. As to posting a working example: I'm not sure how tricky is it to post a React app to JSFiddle or the like? That is, I'm running it in the development environment from 'create-react-app' at the moment, so there are a lot of under-the-hood dependencies. – Cerulean Commented Jul 30, 2019 at 17:59
• @Cerulean create-react-app does a lot of magic and not easy to pull it off with embedded jsfiddle (even though you can post some working React samples. The better bet would be forking my sandbox (which is bootstrapped with create-react-app). – dance2die Commented Jul 30, 2019 at 18:16

1 Answer 1

This is an artifact of the dev environment. You can see your actual UI by hitting "escape" or the "X" to dismiss the stack trace. This won't show up in production. I believe the react dev code looks at where the Exception was thrown and if it's in your code then you see the UI.

See: React still showing errors after catching with ErrorBoundary