SuspenseBoundary & ErrorBoundary

import { SuspenseBoundary } from '@frontend-toolkit-js/components';
 
<SuspenseBoundary
  pendingFallback={<Spinner />}
  errorFallback={<ErrorMessage />}
>
  <UserProfile userId={userId} />
</SuspenseBoundary>;

import { ErrorBoundary } from '@frontend-toolkit-js/components';
 
<ErrorBoundary fallback={<ErrorMessage />}>
  <NonSuspenseWidget />
</ErrorBoundary>;

<SuspenseBoundary
  pendingFallback={<Loading />}
  errorFallback={(error, reset) => (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>다시 시도</button>
    </div>
  )}
>
  <UserProfile userId={userId} />
</SuspenseBoundary>

<SuspenseBoundary
  pendingFallback={<Loading />}
  errorFallback={<ErrorMessage />}
  resetKeys={[userId]}
>
  <UserProfile userId={userId} />
</SuspenseBoundary>

<SuspenseBoundary
  pendingFallback={<Loading />}
  errorFallback={<ErrorMessage />}
  onError={(error, info) => {
    console.error('Error:', error);
    Sentry.captureException(error, { contexts: { react: info } });
  }}
  onReset={() => {
    queryClient.invalidateQueries(['user', userId]);
  }}
>
  <UserProfile userId={userId} />
</SuspenseBoundary>

<SuspenseBoundary pendingFallback={<Spinner />} errorFallback={<ErrorUI />}>
  {/* 메인 콘텐츠 */}
  <MainContent />
 
  {/* 위젯 에러가 전체를 망가뜨리지 않음 */}
  <ErrorBoundary fallback={<WidgetError />}>
    <AsyncWidget />
  </ErrorBoundary>
</SuspenseBoundary>

interface SuspenseBoundaryProps {
  children: ReactNode;
  pendingFallback: ReactNode;
  errorFallback: ReactNode | ((error: Error, reset: () => void) => ReactNode);
  onError?: (error: Error, errorInfo: ErrorInfo) => void;
  onReset?: () => void;
  resetKeys?: unknown[];
}

interface ErrorBoundaryProps {
  children: ReactNode;
  fallback: ReactNode | ((error: Error, reset: () => void) => ReactNode);
  onError?: (error: Error, errorInfo: ErrorInfo) => void;
  onReset?: () => void;
  resetKeys?: unknown[];
}

<SuspenseBoundary pendingFallback={<Spinner />}>

// ReactNode
<SuspenseBoundary errorFallback={<ErrorMessage />}>
 
// 함수형 (에러 + reset)
<SuspenseBoundary
  errorFallback={(error, reset) => (
    <div>
      <p>{error.message}</p>
      <button onClick={reset}>재시도</button>
    </div>
  )}
>

<SuspenseBoundary
  errorFallback={<Error />}
  resetKeys={[userId, postId]}
>

<SuspenseBoundary
  onError={(error, info) => {
    console.error('Error:', error);
    console.error('Component Stack:', info.componentStack);
  }}
>

<SuspenseBoundary
  onReset={() => {
    queryClient.invalidateQueries(['user']);
  }}
>

// resetKeys로 사용자 전환 시 자동 초기화
<SuspenseBoundary resetKeys={[userId]} />
 
// 함수형 fallback에서 캐시 삭제 후 reset
<SuspenseBoundary
  errorFallback={(error, reset) => {
    removeCache(error);
    return <RetryButton onClick={reset} />;
  }}
/>

// 긴 로딩 UI를 직접 children에서 if/else로 분기
{
  loading ? <Spinner /> : error ? <Error /> : <Content />;
}
// → SuspenseBoundary로 감싸서 선언적으로 표현

class ErrorBoundaryImpl extends Component {
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
 
  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    this.props.onError?.(error, errorInfo);
  }
 
  render() {
    if (this.state.error) {
      return this.props.fallback;
    }
    return this.props.children;
  }
}

componentDidUpdate(prevProps) {
  // resetKeys가 변경되면 에러 리셋
  if (hasResetKeysChanged(prevProps.resetKeys, this.props.resetKeys)) {
    this.reset();
  }
}

<SuspenseBoundary
  errorFallback={(error, reset) => {
    error.message;
    //    ^? string
    reset();
    // ^? () => void
  }}
>
  <Component />
</SuspenseBoundary>