#ErrorBoundary 错误边界

function Content({ broken }: { broken: boolean }) {
  if (broken) throw new Error('Demo rendering error');
  return <p>内容正常显示。</p>;
}

import { Button, ErrorBoundary, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function ErrorBoundaryBasic() {
  const [broken, setBroken] = useState(false);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setBroken(true)}>
        模拟内容异常
      </Button>
      <ErrorBoundary onReset={() => setBroken(false)}>
        <Content broken={broken} />
      </ErrorBoundary>
    </Space>
  );
}

function Content({ broken }: { broken: boolean }) {
  if (broken) throw new Error('Demo rendering error');
  return <span>备用界面只替换出错的区块。</span>;
}

import { Alert, Button, ErrorBoundary, Space } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function ErrorBoundaryCustom() {
  const [broken, setBroken] = useState(false);
  return (
    <Space direction="vertical" align="stretch">
      <Button variant="outline" onClick={() => setBroken(true)}>
        测试备用界面
      </Button>
      <ErrorBoundary
        fallback={({ reset }) => (
          <Alert
            title="此区块不可用"
            description={
              <Button size="sm" variant="ghost" onClick={reset}>
                再次尝试
              </Button>
            }
          />
        )}
        onReset={() => setBroken(false)}
        resetKeys={[broken]}
      >
        <Content broken={broken} />
      </ErrorBoundary>
    </Space>
  );
}