React.js Error: Consider adding an error boundary to your tree to customize error handling behavior

Viewed 40

Trying to build a simple candy crush web app and changing the state of the app component crashes the app.

The error message says :

react-dom.development.js:18687 The above error occurred in the <App> component:

    at App (http://localhost:3000/static/js/bundle.js:45:76)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

It doesn't give any details about the error but just leaves me with this message.

The function responsible for this is :

const dragEndHandler = () => {
    let tempBoard = [...board]
    let foo = tempBoard[squareBeingDragged]
    tempBoard[squareBeingDragged] = tempBoard[squareBeingReplaced]
    tempBoard[squareBeingReplaced] = foo
    if (true) {//add valid move logic
      setBoard(tempBoard) //removing this fixes it
    }
  }

as the comment suggests, removing setBoard(tempBoard) fixes the issue but I'm not sure why this happens.

I have used a similar approach in my row/column checker and that seems to work, it looks something like :

const checkRowMatch = () => {
    let tempScore = 0, tempBoard = [...board]
    ...
    setBoard(tempBoard)
}

I've also attempted putting this in a try catch

0 Answers
Related