Timeout limits for Vue Storefront commerce calls: what to consider?

Answer the Question First

Vue Storefront’s middleware exposes a timeout property per integration in middleware.config.js (or middleware.config.ts). That value is applied as axios.defaults.timeout only for that backend, so you can set different limits for each commerce API.

Per‑Endpoint Timeout Configuration

Example middleware.config.js snippet:

module.exports = {
  integrations: {
    magento: {
      url: 'https://api.magento.local',
      timeout: 20000, // 20 s for Magento calls
    },
    shopify: {
      url: 'https://api.shopify.local',
      timeout: 12000, // 12 s for Shopify calls
    },
  },
};

If your Vue Storefront release predates the timeout key, add a request‑level interceptor that sets config.timeout based on the request URL.

Central vs. Composable‑Level Cancellation

Two common patterns:

• Central interceptor – attach an AbortController signal to every request. Tie the controller to the Nuxt route or a Pinia store flag so that navigating away aborts all pending calls.
• Composable‑level control – expose a cancel function from each composable (e.g., useProduct) and let the component decide when to abort. This gives fine‑grained control but requires explicit cancellation at each call site.

A hybrid approach works well: a global interceptor supplies a default signal, while composables can override it or provide an explicit signal if needed.

Detecting Abort vs. Network Failure in SSR

Axios propagates aborted requests as a distinct error:

• Node (SSR): error.code === 'ERR_CANCELED'
• Browser: error.name === 'CanceledError'

Time‑outs produce error.code === 'ECONNABORTED' or ETIMEDOUT, while genuine network failures show codes like ENOTFOUND or EHOSTUNREACH. Inspecting error.code (or error.name in the browser) lets you distinguish an intentional abort from a real failure and render an appropriate fallback UI.

Practical Steps for Your Project

1. Verify VS‑FS version – the timeout key was introduced in v2.0. If you’re on v1.x, use a request interceptor.
2. Set per‑endpoint timeouts in middleware.config.js as shown above.
3. Implement a global interceptor that attaches an AbortController signal tied to the Nuxt context:

   axios.interceptors.request.use((config) => {
     const controller = new AbortController();
     config.signal = controller.signal;
     config.meta = { controller };
     return config;
   });
   

4. Expose cancel functions in composables when necessary:

   const controller = new AbortController();
   axios.get(url, { signal: controller.signal });
   return { cancel: () => controller.abort() };
   

5. Handle errors in SSR by checking error.code and rendering a 500 page or a user‑friendly message accordingly.

Ask for Missing Diagnostic Detail

To tailor the recommendation precisely, could you confirm which Vue Storefront version you’re using (v1.x or v2.x)? This determines whether the timeout key is natively supported or if an interceptor is required.