---
title: Fetch
description: Learn how to integrate Allure with the Fetch API to capture detailed HTTP request and response data in your test reports.
---

# Getting started with Allure Fetch

[![Allure Fetch npm latest version](https://img.shields.io/npm/v/allure-fetch?style=flat "Allure Fetch npm latest version")](https://www.npmjs.com/package/allure-fetch)

Capture [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) HTTP requests and responses as attachments in your [Allure Report](https://allurereport.org/docs/) test reports.

Allure Fetch is compatible with any Allure JS framework integration, including [Allure Vitest](/docs/vitest/), [Allure Jest](/docs/jest/), [Allure Playwright](/docs/playwright/), [Allure Mocha](/docs/mocha/), and others.

To enable the integration in your project:

1. Make sure you have an Allure integration set up for the test framework you use.

   See the instructions in the integration's documentation in [Frameworks](/docs/frameworks/).

1. Install `allure-fetch`.

   **npm:**
   ```bash
   npm install --save-dev allure-fetch
   ```

   **yarn:**
   ```bash
   yarn add --dev allure-fetch
   ```

   **pnpm:**
   ```bash
   pnpm install --dev allure-fetch
   ```

1. Wrap your `fetch` implementation with `withAllure()` to start capturing requests.

   The example below shows usage in a Vitest test suite.

   ```ts
   import { withAllure } from "allure-fetch";
   import { describe, expect, it } from "vitest";

   const client = withAllure(fetch);

   describe("Orders API", () => {
     it("creates an order", async () => {
       const response = await client("https://api.example.com/orders", {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ item: "book", qty: 1 }),
       });
       expect(response.status).toBe(201);
     });
   });
   ```

   Every HTTP request made through `client` will be added to the test result as an attachment, wrapped in a step of the same name. The attachment captures the full exchange in one place: the request method, URL, headers, query parameters, cookies, and body; the response status, headers, cookies (including attributes such as `Path`, `Domain`, `Expires`, `Secure`, `HttpOnly`, and `SameSite`), and body; the exchange start and stop timestamps; and, when the request fails, the error name and message.

   If your tests call the global `fetch` directly, use `instrumentGlobalFetch()` instead. It replaces `globalThis.fetch` with an instrumented version and returns a restore function. Call the restore function when you no longer want requests captured — typically in `afterEach` or `afterAll`:

   ```ts
   import { instrumentGlobalFetch } from "allure-fetch";
   import { afterEach, beforeEach, describe, expect, it } from "vitest";

   describe("Orders API", () => {
     let restore: () => void;

     beforeEach(() => {
       restore = instrumentGlobalFetch();
     });

     afterEach(() => {
       restore();
     });

     it("creates an order", async () => {
       const response = await fetch("https://api.example.com/orders", {
         method: "POST",
         headers: { "content-type": "application/json" },
         body: JSON.stringify({ item: "book", qty: 1 }),
       });
       expect(response.status).toBe(201);
     });
   });
   ```

   Info:
   To prevent secrets from leaking into reports, certain values are redacted by default — all cookies, any header or query parameter whose name suggests it contains a credential, and any URL-encoded form field whose name does the same. See [Allure Fetch configuration](/docs/fetch-configuration/) for the full list of defaults and how to customize the redaction rules.

1. Run your tests and generate a test report the same way as you would normally.