metropolitan-bronze

useErrorBoundary is not being caught by ErrorBoundary

I've got a useGetCourse hook like so

const useGetCourses = () => {
  const getCourses = async (): Promise<Page> => {
    const response = await axiosClient.get(
      "/api/v2/pages/?type=courses.CoursePage&fields=*"
    );
    return PageSchema.parse(response.data);
  };

  const result = useQuery({
    queryKey: ["courses"],
    queryFn: getCourses,
    useErrorBoundary: true,
  });

  return { ...result, ...{ courses: result.data?.items } }

}

export default useGetCourses

const useGetCourses = () => {
  const getCourses = async (): Promise<Page> => {
    const response = await axiosClient.get(
      "/api/v2/pages/?type=courses.CoursePage&fields=*"
    );
    return PageSchema.parse(response.data);
  };

  const result = useQuery({
    queryKey: ["courses"],
    queryFn: getCourses,
    useErrorBoundary: true,
  });

  return { ...result, ...{ courses: result.data?.items } }

}

export default useGetCourses

And it's being used in PortfolioOne like this PortfolioOne.tsx

const PortfolioOne = ({ column }) => {
  const { courses, isLoading } = useGetCourses();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <>
        {courses?.map((item) => (
          <div key={item.id} className={column}>
            <PortfolioItem course={item} />
          </div>
        ))}
    </>
  );
};

const PortfolioOne = ({ column }) => {
  const { courses, isLoading } = useGetCourses();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <>
        {courses?.map((item) => (
          <div key={item.id} className={column}>
            <PortfolioItem course={item} />
          </div>
        ))}
    </>
  );
};

Home.tsx

<ErrorBoundary FallbackComponent={FallBackComponent}>
              <PortfolioOne column="col-lg-4 col-md-6 col-12 mt--30 portfolio" />
            </ErrorBoundary>

<ErrorBoundary FallbackComponent={FallBackComponent}>
              <PortfolioOne column="col-lg-4 col-md-6 col-12 mt--30 portfolio" />
            </ErrorBoundary>

The problem is that the error thrown by useErrorBoundary seems to both be caught and not be caught? Like the UI of the FallbackComponent shows up, but also I get the dev error screen of unhandled network request. Why is this? And how can I make the errors always bubble up to the ErrorBoundary?

3 Replies

afraid-scarlet•3y ago

is this in dev or prod? could just be a dev overlay that shows up even if caught by boundaries

metropolitan-bronzeOP•3y ago

Its in dev

afraid-scarlet•3y ago

Then that is what the framework you're using is doing with thrown errors Would behave the same with other errors

Gaming

Programming

useErrorBoundary is not being caught by ErrorBoundary

Did you find this page helpful?