ErrorBoundary

이 컴포넌트는 children에 에러가 발생하면 제어할 수 있습니다.

props.fallback

<ErrorBoundary/>의 children에 error가 발생하면 error는 잡히고 fallback이 렌더링됩니다.

import { ErrorBoundary } from '@suspensive/react'
import { useState, useEffect } from 'react'
 
const Example = () => (
  <ErrorBoundary
    fallback={(props) => (
      <>
        <button onClick={props.reset}>Try again</button>
        {props.error.message}
      </>
    )}
  >
    <ErrorAfter4s />
  </ErrorBoundary>
)
 
const ErrorAfter4s = () => {
  const [asyncState, setAsyncState] = useState<{ isError: true; error: Error } | { isError: false; error: null }>({
    isError: false,
    error: null,
  })
 
  useEffect(() => {
    setTimeout(() => {
      setAsyncState({ isError: true, error: { status: 401, message: 'unauthorized' } })
    }, 4000)
  }, [])
 
  if (asyncState.isError) {
    throw asyncState.error
  }
 
  return <>No error</>
}

errorboundary example

<ErrorBoundary/>'의 fallback로 전달할 컴포넌트 정의하기

ErrorBoundaryFallbackProps

<ErrorBoundary/>'의 fallback으로 컴포넌트를 전달하고 싶다면 ErrorBoundaryFallbackProps 타입을 활용해 쉽게 컴포넌트를 선언 할 수 있습니다.

import type { ErrorBoundaryFallbackProps } from '@suspensive/react'
 
const ErrorBoundaryFallback = ({ reset, error }: ErrorBoundaryFallbackProps) => (
  <>
    <button onClick={reset}>reset</button>
    {error.message}
  </>
)
 
const Example = () => (
  <ErrorBoundary fallback={ErrorBoundaryFallback}>
    <ErrorAfter4s />
  </ErrorBoundary>
)

💡

<ErrorBoundary/> fallback props을 prop drilling 없이 사용하기

useErrorBoundaryFallbackProps

error 객체와 reset 메소드을 사용하려는 컴포넌트가 중첩되면 prop drilling을 피할 수 없습니다. 이 때, useErrorBoundaryFallbackProps을 통해, prop drilling 없이 reset 메소드와 error 객체에 접근할 수 있습니다.

import { ErrorBoundary, useErrorBoundaryFallbackProps } from '@suspensive/react'
 
const Nested = () => {
  const { reset, error } = useErrorBoundaryFallbackProps()
 
  return (
    <>
      <button onClick={reset}>Try again</button>
      {error.message}
    </>
  )
}
 
// 여기서 fallbackProp 을 전달할 필요가 없어집니다!
const ErrorBoundaryFallback = () => <Nested />
 
const Example = () => (
  <ErrorBoundary fallback={ErrorBoundaryFallback}>
    <Error />
  </ErrorBoundary>
)

props.resetKeys

<ErrorBoundary/>의 fallback 외부에 있는 컴포넌트가 <ErrorBoundary/>를 reset하려면 resetKeys배열에 resetKey를 할당하면 됩니다. resetKeys는 배열의 하나 이상의 요소가 변경된 경우에만 작동합니다. useEffect의 종속성 배열이 작동하는 방식과 같이 resetKeys로 매 렌더링마다 새 배열을 주입하는 것을 걱정할 필요도 없습니다.

import { ErrorBoundary } from '@suspensive/react'
import { useState, useEffect } from 'react'
 
const Example = () => {
  const [resetKey, setResetKey] = useState(0)
 
  return (
    <>
      <button onClick={() => setResetKey((prev) => prev + 1)}>Try again</button>
      <ErrorBoundary resetKeys={[resetKey]}>
        <ErrorAfter4s />
      </ErrorBoundary>
    </>
  )
}

props.onReset

<ErrorBoundary/>가 reset할 때 먼저 호출되는 callback입니다. @tanstack/react-query와는 아래와 같이 사용할 수 있습니다.

import { ErrorBoundary } from '@suspensive/react'
import { QueryErrorResetBoundary } from '@tanstack/react-query'
 
const Example = () => (
  <QueryErrorResetBoundary>
    {({ reset }) => (
      <ErrorBoundary
        onReset={reset}
        fallback={(props) => (
          <>
            <button onClick={props.reset}>Try again</button>
            {props.error.message}
          </>
        )}
      >
        <Page />
      </ErrorBoundary>
    )}
  </QueryErrorResetBoundary>
)

props.onError

<ErrorBoundary/>가 error를 잡을 때 호출되는 callback입니다.

import { ErrorBoundary } from '@suspensive/react'
 
const logError = (error: Error, info: ErrorInfo) => {
  // ...
}
 
const Example = (
  <ErrorBoundary fallback={ErrorBoundaryFallback} onError={logError}>
    <Error />
  </ErrorBoundary>
)

useErrorBoundary

useErrorBoundary().setError

<ErrorBoundary/>의 children에서 useErrorBoundary().setError을 사용해 throw 없이도 <ErrorBoundary/>에서 Error를 알도록 할 수 있습니다.

import { ErrorBoundary, useErrorBoundary } from '@suspensive/react'
import { useEffect } from 'react'
 
const Example = () => (
  <ErrorBoundary fallback={ErrorBoundaryFallback}>
    <SetErrorAfterFetch />
  </ErrorBoundary>
)
 
const SetErrorAfterFetch = () => {
  const errorBoundary = useErrorBoundary()
 
  useEffect(() => {
    fetchSomething().then(
      (response) => {},
      (error) => errorBoundary.setError(error) // instead of throw inside
    )
  }, [])
 
  return <>...</>
}

withErrorBoundary

🚫

deprecated: wrap.ErrorBoundary().on을 대신 사용하세요

withErrorBoundary를 사용하면 컴포넌트를 <ErrorBoundary/>로 쉽게 래핑할 수 있습니다. 아래와 같이 withErrorBoundary를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다. withErrorBoundary의 두 번째 인자는 children이 없는 <ErrorBoundary/>의 props입니다.

import { withErrorBoundary, useErrorBoundary } from '@suspensive/react'
 
const Example = withErrorBoundary(
  function Component() {
    const errorBoundary = useErrorBoundary()
 
    return <>...</>
  },
  { fallback: ErrorBoundaryFallback }
)

💡

다수의 <ErrorBoundary/>를 제어하기

<ErrorBoundary/>은 <ErrorBoundaryGroup/>과 사용하면 더 강력하게 사용할 수 있습니다. <ErrorBoundaryGroup/>로 다수의 <ErrorBoundary/>를 제어하세요.
자세한 내용은 <ErrorBoundaryGroup/>페이지에서 소개합니다.

<Suspense/><AsyncBoundary/> (deprecated)