vuestorefront/vue-storefront

Socket timeout slower response

henkspane opened this issue · 4 comments

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

  • I agree to follow this project's Code of Conduct
Fifciu commented

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:

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();
            });
          },
        },
      ],

Does anyone have a solution for this problem?

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.