vuestorefront / vue-storefront

Alokai is a Frontend as a Service solution that simplifies composable commerce. It connects all the technologies needed to build and deploy fast & scalable ecommerce frontends. It guides merchants to deliver exceptional customer experiences quickly and easily.
https://www.alokai.com
MIT License
10.59k stars 2.08k forks source link

Socket timeout slower response #6811

Closed henkspane closed 1 year ago

henkspane commented 2 years ago

What is your question / Please describe your issue

We are performing requests using GraphQL queries by Apollo. When a query response is slow (+-10 seconds), the storefront will throw a socket timeout error. Example:

[VSF][error]: [Network error]: FetchError: request to https://test.environment.example/graphql?query=query+categoryList%7Bcategories%7Bitems%7Bchildren%7Binclude_in_menu+is_anchor+level+name+position+product_count+uid+url_path+url_suffix+children%7Binclude_in_menu+is_anchor+level+name+position+product_count+uid+url_path+url_suffix+children%7Binclude_in_menu+is_anchor+level+name+position+product_count+uid+url_path+url_suffix+__typename%7D__typename%7D__typename%7Dproduct_count+name+uid+__typename%7D__typename%7D%7D&operationName=categoryList&variables=%7B%7D failed, reason: Socket timeout

The socket timeout is a problem in local environments.

I am not able to see a global configuration setting in Vue storefront for changing the default socket timeout for all queries. Is there a way to do this?

What version of Vue Storefront are you using?

2.7.1

Code of Conduct

Fifciu commented 1 year ago

Probably, you want to prepare an extension for your integration and use extendApp in order to set custom timeout for the Express.js application. The links below should help you go through the process:

smartosc-kienvm commented 1 year ago

Probably, you want to prepare an extension for your integration and use extendApp in order to set custom timeout for the Express.js application. The links below should help you go through the process:

I've tried some solution, but they didn't work. What's wrong here? Thank you.

extensions: (extensions) => [
        ...extensions,
        {
          extendApp: ({ app }) => {
            const server = app.listen();
            server.setTimeout(500000);
          },
        },
      ],
extensions: (extensions) => [
        ...extensions,
        {
          extendApp: ({ app }) => {
            const apiTimeout = 100 * 1000;
            app.use((req, res, next) => {
                // Set the timeout for all HTTP requests
                req.setTimeout(apiTimeout, () => {
                    const err = new Error('Request Timeout');
                    err.status = 408;
                    next(err);
                });
                // Set the server response timeout for all HTTP requests
                res.setTimeout(apiTimeout, () => {
                    const err = new Error('Service Unavailable');
                    err.status = 503;
                    next(err);
                });
                next();
            });
          },
        },
      ],
extensions: (extensions) => [
        ...extensions,
        {
          extendApp: ({ app }) => {
            const apiTimeout = 100 * 1000;
            app.use((req, res, next) => {
                // Set the timeout for all HTTP requests
                req.setTimeout(apiTimeout, () => {
                    const err = new Error('Request Timeout');
                    err.status = 408;
                    next(err);
                });
                next();
            });
          },
        },
      ],
crveniOrao commented 1 year ago

Does anyone have a solution for this problem?

kungfu321 commented 1 year ago

Does anyone have a solution for this problem?

I used it with magento2 by forking the repository and configuring the agentkeepalive package. This was necessary because the default configuration timeout is 8 seconds. It's work for me.