Next.js Failed to load static props (with react-query)

Question

I saw in sentry that many users experience the error "Failed to load static props" but I don't know why, if I try to go to the same url it always works for me, Also the for the users I can see in the replay that the page seems to load with all the server data ( product data and account manager ) but after a few seconds it crashes

This is my code:

export const getStaticProps: GetStaticProps = async ({ params, locale }) => {
  const queryClient = new QueryClient();
  try {
    if (!params?.machine_id || !params.machine_id.includes('_')) {
      return {
        notFound: true,
      };
    }
    const machineSku = params.machine_id
      ?.toString()
      .split('_')[1]
      .toString() as string;

    await queryClient.fetchQuery(
      ['product', machineSku, locale],
      () => getProductDetails(machineSku, locale),
      {
        retry: 8,
      }
    );

    const product: ProductItem | undefined = queryClient.getQueryData([
      'product',
      machineSku,
      locale,
    ]);

    if (!product) {
      return {
        notFound: true,
      };
    }

    await queryClient.fetchQuery(
      ['account_manager', product.website_account_manager.email],
      () => {
        try {
          return getAccountManager(product.website_account_manager.email);
        } catch (error) {
          // TODO: account manager request cache GP-4765
          const am = accountManagers.find(
            (am) => am.email === product.website_account_manager.email
          );
          if (am) {
            return am;
          }
          throw new Error('Account manager not found in API neither in JSON');
        }
      },
      {
        retry: 8,
      }
    );

    return {
      props: {
        email: product.website_account_manager.email,
        dehydratedState: dehydrate(queryClient),
      },
      revalidate: 120,
      notFound: !product,
    };
  } catch (error) {
    console.error(error);
    // send error to sentry
    captureException(error);
    return {
      props: {
        email: null,
      },
      revalidate: 120,
    };
  }
};


export function getProductDetails(sku: string, locale = 'en-US') {
  const host = getApiFromLocal(locale);
  return axios
    .get(host + '/api/product/' + encodeURIComponent(sku))
    .then((res) => {
      const apiData: ApiProductResponse = res.data;
      if (apiData.status === 'error') {
        throw new Error('api res.data.status', res.data.status);
      }
      return apiData.data as ProductItem;
    });
}

export async function getAccountManager(
  email: string
): Promise<IProductAccountManager | null> {
  if (!email) {
    throw new Error('Fetch account manager needs an email');
  }
  return await axios
    .get(process.env.NEXT_PUBLIC_CRM_API_URL + 'account-manager/', {
      params: {
        am_email: email,
      },
    })
    .then((res) => {
      const account_manager_response = res.data[0];
      if (account_manager_response) {
        return account_manager_response;
      }
      throw new Error('No account manager found for this email');
    });
}

In sentry I can also see that some request failed with 404, example: "/_next/data/ZFuJ1yjROF2s2pfC9arlx/es-ES/producto/haitian-jupiter-ii-plus_DE-INJ-HAI-2018-00001.json?machine_id=haitian-jupiter-ii-plus_DE-INJ-HAI-2018-00001"

I tried adding the retry flag on the server side fetch, adding the try catch to not return the product and allow the front end to fetch it etc but nothing seems to work and I still have more alerts in Sentry, any ideas ?

Next.js Failed to load static props (with react-query)

0 Answers0