How to diagnose Axios performance using timing, progress events, and limits?

Answer first

To diagnose Axios performance, capture start‑and‑end timestamps, derive transfer rates from progress events, and enforce size limits. In browsers you can use request/response interceptors together with the Performance Resource Timing API for precise timing; in Node.js you measure wall‑clock time around the call (or instrument the underlying http socket). Progress events that provide loaded/total bytes are available only in browsers; they are ignored in Node.js. Size limits are enforced via the confirmed config options maxContentLength (response) and maxBodyLength (request).

Confirmed facts

• Axios supports maxContentLength and maxBodyLength; exceeding them throws an AxiosError with code ERR_BAD_REQUEST or ERR_BAD_RESPONSE.
• In browsers, onUploadProgress and onDownloadProgress callbacks receive a ProgressEvent with loaded and total properties; these callbacks are browser‑only.
• Axios does not expose raw XHR timing. Browser timing must be obtained via performance.getEntriesByType('resource') and matched to the request URL and start time.

Likely explanation

Axios uses XHR (or fetch) in browsers and the Node.js http/https modules in Node.js. Browser XHR integrates with the Performance API and provides progress events, while Node.js http streams only expose data, end and socket events, requiring manual timing or external libraries for progress.

Steps for reliable timing

Browser

1. Set a high‑resolution start mark in a request interceptor.
2. After the response, look up the matching Performance Resource Timing entry.

const start = performance.now();
axios.interceptors.request.use(cfg => { cfg.metadata = { start }; return cfg; });
axios.interceptors.response.use(res => {
  const duration = performance.now() - res.config.metadata.start;
  const entry = performance.getEntriesByType('resource')
    .find(e => e.name === res.config.url && Math.abs(e.startTime - res.config.metadata.start) < 100);
  console.log({ duration, dns: entry?.domainLookupEnd - entry?.domainLookupStart });
  return res;
});

Node.js

1. Measure wall‑clock time around the Axios call.
2. For finer granularity, listen to the underlying socket’s connect and end events.

const start = Date.now();
const res = await axios.get(url);
const duration = Date.now() - start;
console.log({ duration });

Progress events to transfer‑rate metrics

Browser only. Compute instantaneous rate from loaded/total and detect stalls.

let lastLoaded = 0, lastTime = performance.now();
axios.get(url, {
  onDownloadProgress: e => {
    if (!e.total) return;
    const now = performance.now();
    const delta = e.loaded - lastLoaded;
    const dt = (now - lastTime) / 1000;
    const rate = dt ? delta / dt : 0;
    if (rate < 10 * 1024) console.warn('slow download detected');
    lastLoaded = e.loaded; lastTime = now;
  }
});

Node.js lacks native progress; you can count bytes on response data events or use an external progress library.

Enforce size limits for analysis

const api = axios.create({
  maxContentLength: 5 * 1024 * 1024, // 5 MiB response limit
  maxBodyLength: 5 * 1024 * 1024,    // 5 MiB request limit
  validateStatus: s => s < 400
});

Limit violations surface as AxiosError and can be logged to flag unexpected payloads.

Missing diagnostic detail

Are you primarily diagnosing browser XHR or Node.js http? This determines whether progress events and the Performance API are available.