Error Boundary does not catch errors of the resource
Hello, I have a resource created and access it inside a suspense inside an error boundary, but if the resource throws an error, e.g. no network, then the error boundary does not catch this and the suspense fallback gets displayed. Why?
<ErrorBoundary fallback={ErrorFallback}>
<Suspense
fallback={
<For each={Array(4).fill(0)}>
{(_, index) => (
<div class={index() == 0 ? "" : "mt-4"}>
<PetSkeleton></PetSkeleton>
</div>
)}
</For>
}
>
<For
each={
families()?.find(
(family) => family.id == selectedFamily()
)?.pets
}
><ErrorBoundary fallback={ErrorFallback}>
<Suspense
fallback={
<For each={Array(4).fill(0)}>
{(_, index) => (
<div class={index() == 0 ? "" : "mt-4"}>
<PetSkeleton></PetSkeleton>
</div>
)}
</For>
}
>
<For
each={
families()?.find(
(family) => family.id == selectedFamily()
)?.pets
}
>const [families, { mutate: mutateFamilies }] = createResource(fetchFamilies);const [families, { mutate: mutateFamilies }] = createResource(fetchFamilies);export const fetchFamilies = async () => {
const response: Family[] = await sendApiRequest(
"/api/families",
"GET",
false
);
return response.sort((a, b) => a.name.localeCompare(b.name));
};export const fetchFamilies = async () => {
const response: Family[] = await sendApiRequest(
"/api/families",
"GET",
false
);
return response.sort((a, b) => a.name.localeCompare(b.name));
};
