Shopify Functions "Failed to Fetch via useAuthenticatedFetch"

Shopify Apps
1

I was testing my Shopify Functions app and suddenly today the useAuthenticatedFetch hook is not working

TypeError: Failed to fetch
    at 6656-121-240-3-162.ngrok-free.app/node_modules/.vite/deps/@shopify_app-bridge-utils.js?v=6a575326:564:28

This was working fine a week ago.

This function is invoked whenever the Shopify Functions are created or updated.

After logging a lot, i found out that the function below is not getting any response and hence fails with a 524 error code.

import { authenticatedFetch } from "@shopify/app-bridge-utils";
import { useAppBridge } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";

/**
 * A hook that returns an auth-aware fetch function.
 * @desc The returned fetch function that matches the browser's fetch API
 * See: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
 * It will provide the following functionality:
 *
 * 1. Add a `X-Shopify-Access-Token` header to the request.
 * 2. Check response for `X-Shopify-API-Request-Failure-Reauthorize` header.
 * 3. Redirect the user to the reauthorization URL if the header is present.
 *
 * @returns {Function} fetch function
 */
export function useAuthenticatedFetch() {
  const app = useAppBridge();
  const fetchFunction = authenticatedFetch(app);

  return async (uri, options) => {
    const response = await fetchFunction(uri, options);
    checkHeadersForReauthorization(response.headers, app);
    return response;
  };
}

function checkHeadersForReauthorization(headers, app) {
  if (headers.get("X-Shopify-API-Request-Failure-Reauthorize") === "1") {
    const authUrlHeader =
      headers.get("X-Shopify-API-Request-Failure-Reauthorize-Url") ||
      `/api/auth`;

    const redirect = Redirect.create(app);
    redirect.dispatch(
      Redirect.Action.REMOTE,
      authUrlHeader.startsWith("/")
        ? `https://${window.location.host}${authUrlHeader}`
        : authUrlHeader
    );
  }
}

Uri and options just contain the method, body, url and basic REST request things

Any help is highly appreciated,
Thanks

2

« The ‘524 A timeout occurred’ status code is a Cloudflare-specific server error that is generated because Cloudflare did not receive an HTTP response from the origin server after an HTTP Connection was made. »

Looks like the server you’re sending a request to isn’t responding in time and so Cloudflare sends you a 524 status code.

3

Its in development actually, so when i npm run dev in the main folder, it auto start the cloudflare or ngrok server on shopify with a url on local, so if my app is opening but 1 functionality is responding with 524 it not easily understandable.

4

What kind of request are you doing and to where when you get this 524?

5

Hei, did you find any solutions for it ? thanks

6

Not Specifically,

I just created a new discount and copy pasted my code in that for my app.
now works fine for me.