loadable utils should console.error when hasError

[leobastiani]

I think we could add an onError in loadable to console.error when there're errors. I could also implement this change. Something like

export function loadable<Value>(anAtom: Atom<Value>, { onError = console.error }: { onError?: (err: unknown) => void } = {}): Atom<Loadable<Value>> {

then, in all catches:

} catch (error) {
  onError?.(error)
  return { state: 'hasError', error } as Loadable<Value>
}

What do you think?

[dai-shi]

It doesn't feel like the scope of Jotai core or its utils.

Maybe you would like to describe your use case and we can explore existing libs or come up with a new lib idea.

[leobastiani]

unwrap doesn't fit my case. I'm actually creating a synchronous atom that composes three asynchronous atoms. For example:

const syncAtom = atom((get) => {
  const async1 = get(loadable(atom1));
  const async2 = get(loadable(atom2));
  const async3 = get(loadable(atom3));
  return // ... combine or transform the states as needed
})

I can't simply call console.error within the sync atom logic, as it would result in multiple error logs during each re-render but I'm also consuming them at this moment, which I think should be the moment to console.error

[dai-shi]

Was thinking about something like this:

const syncAtom = atom((get) => {
  try {
    const async1 = get(unwrap(atom1));
    const async2 = get(unwrap(atom2));
    const async3 = get(unwrap(atom3));
    return // ... combine or transform the states as needed
  } catch (e) {
    // ... error handling
  }
})

[leobastiani]

Thanks for the suggestion, but unfortunately it won't work here 😢
What I want is to actually give hasError a behavior, however, when an error occurs, it is interesting that it is logged. The great point of loadable receiving an onError parameter is that it will only be logged once.
For example:

const myAtom = atom(async () => {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
  // this error should be console.error
  throw new Error("An error occurred");
  return 10;
});

function MyComponent() {
  const myValue = useAtomValue(loadable(myAtom));
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  // even though I wrapped it in a useEffect, rerendering `MyComponent` will console.error the error multiple times
  useEffect(() => {
    if (myValue.state === "hasError") {
      console.error(myValue.error);
    }
  }, [myValue]);

  return (
    <div>
      Count: {count}
      {myValue.state === "hasData" && <>, myValue: {myValue}</>}
    </div>
  );
}

I think the console.error of this atom must happen somewhere when using loadable. What do you think?

[dai-shi]

What do you think?

In general, I think atom is declarative pure model and console.error is a side effect. So, I wouldn't add side effect in atom model.

import { ErrorBoundary } from "react-error-boundary";

const myAtom = atom(async () => {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000);
  });
  // this error should be console.error
  throw new Error("An error occurred");
  return 10;
});

function MyInnerComponent() {
  const myValue = useAtomValue(myAtom);
  return <>, myValue: {myValue}</>
}

function onError(err) {
  console.error(err);
}

function MyComponent() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      Count: {count}
      <ErrorBoundary onError={onError}>
        <Suspense>
          <MyInnerComponent />
        </Suspense>
      </ErrorBoundary
    </div>
  );
}

[leobastiani]

I wouldn't add side effect in atom model.

That's a great point!

But I see that your example doesn't use loadable, which is essential for me 😢

But thanks for the suggestions and your attention ❤️