Encountering Internal Server Error - How can I troubleshoot and resolve this issue in my web application?

Question

App.jsx:39 Error deleting restaurant. Server returned 500 INTERNAL SERVER ERROR

I am building a React application that uses the Flask backend API, when i try deleting from the front end it keeps telling me Internal Server Error, i have tried fixing the issue but it keeps persisting.This is how i have written the code for delete in my backend:

def delete(self, restaurant_id):
        restaurant = Restaurant.query.get(restaurant_id)
        if restaurant:
            db.session.delete(restaurant)
            db.session.commit()
            return '', 204
        else:
            abort(404, error='Restaurant not found')

api.add_resource(RestaurantResource, '/restaurants/<int:restaurant_id>')

And this is how the front end codes looks like:

const handleDeleteRestaurant = (restaurantId) => {
    // Delete the selected restaurant
    fetch(`http://127.0.0.1:5000/restaurants/${restaurantId}`, {
      method: 'DELETE',
    })
      .then(response => {
        if (response.ok) {
          // Refresh the list of restaurants after deletion
          fetch('http://127.0.0.1:5000/restaurants')
            .then(response => response.json())
            .then(data => setRestaurants(data))
            .catch(error => console.error('Error fetching restaurants after deletion:', error));
        } else {
          console.error(`Error deleting restaurant. Server returned ${response.status} ${response.statusText}`);
        }
      })
      .catch(error => console.error('Error deleting restaurant:', error));
  };