import React, { useState } from 'react';
import { ErrorFallback } from '../ErrorFallback';
import { ErrorBoundary } from '../index';
import AsyncError from '../error/AsyncError';

const UseErrorHandlerExample = () => {
  const [hasError, setHasError] = useState(false);

  const onError = (error) => {
    // 日志上報
    console.log(error);
    setHasError(true);
  };

  const onReset = () => {
    console.log('尝试恢复错误');
    setHasError(false);
  };

  return (
    <ErrorBoundary FallbackComponent={ErrorFallback} onError={onError} onReset={onReset}>
      {!hasError ? <AsyncError /> : null}
    </ErrorBoundary>
  );
};

export default UseErrorHandlerExample;
