Requests

createPal({ requests: true });   // at creation
pal.watchRequests();             // or later; returns an unwatch function

This watches both fetch and XMLHttpRequest with one shared counter, so libraries built on either (axios uses XHR in the browser) are covered. watchFetch() and watchXHR() watch just one.

These call a pretend API on this site. Mood: neutral

Slow request (2s)Failing request (502)Fast request

Behavior

• Waiting: shown while any watched request is pending, but only after delay (150 ms by default). Fast requests never make it flicker.
• Wince: when a request fails, meaning a network error or a response isError rejects (by default, status 500 and above).
• Not an error: aborted requests (AbortController), and requests cut off because the user is leaving the page. The latter look exactly like network failures, so pagepal waits 100 ms before counting a status-0 failure, and drops it if the page is going away.
• Progress ring: XHR uploads and downloads that report their size and are at least 100 KB get a progress ring around the pal.

Options

pal.watchRequests({
  delay: 150,
  filter: (input, init) => !String(input).includes('/analytics'),   // ignore some requests
  isError: (res) => res.status >= 500,                              // which responses count as failures
  progress: 100_000,                                                // min bytes for the ring; false turns it off
});

filter receives fetch’s arguments. For XHR it receives the URL and { method }. isError receives { status, ok, url }; a Response also works.

Caution

Treating 4xx as errors is usually wrong: a 404 for an optional resource or a 422 validation response is expected. The default only counts server errors.

Showing your own progress

For uploads through fetch, which has no progress events, or any long task:

pal.progress(0.4);   // 0..1
pal.progress(null);  // hide the ring

Unwatching

Each watch*() call returns a function that restores the original fetch/XMLHttpRequest methods, unless something else wrapped them after pagepal. In that case pagepal’s wrapper stays in place but stops doing anything.

The request event

pal.on('request', ({ kind, method, url, status, ok, duration, failed, aborted }) => {});

kind is 'fetch' or 'xhr'. The analytics plugin turns these into request_error and request_slow events.