Fetcher calls only after variable delay, but only on prod builds in a Next.js application

[kylemh]

I've never seen an error this weird, and have no idea how to get around it.

I've got the following hook:

import useSWR from 'swr';
import { Account as AccountAPI } from '@air/api';
import { Account as TAccount } from '@air/api/types';
import { ACCOUNT } from '@constants/swrKeys';

export const useAccount = () => {
  const { data: account, error, mutate } = useSWR<TAccount | null>(ACCOUNT, AccountAPI.get);

  return {
    account,
    error,
    isLoading: !account && !error,
    key: ACCOUNT,
    mutateAccount: mutate,
  };
};

Used in a page file like so:

export default function SomePage() {
  const { account } = useAccount();
  return <></>
}

The fetch under the hood of AccountAPI.get() doesn't actually fire until 5-10s after the page loads. I have other fetches that aren't within SWR hooks that are evaluating instantly. I also did the following and the promise evaluated instantly as-expected.

export default function SomePage() {
  const [account, setAccount] = useState<TAccount | null>(null);

  useEffect(() => {
    AccountAPI.get().then(_account => setAccount(_account));
  }, []);

  return <></>
}

---

What makes this even more baffling is that the SWR hook is evaluating instantly when using the dev server, but not when leveraging prod.

Running a prod build locally (see 5s delay)

Running with dev server (no delay)

[shuding]

This is indeed very weird, is it possible to create a minimal reproduction on https://codesandbox.io (it's not a production build, though)? I cannot reproduce this locally. Can you confirm that the useAccount() call isn't delayed?

Also which SWR version was it? If you are on the latest, swr@beta might worth a try since there is no breaking changes.

[kylemh]

I was using 0.4.2, and got very hopeful and upgrade would solve my issue, but updated to latest and still saw the issue.

I confirmed at least with logging statements that the function containing the useSWR reference is being called immediately.

I can try to create a reproduction.

[kylemh]

Debugging a bit further before I try to create a reproduction (cuz it'll be a bit of working finding an open API and putting it together)...

I tried using onErrorRetry: (error) => { console.error({ error }); } within the useSWR's options wondering i maybe some error was getting swallowed. I end up seeing a log statement that says { error: undefined }... If the error is undefined, why is onErrorRetry being called?

Also, why would there be no related network call for this fail?

[huozhi]

Does your fetcher having cases that throw undefined as error? I'm suspecting that's where might trigger the try-catch capture it.

[kylemh]

Nope 😞

The errors go straight into SWR, react-dom, bugsnag, next.js internals, and then webpack

[kylemh]

There is indeed an uncaught error within my fetcher 🤦🏽‍♂️