ERROR [VSF][error]: [Network error]: FetchError: request to https://magento2.localhost/graphql failed, reason: Socket timeout

[MT-Khaing]

What is your question / Please describe your issue

Hi,

Has anyone experienced and solved the socket timeout error that happened at the VSF checkout page?

I can't seem to find any relevant articles discussing this issue with Magento 2 and any kind suggestion would be greatly appreciated.

The VSF is calling the localhost Magento 2 as a backend and everything runs smoothly except at this checkout page.

In the backend Magento2, we can see the order was placed successfully.

Note: both applications are containerized.

What version of Vue Storefront are you using?

latest release

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[danish7778]

Yes. It also happens on the category and product pages.

my apps are not running in containers.

[skirianov]

Hey, I'm tagging @bartoszherba as our Magento specialist here ;)

[MT-Khaing]

I'm still unable to resolve this socket timeout error and any help would be greatly appreciated!!!

The error happens always after 8 seconds.

And there are 499 responses in the nginx log where the Magento application is running behind.

Note: this issue wasn't replicable on the UAT environment but only in the local docker environment.

Thank You

[jumbhood]

We are also facing the same issue, same 8 seconds, and the socket timeout. Any updates on this one?

[davidwindell]

We can also reproduce this, any ideas? Somehow to change the timeout value perhaps? @bartoszherba

[bensinca]

Hi @bartoszherba,

We can replicate this by using the mutate from useAPI.

See the code below, we added client_secret to the query to get the client secret from Stripe on Magento side. I tried add a custom query to the placeOrder command as well, yet, same outcome. It works well when I test the mutation request via postman and magento side.

import { useApi } from '~/composables/useApi';

export const stripeOrder = () => {
  const { mutate } = useApi();

  const makeOrder =  async (cart: string) => {
    const query = `
      mutation {
        placeOrder(input: {cart_id: "${cart}"}) {
          order {
            order_number
            client_secret
          }
        }
      }
    `;
    return await mutate(query);
  }

  return {
    makeOrder
  };
};

export default stripeOrder;

Running out of ideas. I also tried to add timeout: 0 to the config.axios in the integrationPlugin but unsuccessful.

[tidypol]

I'll take a look into this. I'm gonna reproduce it into my setup and investigate it.

[davidwindell]

Thanks so much @tidypol !!

[tidypol]

I am testing this using a fresh vsf installation and a clean magento 2.4.6-p2 installation and discovered an inconsistency for the getAvailablePaymentMethods call.

We should call

await context.app.$vsf.$magento.api.getAvailablePaymentMethods(cartId, customQuery, customHeaders)

instead of

await context.app.$vsf.$magento.api.getAvailablePaymentMethods({cartId}, customQuery, customHeaders)

I'll open an issue/pr soon for this since here's not the right context.

This is slowing me a bit on reproducing the case, i found a way to override this. I'll get back to you guys asap.

[tidypol]

I haven't been able to reproduce the issue and the order get placed correctly. I think this is related into a particular env setup. I'll give you some info about mine:

• I've tested this using warden to make magento 2 run in a docker environment
• Node 16.19.0 is installed by nvm
• I am on windows 11
• Docker Desktop 24.0.6 with wsl
• The app.magentolocaldemo.test is the domain of my magento, the domain is in https and the certificate is signed by warden, i use NODE_TLS_REJECT_UNAUTHORIZED set to 0 anyway to avoid TLS issues
• Vsf is running in localhost:3000 nominal, installed today using npx @vue-storefront/cli init and configured with steps selected to magento.

At this point i am assuming this is a network-related issue. Do you have any hint on how i can reproduce the issue with a specific setup?

[MT-Khaing]

Thank you for looking into this @tidypol.

My Magento version is currently running on 2.4.5-p1 and the docker environment is composed of Nginx, Php-Fpm, MySQL, ElasticSearch, Redis, etc.

VSF was installed using npx @vue-storefront/cli init and configured with steps selected Magento as well. But it was dockerized using /node:16-slim image. Note: the issue was reproducible even when the VSF app wasn't running in a docker environment. NODE_TLS_REJECT_UNAUTHORIZED is also set to 0 anyway to avoid TLS issues.

[bensinca]

@tidypol worth mentioning that this is happening with custom queries as well.

In here https://github.com/headlesscommerce/vsf-magento-stripe/blob/main/stripe/composables/order.ts I am mutating in such way that it will return client_secret from magento 2 side with stripe 3.4+ installed.

It works well if I just use a blank vue app with apollo but not with vsf.

[drpayyne]

I've been facing this as well. Most of the time a custom query works, but sometimes, it times out at ~8s.

[tidypol]

@drpayyne can you describe the steps you made? Also, feel free to paste here some scripts or screenshots too. Thank you!

[ps-tkaufman]

We are facing this issue as well for a custom graphql calculation mutation - the execution on Magento takes about 10 seconds, but from within storefront we run into the Socket timeout after a little bit more than 8 seconds. Executing the query from postman and so on works perfectly fine. Is there really no possibility to increase the timeout for VSF->Magento connection?

[cedric-lamalle]

Hello, Is there a way to raise this timeout? I've tried to create an extension to augment the express timeout as recommended in #6811 but it didn't change anything. I have a rather old machine here to develop and I hit this timeout rather frequently, for instance just for listing categories. Regards!

[davidwindell]

@skirianov as this creates a critical issue (customers unable to checkout), is there any way to escalate this on your side to get more resource on it? Thanks!