Code Block

Runtime Trace

A runtime error with its stack: your own code is shown in full with an excerpt of the failing line, while node_modules frames are folded into details.

error
stack
trace
debug

Preview

1440pxHost theme

Use it with AI

1. Copy the link.
2. Write to your agent in your own words and drop the link into the sentence.
3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/codeblock-027?lang=en

TypeErrorCannot read properties of undefined (reading 'price')

cartTotallib/total.ts:12:28sum + item.price * item.count
CartSummarycomponents/cart.tsx:34:10

Кадры из node_modules (3)

renderWithHooksnode_modules/react-dom/cjs/react-dom.development.js:15008:18
beginWorknode_modules/react-dom/cjs/react-dom.development.js:19146:16
performUnitOfWorknode_modules/react-dom/cjs/react-dom.development.js:25738:12

Error type

Error text

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "codeblock-027" (Runtime Trace) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/codeblock-027.json

Registry item: https://vibeui.ru/r/codeblock-027.json
Installs to: components/vibeui/codeblock-027.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A runtime error with its stack: your own code is shown in full with an excerpt of the failing line, while node_modules frames are folded into details.

A runtime error with its stack: own frames expanded with a source excerpt, vendor frames folded into details. Zero dependencies, no client JS.

## 3. How to use it
import { Codeblock027 } from "@/components/vibeui/codeblock-027"

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-codeblock-027-* palette — do not swap it for your theme tokens
- the split between own and vendor frames: fifteen node_modules lines hide what to fix
- the source excerpt on the first frame only — otherwise the stack turns into a listing
- the native details for vendor frames: it gives folding and find-in-page without JS
- the red bar and the separate line with the error type: a message without a type is unsearchable
- the dark surface of the block — it makes the red read as an error, not as a link

## 6. You may change
- the stack frames through the frames array
- the error type through errorName
- the error text through message
- the error hue and the block width

## 7. Rules
- The vendor flag is set in the data: the component never parses paths or guesses foreign code.
- Frames run from the failure site up to the root — that order is how a stack is read, keep it.
- role=alert is deliberately absent: this is an error walkthrough in docs, not a live notification.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/codeblock-027.json

https://vibeui.ru/r/codeblock-027.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-codeblock-027-*. Серверный: свёртку чужих кадров делает нативный details, состояния в JS нет. Кадры делятся по признаку vendor в данных, а не разбором пути: имя каталога — ненадёжный признак, и решение остаётся за вызывающим кодом. Выдержка из исходника показывается только у первого кадра, потому что остальные строки чинить нечем; шапка отбита красной полосой слева, тип ошибки и её текст разведены по строкам.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { CSSProperties } from "react"

export type Codeblock027Frame = {
  fn: string
  file: string
  line: number
  column: number
  vendor?: boolean
  source?: string
}

export type Codeblock027Props = {
  errorName?: string
  message?: string
  frames?: Codeblock027Frame[]
  className?: string
  style?: CSSProperties
}

