F1 component kit/Utilities/JSON / payload viewerPhone

JSON / payload viewer

Missing · new35 · json-viewer

Failed jobs, payload audits and replays: pretty JSON with collapse, wrap and copy, UTC times annotated in your zone, the raw unredacted payload for those allowed (Q9c), and the show-once secret (API key) with reveal and copy.

Covers: M11. Exports: JsonViewer.

Whole page:CompactComfortableLaravel · navyDTC · midnight green
AnatomyStatesDensityEN · 中文Edge casesContract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}

States

6 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

expanded
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
collapsed
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": { … 14 keys },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
wrapped
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
show-once secret
Copy this key nowIt is shown once. After you close this panel only its last 4 characters remain.
api-keys.store · show onceCopyReveal
{ "name": "Shanghai print agent",
  "token": ••••••••••••••••••••••••••••a7Q2 }
loading
…
                    
                                  
                            
                                        
not decodable

Payload couldn’t be decoded

The decoder answered 422: not valid JSON. The raw text is below.

O:23:"App\Jobs\SendWechat"…

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
comfortable · data-density=comfortable
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
中文 · lang=zh-Hans
failed-jobs.show · 原始未脱敏（Q9c）换行全部折叠复制
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds with 0 bytes received (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for https://print-agent.internal.example/api/v2/jobs/7781/dispatch?retry=3&group=4522-1-2-3"
}
permission denied

Not available to your role

Your role is missing view failed jobs. Nothing here is hidden by mistake: the server sends only what you can do.

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}
DTC admin · data-theme=dtc
failed-jobs.show · raw, unredacted (Q9c)WrapCollapse allCopy
{
  "uuid": "0d6b2f0e-77a1-4c1e-9f3a-5b2e8c41d913",
  "queue": "print",
  "failed_at": "2026-10-18T05:02:14Z",  // 13:02 UTC+8
  "payload": {
    "order_id": 4522,
    "job_type": "shirt_code",
    "groups": ["4522-1-2-3"],
    "attempts": 3,
    "manual": false
  },
  "exception": "Illuminate\Http\Client\ConnectionException: cURL error 28: Operation timed out after 30001 milliseconds"
}

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
JsonViewer · @rj/admin-kit
Props
value · collapsedDepth · wrap · maskKeys · annotateTimes
States
expanded · collapsed · wrapped · masked · loading · error
shadcn / Radix
Collapsible + Button (copy)
Package underneath
react-json-view-lite (CodeMirror only if search / edit is needed)
Accessibility
tree with aria-expanded per node; Copy announces
API operations
admin.failed-jobs.show · admin.orders.payload-audits.decoded · admin.replays.show · admin.api-request-logs.index · admin.api-keys.store (show once)
Phone variant
always wrapped