Got Internal Server Error on Change a little bit

Question

The problem is that whenever I change anything or update it even its CSS, I get an error of

ProductDetailStatic.js:17 Uncaught (in promise)

1. AxiosError {message: 'Request failed with status code 500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …} fetchProduct

and

productAction.js:31
GET http://localhost:3000/api/products/65f93c8… 500 (Internal Server Error)

dispatchXhrRequest @ xhr.js:258 xhr @ xhr.js:49 dispatchRequest @ dispatchRequest.js:51 _request @ Axios.js:170 request @ Axios.js:40 Axios. @ Axios.js:196 wrap @ bind.js:5 (anonymous) @ productAction.js:31 (anonymous) @ redux-thunk.mjs:5 dispatch @ VM28833:6 (anonymous) @ ProductDetail.js:40 commitHookEffectListMount @ react-dom.development.js:23150 commitPassiveMountOnFiber @ react-dom.development.js:24926 commitPassiveMountEffects_complete @ react-dom.development.js:24891 commitPassiveMountEffects_begin @ react-dom.development.js:24878 commitPassiveMountEffects @ react-dom.development.js:24866 flushPassiveEffectsImpl @ react-dom.development.js:27039 flushPassiveEffects @ react-dom.development.js:26984 commitRootImpl @ react-dom.development.js:26935 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 flushSync @ react-dom.development.js:26201 scheduleRefresh @ react-dom.development.js:27795 (anonymous) @ react-refresh-runtime.development.js:304 performReactRefresh @ react-refresh-runtime.development.js:293 (anonymous) @ RefreshUtils.js:100 setTimeout (async)
enqueueUpdate @ RefreshUtils.js:98 executeRuntime @ RefreshUtils.js:259 $ReactRefreshModuleRuntime$ @ ProductDetail.js:258 ./src/components/pages/User/productDetailPage/ProductDetail.js @ ProductDetail.js:258 options.factory @ react refresh:6 webpack_require @ bootstrap:22 _requireSelf @ hot module replacement:101 apply @ jsonp chunk loading:407 (anonymous) @ hot module replacement:342 internalApply @ hot module replacement:340 (anonymous) @ hot module replacement:277 waitForBlockingPromises @ hot module replacement:232 (anonymous) @ hot module replacement:275 Promise.then (async)
(anonymous) @ hot module replacement:274 Promise.then (async)
(anonymous) @ hot module replacement:255 Promise.then (async

And on Network Response, I get:

Proxy error: Could not proxy request /api/products/65f93c8a4a6c7dea80798681 from localhost:3000 to http://127.0.0.1:5001 (ECONNREFUSED).

After refresh, the error goes away and everything works fine. Sometime it gives error of image :undefined and after refresh it also goes away

DetailPage component is

import React, { useEffect, useLayoutEffect, useState } from "react";
import ProductCards from "../../../utils/Cards/ProductCards";
import ProductDetail from "./ProductDetail";
import { useParams } from "react-router-dom";
import axios from "axios";
import { useSelector } from "react-redux";

const ProductDetailStatic = () => {
  const productCreateReview = useSelector((state) => state.productCreateReview);
  const { success: successReview } = productCreateReview;

  const { id } = useParams();

  const fetchProducts = async () => {
    const { data } = await axios.get(`/api/products`);
    setProducts(data);
  };

  useEffect(() => {
    fetchProducts();
  }, [id, successReview]);

  const [products, setProducts] = useState([]);
  // const fetchProducts = async () => {
  //   const { data } = await axios.get(`/api/products`);
  //   setProducts(data);
  // };

  return (
    <>
      <ProductDetail id={id} />
      <div className="flex flex-col gap-14 mx-4">
        <div>
          <h1 className="text-2xl font-bold text-center">
            You might also Like This
          </h1>
        </div>
        <div className="flex flex-row gap-3">
          {[...products]
            .sort(() => 0.5 - Math.random())
            .slice(0, 2)
            .map((products) => (
              <div key={products._id}>
                <ProductCards products={products} />
              </div>
            ))}
        </div>
      </div>
    </>
  );
};

export default ProductDetailStatic;

import React, { useEffect, useState } from "react";
import Rating from "../../../utils/Rating";
import { useDispatch, useSelector } from "react-redux";
import {
  createReviewProduct,
  detailProduct,
} from "../../../../redux/action/productAction";
import { ColorRing } from "react-loader-spinner";
import { Link, useNavigate } from "react-router-dom";
import { actionTypes } from "../../../../redux/action/action-types";

const ProductDetail = ({ id }) => {
  const productDetail = useSelector((state) => state.productDetail);
  const { loading, error, product } = productDetail;

  const productCreateReview = useSelector((state) => state.productCreateReview);
  const {
    loading: loadingReview,
    error: errorReview,
    success: successReview,
  } = productCreateReview;

  const userLogin = useSelector((state) => state.userLogin);
  const { userInfo } = userLogin;

  const [qty, setQty] = useState(1);
  const [rating, setRating] = useState(0);
  const [comment, setComment] = useState("");

  const navigate = useNavigate();
  const dispatch = useDispatch();

  useEffect(() => {
    if (successReview) {
      alert("Review Submitted");
      setRating(0);
      setComment("");
      dispatch({ type: actionTypes.PRODUCT_CREATE_REVIEW_RESET });
    }
    dispatch(detailProduct(id));
  }, [dispatch, id, successReview]);
  console.log(product);

  const decrementHandler = () => {
    setQty(qty - 1);
  };

  const incrementHandler = () => {
    setQty(qty + 1);
  };

  const addToCartHandler = () => {
    navigate(`/cart/${id}?qty=${qty}`);
  };

  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(
      createReviewProduct(id, {
        rating,
        comment,
      })
    );
  };

  return (
    <div className="mx-4">
      {loading ? (
        <div className="items-center flex justify-center">
          <ColorRing
            visible={true}
            height="80"
            width="80"
            ariaLabel="color-ring-loading"
            wrapperStyle={{}}
            wrapperClass="color-ring-wrapper"
            colors={["#e15b64", "#f47e60", "#f8b26a", "#abbd81", "#849b87"]}
          />
        </div>
      ) : (
        <>
          <div className=" flex flex-col gap-9">
            <div>
              <img
                src={product.image}
                alt={product.name}
                className="rounded-[20px]"
              />
            </div>
            <div className="flex flex-col gap-4">
              <h1 className="text-2xl font-bold">{product.name}</h1>
              <div className="flex flex-col gap-2">
                <div className="flex flex-row gap-1 items-center">
                  <div>
                    <Rating value={product.rating} />
                  </div>
                  <div>
                    <p className="text-[12px] font-normal">
                      {product.rating}/5
                    </p>
                  </div>
                </div>
                <div>
                  <p className="text-2xl font-bold">${product.price}</p>
                </div>
              </div>
              <div>
                <p className="text-sm font-normal text-black/[60%] mr-3">
                  {product.description}
                </p>
              </div>
            </div>
          </div>
          <hr className="border-[1px] my-6" />
          <div>
            <div className="flex flex-row gap-2 items-center">
              <div className="flex flex-row justify-evenly bg-[#F0F0F0] rounded-full py-3 px-4 w-full basis-2/5">
                <span className="text-xl font-bold">
                  <button onClick={decrementHandler} disabled={qty === 0}>
                    -
                  </button>
                </span>
                <span className="text-xl font-bold">{qty}</span>
                <span className="text-xl font-bold">
                  <button
                    onClick={incrementHandler}
                    disabled={qty >= product.countInStock}
                  >
                    +
                  </button>
                </span>
              </div>
              <div className="w-full basis-9/12 py-3 bg-black rounded-full text-center">
                <button
                  className="text-white text-base"
                  disabled={product.countInStock === 0}
                  onClick={addToCartHandler}
                >
                  Add to Cart
                </button>
              </div>
            </div>
          </div>
          <hr className="border-[1px] my-6" />
          <div className="flex flex-col gap-5">
            <div>
              <h1 className="text-lg font-semibold">
                All Reviews{" "}
                <span className="text-slate-400 text-sm">
                  ({product.numReviews})
                </span>
              </h1>
            </div>
            <div>
              {product.review.length === 0 && (
                <h1 className="py-2 px-3 text-normal font-semibold bg-blue-200 text-blue-300">
                  No Reviews
                </h1>
              )}
              <div className="flex flex-col gap-3 my-2 w-full">
                <h1 className="text-base text-black font-semibold">
                  Write a Customer Review
                </h1>
                {errorReview && (
                  <h1 className="px-2 py-1 bg-red-300 text-red-500 text-sm w-full">
                    {errorReview}
                  </h1>
                )}
                {product.review.user === userInfo._id &&
                  alert("Already Reviewed")}
                {!userInfo && (
                  <h1 className="text-sm text-slate-400">
                    Please <Link to="/login">Login</Link> to write a review
                  </h1>
                )}
                <form onSubmit={submitHandler} className="flex flex-col gap-2">
                  <div className="flex flex-row gap-2 items-center">
                    <label className="text-sm font-semibold">Rating: </label>
                    <select
                      value={rating}
                      onChange={(e) => setRating(e.target.value)}
                      className=" px-2 py-1 text-sm  border-[1px] bolder-black/5 "
                    >
                      <option value="">Select</option>
                      <option value="1">&#9733;</option>
                      <option value="2">&#9733;&#9733;</option>
                      <option value="3">&#9733;&#9733;&#9733;</option>
                      <option value="4">&#9733;&#9733;&#9733;&#9733;</option>
                      <option value="5">
                        &#9733;&#9733;&#9733;&#9733;&#9733;
                      </option>
                    </select>
                  </div>
                  <div className="flex flex-col gap-2 w-full">
                    <label className="text-sm font-semibold">
                      Write Comment
                    </label>
                    <textarea
                      value={comment}
                      onChange={(e) => setComment(e.target.value)}
                      className="border-[1px] border-black/5 px-1 py-1"
                    ></textarea>
                  </div>
                  {loadingReview ? (
                    <button
                      disabled
                      className="px-4 py-3 bg-black text-white self-start rounded-[62px]"
                    >
                      {" "}
                      <i
                        className="fa-solid fa-circle-notch fa-spin"
                        style={{ fontSize: "18px", marginRight: "8px" }}
                      ></i>{" "}
                      Comment
                    </button>
                  ) : (
                    <button
                      type="submit"
                      className="px-4 py-3 bg-black text-white self-start rounded-[62px]"
                    >
                      {" "}
                      Comment
                    </button>
                  )}
                </form>
              </div>

              {product.review.map((review) => (
                <div
                  key={review._id}
                  className="rounded-[20px] border-[1px] border-black/5 my-3"
                >
                  <div className="p-6 flex flex-col gap-3">
                    <div>
                      <Rating value={review.rating} />
                    </div>
                    <div className="flex flex-col gap-2">
                      <h1 className="text-base font-semibold">{review.name}</h1>
                      <p className="text-sm text-slate-600">
                        "{review.comment}"
                      </p>
                      <p className="text-sm text-slate-600 font-semibold my-2">
                        Posted on {review.createdAt.substring(0, 10)}
                      </p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <hr className="border-[1px] my-6" />
        </>
      )}
    </div>
  );
};

export default ProductDetail;

ProductAction is

export const detailProduct = (id) => async (dispatch) => {
  try {
    dispatch({
      type: actionTypes.PRODUCT_DETAIL_REQUEST,
    });

    const { data } = await axios.get(`/api/products/${id}`);

    dispatch({
      type: actionTypes.PRODUCT_DETAIL_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: actionTypes.PRODUCT_DETAIL_FAIL,
      payload: error,
    });
  }
};

controller is

const getProductById = asyncHandler(async (req, res) => {
  const product = await Product.findById(req.params.id);
  console.log(product);
  if (product) {
    res.send(product);
  } else {
    res.status(400).json({ message: "Error Product not found" });
  }
});

Give me some advise Thanks