Preview Updated 2026-05-10

Crash pane

Crash report panel with four tabs: Crash Dialog, Stack Trace, Dump Uploader, and Safe Mode.

Basic usage

Predefines four tabs (ids: dialog, stack, uploader, safemode). Each tab’s content is provided by the consumer through the named slot #panel-{tabId} (Vue) / slots["panel-{tabId}"] (React). The default list can also be overridden via the tabs prop.

Source: crash.html.

背景

崩溃确认对话框（CfModal + 红色确认）。

<script setup lang="ts">
import { CfCrashPane, CfDropzone } from '@chufix-design/vue';
</script>

<template>
  <div style="height: 280px;">
    <CfCrashPane>
      <template #panel-dialog><p style="color: var(--fg-2);">崩溃确认对话框（CfModal + 红色确认）。</p></template>
      <template #panel-stack><pre style="font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);">at fetchOrders (orders.ts:42)
at handleSubmit (form.ts:18)
at click (button.ts:7)</pre></template>
      <template #panel-uploader>
        <CfDropzone />
      </template>
      <template #panel-safemode><p style="color: var(--fg-2);">安全模式启动入口。</p></template>
    </CfCrashPane>
  </div>
</template>

<CfCrashPane slots={{
'panel-dialog': <PanelA />,
'panel-stack': <PanelB />,
}} />

Real content layout

Each of the four tabs holds one atom: a Banner error summary, a pre stack trace, a Dropzone dump uploader, and a safe-mode entry point.

背景

<script setup lang="ts">
import { CfCrashPane, CfDropzone, CfBanner, CfButton } from '@chufix-design/vue';
</script>

<template>
  <div style="height: 320px;">
    <CfCrashPane>
      <template #panel-dialog>
        <CfBanner tone="error" title="应用意外崩溃" description="UncaughtTypeError: cannot read property 'foo' of undefined">
          <template #actions>
            <CfButton variant="danger" size="sm">重启</CfButton>
          </template>
        </CfBanner>
      </template>
      <template #panel-stack>
        <pre style="margin: 0; padding: 8px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; color: var(--fg-1); background: var(--bg-2); border-radius: var(--r-3); overflow-x: auto;">TypeError: Cannot read property 'foo' of undefined
  at fetchOrders (orders.ts:42:18)
  at handleSubmit (form.ts:18:7)
  at Object.click (button.ts:7:23)
  at HTMLButtonElement.&lt;anonymous&gt; (event.ts:14:9)</pre>
      </template>
      <template #panel-uploader>
        <CfDropzone />
      </template>
      <template #panel-safemode>
        <CfBanner tone="warning" title="进入安全模式将禁用所有插件" description="只保留核心组件，便于排查冲突。" />
        <div style="margin-top: 12px;">
          <CfButton variant="secondary">进入安全模式</CfButton>
        </div>
      </template>
    </CfCrashPane>
  </div>
</template>

<CfCrashPane slots={{...}} />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	first tab id	Active tab
`tabs`	`TemplatePaneTab[]`	preset	Custom tab list
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`

The preset tab id lists are exported as PROTOCOL_TABS / NETWORK_TABS / SQL_TABS and other constants, so you can reuse them when supplying a custom tabs.

The template component is essentially a semantic shell around CfTabs. If you don’t need a predefined tab set, use CfTabs directly.