65 lines
1.7 KiB
Markdown
65 lines
1.7 KiB
Markdown
import { Canvas, Meta, Story } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Title,
|
|
VariantsTable,
|
|
CustomArgsTable,
|
|
VariantRow,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import ErrorBoundary from "./ErrorBoundary";
|
|
import { Tooltip } from "../tooltip";
|
|
|
|
<Meta title="UI/ErrorBoundary" component={ErrorBoundary} />
|
|
|
|
<Title title="ErrorBoundary" suffix="Brief" subtitle="Version 1.0 — Last Update: 17 Aug 2023" />
|
|
|
|
## Definition
|
|
|
|
ErrorBoundary is an element that catches JavaScript errors in their child component tree, log those errors and display a fallback UI.
|
|
|
|
## Structure
|
|
|
|
ErrorBoundary offers a flexible component capable of catching JavaScript errors and displaying it in the UI.
|
|
|
|
<CustomArgsTable of={ErrorBoundary} />
|
|
|
|
<Examples title="ErrorBoundary">
|
|
<Example title="Default">
|
|
<ErrorBoundary message="There is a problem with the App">
|
|
<p>Child Component</p>
|
|
</ErrorBoundary>
|
|
</Example>
|
|
<Example title="With Error">
|
|
<ErrorBoundary message="There is a problem with the App">
|
|
<Tooltip />
|
|
</ErrorBoundary>
|
|
</Example>
|
|
</Examples>
|
|
|
|
<Title offset title="ErrorBoundary" suffix="Variants" />
|
|
|
|
<Canvas>
|
|
<Story
|
|
name="ErrorBoundary"
|
|
args={{
|
|
children: <p class="text-default">Child Component</p>,
|
|
message: "There is a problem with the App",
|
|
}}>
|
|
{({ children, message }) => (
|
|
<VariantsTable titles={["Default"]} columnMinWidth={150}>
|
|
<VariantRow variant="Default">
|
|
<ErrorBoundary message={message}>{children}</ErrorBoundary>
|
|
</VariantRow>
|
|
<VariantRow variant="With Error">
|
|
<ErrorBoundary message={message}>
|
|
<Tooltip />
|
|
</ErrorBoundary>
|
|
</VariantRow>
|
|
</VariantsTable>
|
|
)}
|
|
</Story>
|
|
</Canvas>
|