# API Request Logs block

> API request logs grid with a status volume chart, release markers, drag to zoom and replay

Request log explorer for on-call engineers: 2xx, 4xx and 5xx traffic bars with release markers and drag to zoom, figures against the prior window, AND and OR Filters, a request sheet with route health and bodies. ReUI DataGrid, Filters, CodeBlock.

- Type: Pro block
- Category: [Base](https://reui.io/blocks/data-grid/base.md)
- Page: https://reui.io/blocks/data-grid/base/data-grid-base-9
- Docs (Base UI): https://reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://reui.io/docs/components/radix/data-grid.md
- MCP: `get_block("data-grid-base-9")`
- Built with: Accordion, Alert, Alert Dialog, Badge, Button, Button Group, Cascader, Chart, Code Block, Data Grid, Dropdown Menu, Empty, Field, Filters, Frame, Hover Card, Input, Input Group, Kbd, Popover, Select, Separator, Sheet, Skeleton, Switch, Tabs, Toggle Group, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## Best for

Request logs read by time window: a stacked status chart that zooms the grid, a sheet with route health, headers and bodies, and replay

## Agent notes

- Replace `LOGS` (30 sampled requests), `TRAFFIC` (calls per 10 minutes), `DEPLOYS` and the clock `NOW` in data.ts with your log store's reads
- `useLogStore` changes only React state; send `replay` and `removeLogs` to your API and keep each `undo`; `replayOutcome` decides what a replay answers
- `logFilterFields` and `matchesLogFilters` in log-filters.tsx define the AND and OR rules; `responseBodyOf` in log-payloads.ts stands in for your stored bodies

## When not to use

- Who changed what in a workspace, grouped by day: use [Access Audit Log](https://reui.io/blocks/solutions/users/solution-users-6.md) (`get_block("solution-users-6")`)
- Event volume alone, with no rows to open or replay: use [Audit Log Volume](https://reui.io/blocks/chart/bar-chart/chart-35.md) (`get_block("chart-35")`)

## Third-party libraries

- Recharts v3: [API reference](https://recharts.github.io/en-US/api/), [docs](https://recharts.github.io/en-US/guide/getting-started/)
- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)
- Shiki v4: [API reference](https://shiki.style/guide/install), [docs](https://shiki.style/guide/), through ReUI Code Block

## Install

```bash
npx shadcn@latest add @reui/data-grid-base-9
```

## About Base blocks

### When to use

- A whole table section: a title, a create button, filter controls, the rows and pagination
- Customer, contact and deal tables for a sales team, with a row menu, pinned rows or a rule filter bar
- Operations tables for support tickets, timesheets, team members, project modules, SKU prices or API logs

### When not to use

- A bare table for your own columns and rows, without a title bar, toolbar or demo rows: use [Data Grid](https://reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Thousands of rows in one scrolling list that loads more as the reader nears the end: use the [Virtualization blocks](https://reui.io/blocks/data-grid/virtualization.md)
- A payments ledger, a renewals queue or an automation library led by a rule filter bar: use the [Filtering blocks](https://reui.io/blocks/data-grid/filtering.md)

### Agent notes

- Each page.tsx wraps the table in a centered `min-h-svh` main under an sr-only `h1`; drop that wrapper and keep a single `h1` once it sits in your page
- Each block filters and pages its sample rows in the browser with `pagination` in local state; move both to your API before the row count grows large

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.