AK0071

createResource() fetcher threw an error

What happened

The fetcher function passed to createResource() threw an error or returned a rejected promise. The resource is now in an error state.

How to fix

Add error handling in your fetcher function, and check resource.error() in your component to display a fallback UI.

Example

// Bad — fetcher can throw, no error handling in UI
const [users] = createResource(() =>
  fetch("/api/users").then((r) => r.json())
);

const App = defineComponent(() => {
  return () => h("ul", {}, users().map((u) => h("li", {}, u.name)));
});

// Good — handle errors in the fetcher and UI
const [users, { error }] = createResource(async () => {
  const res = await fetch("/api/users");
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
});

const App = defineComponent(() => {
  return () => {
    if (error()) return h("p", {}, `Error: ${error().message}`);
    if (!users()) return h("p", {}, "Loading...");
    return h("ul", {}, users().map((u) => h("li", {}, u.name)));
  };
});