Network Request Monitor

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/devtools/devtools25.tsx instead.

Usage

The file also exports devtools25Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Devtools25, devtools25Demo } from "@/components/blocks/devtools/devtools25";

export default function Page() {
  return <Devtools25 {...devtools25Demo} />;
}

Props

Types

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";
type RequestType = "XHR" | "Fetch" | "Doc";

type RequestRow = {
  method: HttpMethod;
  status: number;
  path: string;
  type: RequestType;
  duration: string;
  size: string;
};

Behavior notes

• "use client" for three pieces of real local state: the Recording toggle, the method filter, and the type filter.
• The Recording toggle only flips the badge between "Recording" (red dot) and "Paused" (gray dot); it does not start, stop, add to, or remove anything from the fixed requests list. There is no actual traffic interception happening.
• The method and type filter pill groups genuinely filter the requests prop client-side (both conditions must match); they never fetch new data or mutate the underlying list, they only change which existing rows are visible.
• Status code badge color is derived from the numeric status (2xx/1xx = emerald, 3xx = amber, 4xx/5xx = red); method badge color is fixed by method name (GET = sky, POST = emerald, PUT = amber, DELETE = red).
• When a filter combination matches nothing, the table shows a single centered "No requests match the current filters" row instead of an empty table body.