오류 경계

오류 경계(React Start)

TanStack Start는 TanStack Router의 라우트 수준 오류 경계를 사용합니다.

• 라우터를 통해 모든 라우트의 기본값을 설정합니다
• errorComponent으로 라우트별로 재정의합니다

기본값 구성

// src/router.tsx
import { createRouter, ErrorComponent } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'

export function getRouter() {
  const router = createRouter({
    routeTree,
    // Shown when an error bubbles to the router
    defaultErrorComponent: ({ error, reset }) => (
      <ErrorComponent error={error} />
    ),
  })
  return router
}

라우트별 재정의

// src/routes/posts.$postId.tsx
import { createFileRoute, ErrorComponent } from '@tanstack/react-router'
import type { ErrorComponentProps } from '@tanstack/react-router'

function PostError({ error, reset }: ErrorComponentProps) {
  return <ErrorComponent error={error} />
}

export const Route = createFileRoute('/posts/$postId')({
  component: PostComponent,
  errorComponent: PostError,
})

참고:

• ErrorComponent은 교체할 수 있는 간단한 기본 제공 UI입니다.
• 상태를 수정한 후 라우트 렌더링을 다시 시도하려면 reset()을 호출합니다.
• 포착될 오류를 발생시키려면 beforeLoad/loader을 사용합니다.