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 + 红色确认）。

src/App.vue vue

<CfCrashPane>
<template #panel-dialog>...</template>
<template #panel-stack>...</template>
</CfCrashPane>

src/App.tsx tsx

<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.

src/App.vue vue

<CfCrashPane>...</CfCrashPane>

src/App.tsx tsx

<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.