Processing
msg_abc1...{"userId": "user_123", "action": "send_email"}Jan 27, 05:38 AM
1/3 retries
Completed
msg_xyz7...{"report": "daily_analytics"}Jan 27, 04:38 AM
Jan 27, 05:38 AM
Failed
msg_fail...{"webhook": "https://api.example.com"}3/3 retries
Connection timeout after 30s
Overview
Display QStash task status with visual badges for pending/processing/completed/failed/scheduled states. Shows retry count, scheduled time, payload preview, and error messages.
Installation
npx shadcn@latest add @elements/upstash-queue-cardUsage
import { UpstashQueueCard } from "@/components/elements/upstash/upstash-queue-card";
export function TaskStatus({ task }) {
return (
<UpstashQueueCard
id={task.messageId}
status="processing"
payload={JSON.stringify(task.body)}
scheduledAt={task.notBefore}
retries={task.retried}
maxRetries={3}
/>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | - | Message/task ID |
status | "pending" | "processing" | "completed" | "failed" | "scheduled" | - | Task status |
payload | string | - | Payload preview |
scheduledAt | Date | string | - | Scheduled execution time |
completedAt | Date | string | - | Completion time |
retries | number | 0 | Current retry count |
maxRetries | number | 3 | Maximum retries |
error | string | - | Error message (for failed status) |
className | string | - | Additional CSS classes |
Features
- Color-coded status badges
- Payload preview with truncation
- Retry counter display
- Scheduled/completed time formatting
- Error message display for failed tasks