{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-trace-11","type":"registry:block","title":"Error breadcrumbs","description":"The events that led to a crash, the response body of the request behind it, and the stack trace below.","dependencies":[],"registryDependencies":["@reui/code-block","dialog","trace"],"files":[{"path":"c-trace-11.tsx","type":"registry:block","content":"import { CodeBlock } from \"@/components/reui/code-block/code-block\"\n\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n  Trace,\n  TraceCollapsible,\n  TraceCollapsibleContent,\n  TraceCollapsibleTrigger,\n  TraceDescription,\n  TraceIcon,\n  TraceLine,\n  TraceTitle,\n} from \"@/components/ui/trace\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst RESPONSE = `{\n  \"interval\": \"year\",\n  \"plans\": [\n    {\n      \"id\": \"pro\",\n      \"prices\": {\n        \"month\": { \"priceId\": \"price_1Q8sZ7\" },\n        \"year\": { \"priceId\": \"price_1Q8sZ9\" }\n      }\n    },\n    {\n      \"id\": \"team\",\n      \"prices\": {\n        \"month\": { \"priceId\": \"price_1Q8t02\" }\n      }\n    }\n  ]\n}`\n\nconst FRAME = `export function CheckoutButton({ plan }: Props) {\n  const { interval } = useBilling()\n  const price = plan.prices[interval]\n  const priceId = price.priceId\n  return <Button onClick={() => checkout(priceId)}>Upgrade</Button>\n}`\n\nconst FRAMEWORK_FRAMES = [\n  \"renderWithHooks\",\n  \"updateFunctionComponent\",\n  \"beginWork\",\n  \"performUnitOfWork\",\n  \"workLoopSync\",\n]\n\n// The failing request opens in a dialog: its JSON body is too long to expand\n// between one-line events.\nexport function Pattern() {\n  return (\n    <div className=\"flex w-full max-w-md flex-col gap-4 text-sm\">\n      <Trace>\n        <TraceCollapsible defaultOpen>\n          <TraceCollapsibleTrigger>\n            <TraceLine>\n              <TraceTitle>Breadcrumbs</TraceTitle>\n              <TraceDescription>4 events</TraceDescription>\n            </TraceLine>\n          </TraceCollapsibleTrigger>\n          <TraceCollapsibleContent>\n            <Trace>\n              <TraceLine>\n                <TraceIcon>\n                  <IconPlaceholder\n                    lucide=\"NavigationIcon\"\n                    tabler=\"IconNavigation\"\n                    hugeicons=\"Navigation03Icon\"\n                    phosphor=\"NavigationArrowIcon\"\n                    remixicon=\"RiNavigationLine\"\n                  />\n                </TraceIcon>\n                <TraceTitle>Navigated from / to /pricing</TraceTitle>\n                <TraceDescription>14:31:02.118</TraceDescription>\n              </TraceLine>\n              <Dialog>\n                <DialogTrigger>\n                  <TraceLine>\n                    <TraceIcon>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"Globe02Icon\"\n                        phosphor=\"GlobeIcon\"\n                        remixicon=\"RiGlobalLine\"\n                      />\n                    </TraceIcon>\n                    <TraceTitle>GET /api/plans?interval=year, 200</TraceTitle>\n                    <TraceDescription>14:31:05.611</TraceDescription>\n                    <TraceIcon>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                      />\n                    </TraceIcon>\n                  </TraceLine>\n                </DialogTrigger>\n                <DialogContent className=\"sm:max-w-md\">\n                  <DialogHeader>\n                    <DialogTitle>GET /api/plans?interval=year</DialogTitle>\n                    <DialogDescription>\n                      200 in 209 ms. The team plan has no yearly price.\n                    </DialogDescription>\n                  </DialogHeader>\n                  <CodeBlock\n                    code={RESPONSE}\n                    language=\"json\"\n                    highlightedLines={[13, 14, 15]}\n                    label=\"Response body\"\n                  />\n                </DialogContent>\n              </Dialog>\n              <TraceLine>\n                <TraceIcon>\n                  <IconPlaceholder\n                    lucide=\"MousePointer2Icon\"\n                    tabler=\"IconPointer\"\n                    hugeicons=\"Cursor01Icon\"\n                    phosphor=\"CursorIcon\"\n                    remixicon=\"RiCursorLine\"\n                  />\n                </TraceIcon>\n                <TraceTitle>Clicked Upgrade on Team</TraceTitle>\n                <TraceDescription>14:31:09.023</TraceDescription>\n              </TraceLine>\n              <TraceLine status=\"error\">\n                <TraceIcon>\n                  <IconPlaceholder\n                    lucide=\"BugIcon\"\n                    tabler=\"IconBug\"\n                    hugeicons=\"Bug01Icon\"\n                    phosphor=\"BugIcon\"\n                    remixicon=\"RiBugLine\"\n                  />\n                </TraceIcon>\n                <TraceTitle>Threw TypeError in CheckoutButton</TraceTitle>\n                <TraceDescription>14:31:09.024</TraceDescription>\n              </TraceLine>\n            </Trace>\n          </TraceCollapsibleContent>\n        </TraceCollapsible>\n        <TraceCollapsible>\n          <TraceCollapsibleTrigger>\n            <TraceLine>\n              <TraceTitle>Stack trace</TraceTitle>\n              <TraceDescription>1 in app, 5 framework</TraceDescription>\n            </TraceLine>\n          </TraceCollapsibleTrigger>\n          <TraceCollapsibleContent>\n            <Trace>\n              <TraceCollapsible defaultOpen>\n                <TraceCollapsibleTrigger>\n                  <TraceLine status=\"error\">\n                    <TraceTitle>\n                      <code className=\"text-xs\">CheckoutButton</code>\n                    </TraceTitle>\n                    <TraceDescription>\n                      <code className=\"text-xs\">checkout-button.tsx:14:25</code>\n                    </TraceDescription>\n                  </TraceLine>\n                </TraceCollapsibleTrigger>\n                <TraceCollapsibleContent>\n                  <CodeBlock\n                    code={FRAME}\n                    language=\"tsx\"\n                    showLineNumbers\n                    startLine={11}\n                    lineLevels={{ error: [4] }}\n                    label=\"checkout-button.tsx around line 14\"\n                  />\n                </TraceCollapsibleContent>\n              </TraceCollapsible>\n              {/* Framework frames fold into one row: they are real, but\n                    rarely where the fix is. */}\n              <TraceCollapsible>\n                <TraceCollapsibleTrigger>\n                  <TraceLine>\n                    <TraceTitle>\n                      {FRAMEWORK_FRAMES.length} frames in react-dom\n                    </TraceTitle>\n                  </TraceLine>\n                </TraceCollapsibleTrigger>\n                <TraceCollapsibleContent>\n                  <Trace>\n                    {FRAMEWORK_FRAMES.map((frame) => (\n                      <TraceLine key={frame}>\n                        <TraceTitle>\n                          <code className=\"text-xs\">{frame}</code>\n                        </TraceTitle>\n                      </TraceLine>\n                    ))}\n                  </Trace>\n                </TraceCollapsibleContent>\n              </TraceCollapsible>\n            </Trace>\n          </TraceCollapsibleContent>\n        </TraceCollapsible>\n      </Trace>\n    </div>\n  )\n}","target":"components/examples/c-trace-11.tsx"}],"meta":{"order":11,"gridSize":2,"label":"Error Breadcrumbs"}}