Components
Registry
Components
Failed at
Event
Failure
Attempts
Jul 30, 12:00 PM
user.created
503
8
Jul 30, 11:58 AM
user.updated
timeout
8
Jul 30, 11:56 AM
invoice.paid
503
8
Jul 30, 11:55 AM
invoice.failed
timeout
8
Jul 30, 11:53 AM
subscription.renewed
503
8
"use client";
import { useState } from "react";Installation#
pnpm dlx shadcn@latest add @repost/dlq-panelInstalls this item, every component it depends on, and the npm packages listed below.
Usage#
This component is presentational: it renders what you pass it and calls back on
interaction. In a live dashboard the data comes from useDlq() + useReplayDelivery()
(@repost/portal-react), but any data of
the same shape works.
"use client";
import { useState } from "react";
import { DlqPanel, type DlqDeliveryRow } from "@/components/dlq-panel";
import { fixtureLogRows } from "@/fixtures/webhook-fixtures";
const DELIVERIES: DlqDeliveryRow[] = fixtureLogRows(5).map((row, index) => ({
id: row.deliveryId,
type: row.type,
endpointId: row.endpointId,
attemptCount: 8,
lastStatusCode: index % 2 === 0 ? 503 : null,
lastErrorClass: index % 2 === 0 ? null : "timeout",
createdAt: row.timestamp,
}));
export function DlqPanelDemo() {
const [replayed, setReplayed] = useState<string[]>([]);
return (
<DlqPanel
deliveries={DELIVERIES.filter((delivery) => !replayed.includes(delivery.id))}
onReplay={(delivery) => setReplayed((current) => [...current, delivery.id])}
/>
);
}
Props#
| Prop | Type | Description |
|---|---|---|
deliveries | DlqDeliveryRow[] | Exhausted deliveries. |
onReplay | (delivery) => void | Queue a replay. |
replayingId | `string | null` |