Try catch not catching await error

Hi. I am doing the “Mastering React” course and I am on the “Calling Backend Services” section, lecture 25. My issue is that the try catch block isn’t catching the 404 error when I try to delete a movie that doesn’t exist from the database. Instead it shows up as an error in the console. Here’s my code:

// movieServices.js
export function deleteMovieDB(movieId) {
// movies.jsx
handleDelete = async (movie) => {
    const originalMovies = [...this.state.movies]
    const movies = originalMovies.filter(m => m._id !== movie._id);
    this.setState({ movies });

    try {
      await deleteMovieDB(movie._id)

    catch(ex) {
      // This doesn't seem to actually catch the error
      if (ex.response && ex.response.status === 404)
        toast.error("This movie has already been deleted")


What’s the error you are seeing in the console?

I’ve met this bug before. Just simply return the delete method from the function and you will successfully fix it.

export function deleteMovieDB(movieId) {
    return http.delete(`${config.apiEndpoint}/movies/${movieId}`)