// Идея компонента: стек как список, а не как простыня текста. Свой код стоит
// первым и раскрыт, кадры из node_modules свёрнуты в details — читатель видит
// строку, до которой ему есть дело, а не пятнадцать чужих.
const STYLES = `
:where([data-vibeui-block="codeblock-027"]){
--vibeui-codeblock-027-bg:oklch(0.19 0.016 20);
--vibeui-codeblock-027-head:oklch(0.26 0.06 22);
--vibeui-codeblock-027-fg:oklch(0.94 0.008 20);
--vibeui-codeblock-027-muted:oklch(0.66 0.016 20);
--vibeui-codeblock-027-dim:oklch(0.52 0.014 20);
--vibeui-codeblock-027-border:oklch(1 0 0 / 12%);
--vibeui-codeblock-027-bad:oklch(0.75 0.19 25);
--vibeui-codeblock-027-mark:oklch(0.55 0.18 25 / 26%);
--vibeui-codeblock-027-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--vibeui-codeblock-027-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="codeblock-027"]{
display:flex;flex-direction:column;
width:100%;max-width:34rem;box-sizing:border-box;margin:0;overflow:hidden;
border:1px solid var(--vibeui-codeblock-027-border);border-radius:0.75rem;
background:var(--vibeui-codeblock-027-bg);color:var(--vibeui-codeblock-027-fg);
font-family:var(--vibeui-codeblock-027-font);
}
[data-vibeui-block="codeblock-027"] [data-part="head"]{
padding:0.625rem 0.875rem;
background:var(--vibeui-codeblock-027-head);
border-bottom:1px solid var(--vibeui-codeblock-027-border);
border-left:0.1875rem solid var(--vibeui-codeblock-027-bad);
}
[data-vibeui-block="codeblock-027"] [data-part="name"]{
display:block;font-family:var(--vibeui-codeblock-027-mono);
font-size:0.75rem;font-weight:700;letter-spacing:0.02em;
color:var(--vibeui-codeblock-027-bad);
}
[data-vibeui-block="codeblock-027"] [data-part="message"]{
display:block;margin-top:0.1875rem;
font-size:0.8125rem;line-height:1.45;
}
[data-vibeui-block="codeblock-027"] ol{
margin:0;padding:0.375rem 0;list-style:none;
}
[data-vibeui-block="codeblock-027"] li{
display:block;padding:0.25rem 0.875rem;
font-family:var(--vibeui-codeblock-027-mono);font-size:0.75rem;line-height:1.6;
}
[data-vibeui-block="codeblock-027"] [data-part="fn"]{
color:var(--vibeui-codeblock-027-fg);
}
[data-vibeui-block="codeblock-027"] [data-part="at"]{
display:block;color:var(--vibeui-codeblock-027-muted);
}
/* Первый кадр — единственный, у которого показан исходник: остальные строки
   всё равно нечем чинить, а выдержка из каждого превратит стек в листинг. */
[data-vibeui-block="codeblock-027"] [data-part="source"]{
display:block;margin-top:0.25rem;padding:0.25rem 0.5rem;
border-radius:0.375rem;border-left:0.125rem solid var(--vibeui-codeblock-027-bad);
background:var(--vibeui-codeblock-027-mark);
white-space:pre;overflow-x:auto;
}
[data-vibeui-block="codeblock-027"] li[data-vendor="true"]{
color:var(--vibeui-codeblock-027-dim);
}
[data-vibeui-block="codeblock-027"] li[data-vendor="true"] [data-part="fn"],
[data-vibeui-block="codeblock-027"] li[data-vendor="true"] [data-part="at"]{
color:var(--vibeui-codeblock-027-dim);
}
[data-vibeui-block="codeblock-027"] summary{
cursor:pointer;list-style:none;
padding:0.4375rem 0.875rem;
border-top:1px solid var(--vibeui-codeblock-027-border);
font-size:0.6875rem;font-weight:650;color:var(--vibeui-codeblock-027-muted);
transition:color .16s ease,background-color .16s ease;
}
[data-vibeui-block="codeblock-027"] summary::-webkit-details-marker{display:none}
[data-vibeui-block="codeblock-027"] summary::before{content:"▸ ";display:inline-block;transition:transform .18s ease}
[data-vibeui-block="codeblock-027"] details[open] summary::before{content:"▾ "}
[data-vibeui-block="codeblock-027"] summary:hover{color:var(--vibeui-codeblock-027-fg);background:oklch(1 0 0 / 5%)}
[data-vibeui-block="codeblock-027"] summary:focus-visible{
outline:2px solid var(--vibeui-codeblock-027-bad);outline-offset:-2px;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="codeblock-027"] *{animation:none!important;transition:none!important}}
`

const FRAMES: Codeblock027Frame[] = [
  {
    fn: "cartTotal",
    file: "lib/total.ts",
    line: 12,
    column: 28,
    source: "sum + item.price * item.count",
  },
  { fn: "CartSummary", file: "components/cart.tsx", line: 34, column: 10 },
  {
    fn: "renderWithHooks",
    file: "node_modules/react-dom/cjs/react-dom.development.js",
    line: 15008,
    column: 18,
    vendor: true,
  },
  {
    fn: "beginWork",
    file: "node_modules/react-dom/cjs/react-dom.development.js",
    line: 19146,
    column: 16,
    vendor: true,
  },
  {
    fn: "performUnitOfWork",
    file: "node_modules/react-dom/cjs/react-dom.development.js",
    line: 25738,
    column: 12,
    vendor: true,
  },
]

/** Ошибка выполнения со стеком: свой код раскрыт, чужой свёрнут. */
export function Codeblock027({
  errorName = "TypeError",
  message = "Cannot read properties of undefined (reading 'price')",
  frames = FRAMES,
  className,
  style,
}: Codeblock027Props) {
  const own = frames.filter((frame) => !frame.vendor)
  const vendor = frames.filter((frame) => frame.vendor)

  const renderFrame = (frame: Codeblock027Frame) => (
    <li key={`${frame.file}:${frame.line}`} data-vendor={frame.vendor}>
      <span data-part="fn">{frame.fn}</span>
      <span data-part="at">
        {frame.file}:{frame.line}:{frame.column}
      </span>
      {frame.source ? <span data-part="source">{frame.source}</span> : null}
    </li>
  )

  return (
    <>
      <style href="vibeui-codeblock-027" precedence="medium">
        {STYLES}
      </style>
      <section
        data-vibeui-block="codeblock-027"
        className={className}
        style={style}
        aria-label={`Ошибка выполнения: ${errorName}`}
      >
        <div data-part="head">
          <span data-part="name">{errorName}</span>
          <span data-part="message">{message}</span>
        </div>
        <ol>{own.map(renderFrame)}</ol>
        {vendor.length > 0 ? (
          <details>
            <summary>Кадры из node_modules ({vendor.length})</summary>
            <ol>{vendor.map(renderFrame)}</ol>
          </details>
        ) : null}
      </section>
    </>
  )
}