d7DetectabilityOperational debt — how invisible misuse is to your safety net
Closest to 'only careful code review or runtime testing' (d7). The detection_hints list ESLint as the tool but explicitly state automated=no, meaning ESLint won't catch these patterns automatically. Missing 401 interceptors, deprecated CancelToken usage, and mixed axios instances without create() are not caught by default linting rules — they require careful code review or runtime failures (e.g. a 401 loop) to surface.
e3EffortRemediation debt — work required to fix once spotted
Closest to 'simple parameterised fix' (e3). The quick_fix is 'Use axios.create() with a base URL and interceptors for centralised CSRF, auth, and error handling' — this is a small refactor within one component (creating a configured axios instance and wiring interceptors), not a single-line swap but not a cross-cutting architectural change either. Replacing CancelToken with AbortController signal is similarly scoped.
b3BurdenStructural debt — long-term weight of choosing wrong
Closest to 'localised tax' (b3). The applies_to scope is web only, and the mistakes (missing interceptors, deprecated CancelToken, mixed instances) are localised to the HTTP client layer. Once axios.create() is used correctly, the rest of the codebase is largely unaffected. It doesn't spread architectural weight broadly.
t3TrapCognitive debt — how counter-intuitive correct behaviour is
Closest to 'minor surprise' (t3). The misconception is that Axios is more secure than fetch — a subtle but not catastrophic misbelief. The common mistakes (CancelToken deprecation, missing 401 handling) are documented gotchas but not the kind that fundamentally contradict how similar concepts work elsewhere. A competent developer may be mildly surprised but not severely misled.
About DEBT scoring →
scored by claude-sonnet-4-6 · 2026-05-09 · reviewed by human
Also Known As
Axiosaxios.getaxios.postHTTP client JS
TL;DR
Axios is a promise-based HTTP client with interceptors, automatic JSON parsing, and CSRF token injection — common in Laravel and Symfony frontends.
Explanation
Laravel includes axios pre-configured: axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest' and automatic CSRF token from meta tag. Interceptors enable global error handling, token refresh, and request logging. Axios automatically parses JSON responses (unlike fetch which requires .json()). CancelToken (deprecated; use AbortController now). axios.create() for multiple API clients with different base URLs.
Common Misconception
✗ Axios is more secure than fetch — both are equally secure; Axios is more convenient (auto-JSON, interceptors) but fetch is now equally capable with better browser primitives like AbortController.
Why It Matters
Laravel and Symfony ship with Axios pre-configured for CSRF — understanding Axios interceptors enables centralised token refresh and error handling across all API calls.
Common Mistakes
Using CancelToken (deprecated) instead of AbortController signal
Not handling 401 token refresh in interceptors
Mixing axios instances with different base URLs without create()
Code Examples
✗ Vulnerable
// No error handling, no CSRF on non-Laravel setup:
axios.post('/api/save', data)
.then(res => console.log(res.data));
✓ Fixed
// Central axios instance with interceptors:
const api = axios.create({ baseURL: '/api', timeout: 10000 });
// CSRF token injection:
api.defaults.headers.common['X-CSRF-Token'] =
document.querySelector('meta[name=csrf-token]')?.content;
// Response error interceptor:
api.interceptors.response.use(
res => res,
async err => {
if (err.response?.status === 401) await refreshToken();
return Promise.reject(err);
}
);
await api.post('/save', data); // auto JSON + CSRF + error handling
🧱FUNDAMENTALS— new to this? Start with the ground floor.
JavaScriptjavascriptThe programming language of the browser — it reads and modifies the page (the DOM), reacts to user events, and fetches data without reloading.
JavaScript is the only language browsers execute, so every interactive behaviour on the web goes through it. Its two defining traits — single-threaded event loop and loose typing (== coercion) — explain the majority of both its bugs and its design patterns.
💡 Default to const, use === always, and reach for let only when a value genuinely reassigns.
