Delivery Attempts Panel

PreviousNext

One delivery's attempt timeline, with status, latency, and response bodies.

  1. #3200https://api.acme.dev/webhooks/repost84msJul 30, 11:59:30 AM
    {"ok":true}
  2. #2503https://api.acme.dev/webhooks/repost1240msJul 30, 11:58:25 AM
    upstream unavailable
  3. #1timeouthttps://api.acme.dev/webhooks/repost—Jul 30, 11:57:00 AM
"use client";

import { DeliveryAttemptsPanel } from "@/components/delivery-attempts-panel";

Installation

pnpm dlx shadcn@latest add @repost/delivery-attempts-panel

Installs 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 useDeliveryAttempts(deliveryId) (@repost/portal-react), but any data of the same shape works.

components/delivery-attempts-panel-demo.tsx
"use client";

import { DeliveryAttemptsPanel } from "@/components/delivery-attempts-panel";
import { fixtureAttempts } from "@/fixtures/webhook-fixtures";

export function DeliveryAttemptsPanelDemo() {
  return <DeliveryAttemptsPanel attempts={fixtureAttempts()} />;
}

Props

PropTypeDescription
attemptsWebhookAttempt[]Attempts, newest first.
isLoadingbooleanRenders skeletons.