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"

Which seems to be the server side g

I tried adding the refetch, 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