{"id":18374,"library":"fetch-intercept","title":"fetch-intercept","description":"A lightweight library to intercept and modify fetch requests and responses, inspired by Angular HTTP interceptors. Version 2.4.0 is the latest stable release, with infrequent updates. It monkey-patches the global fetch function to allow addition of request/response interceptors in browser, Node, and WebWorker environments. Unlike other interceptors, it uses a simple register/unregister pattern and supports TypeScript definitions, making it easy to add logging, authentication headers, or error handling without modifying fetch calls directly. It requires fetch to be available (polyfill suggested for older environments).","status":"active","version":"2.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/werk85/fetch-intercept","tags":["javascript","fetch","request","intercept","interceptor","hooks","typescript"],"install":[{"cmd":"npm install fetch-intercept","lang":"bash","label":"npm"},{"cmd":"yarn add fetch-intercept","lang":"bash","label":"yarn"},{"cmd":"pnpm add fetch-intercept","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The package exports a default object, not named exports. Use default import.","wrong":"import { fetchIntercept } from 'fetch-intercept';","symbol":"default","correct":"import fetchIntercept from 'fetch-intercept';"},{"note":"register is a method on the default export, not a named export.","wrong":"import { register } from 'fetch-intercept';","symbol":"register","correct":"import fetchIntercept from 'fetch-intercept';\nconst unregister = fetchIntercept.register({...});"},{"note":"unregister is a function returned by register(), not a named export.","wrong":"import { unregister } from 'fetch-intercept';","symbol":"unregister","correct":"import fetchIntercept from 'fetch-intercept';\nconst unregister = fetchIntercept.register({...});\nunregister();"}],"quickstart":{"code":"import fetchIntercept from 'fetch-intercept';\n\n// Register interceptors\nconst unregister = fetchIntercept.register({\n  request: function (url, config) {\n    // Modify the request: add headers\n    const newConfig = { ...config, headers: { ...config?.headers, 'X-Interceptor': 'true' } };\n    return [url, newConfig];\n  },\n  response: function (response) {\n    // Modify the response: log status\n    console.log('Response status:', response.status);\n    return response;\n  },\n});\n\n// Use fetch normally\nfetch('https://jsonplaceholder.typicode.com/todos/1')\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .finally(() => unregister()); // Clean up\n\nexport {}; // Ensure module context for TypeScript","lang":"typescript","description":"Demonstrates registering interceptors to modify fetch requests and responses, then unregistering."},"warnings":[{"fix":"Keep track of unregister functions and call them in reverse order to fully clean up.","message":"fetch-intercept modifies the global fetch. Calling register() multiple times stacks interceptors; unregister() removes the last registered interceptor.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Always return [url, config] from request interceptor, even if unchanged.","message":"The request interceptor must return an array of [url, config] or undefined to retain original. Returning null or other types may break fetch.","severity":"gotcha","affected_versions":">=1.0"},{"fix":"Upgrade to version 2.x for better AbortController support, or manually handle signal in config.","message":"fetch-intercept does not work with AbortController in older versions; abort signals may be lost in interceptors.","severity":"gotcha","affected_versions":"<2.0"},{"fix":"Consider alternative interceptors like 'undici' or custom wrappers if active maintenance is required.","message":"The library has not been updated for several years; future browser fetch changes may break compatibility.","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure request interceptor returns a tuple: return [url, config];","cause":"Interceptor does not return proper [url, config] array or returns undefined.","error":"TypeError: Failed to fetch"},{"fix":"Use default import: import fetchIntercept from 'fetch-intercept';","cause":"Incorrect import syntax (e.g., named import instead of default).","error":"fetchInterceptor.register is not a function"},{"fix":"Use optional chaining: config?.headers, or provide default empty object: const newConfig = config || {};","cause":"Config object is undefined when no options are passed to fetch.","error":"Cannot read properties of undefined (reading 'headers')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}