오류 / 권한 / 오프라인

미리보기

로컬 미리보기입니다. 실제 계정, 환경, 실행 데이터에는 영향을 주지 않습니다.

사용법

• 실패 원인과 가능한 다음 단계를 보여줍니다.
• 일시적 요청 실패는 재시도로 이어지고, 연결 끊김은 재연결 후 재시도로 이어집니다. 접근 제한은 접근 복원으로, 잘못된 주소는 목록 탐색으로 이어집니다.
• 초안을 유지하고 캐시된 데이터는 오래된 것으로 표시하세요. 접근을 잃거나 리소스를 찾을 수 없으면 캐시를 비우세요.
• 예시는 InlineMessage, EmptyState, Field, Button, Collapsible, CodeBlock을 결합하고 로컬 Promise를 수동으로 해결합니다. 각 응답을 완료해 모든 복구 상태를 살펴보세요.

• 오류를 빈 결과나 성공으로 만들지 마세요. 복구 액션과 함께 오류를 보여주세요.
• 오프라인 상태만으로 서버 가용성을 추론하지 마세요. 실제 요청으로 확인하세요.
• 권한 없는 데이터나 비밀을 오류 세부 정보, 클립보드, 캐시에 남기지 마세요.
• 취소를 서버 작업의 롤백으로 제시하지 마세요.
• 예시의 접근 복원과 재연결 로컬 시뮬레이션에 의존하지 마세요. 실제 요청, 재시도 횟수, 백오프, 멱등성, 온라인 이벤트, 접근 요청, 서버 권한 검사는 제품이 소유합니다.

구성

Failure/result preview controls → controlled draft Field → state-specific InlineMessage or EmptyState + recovery action → optional cached data with freshness status → safe collapsible diagnostics → outcome announcement

키보드와 접근성

• 상태 선택기가 포커스를 유지합니다. 재시도를 시작하면 포커스가 Cancel로 이동하고, 취소하면 초안 입력으로 돌아갑니다.
• 성공은 결과 heading으로 포커스를 이동시키고, 실패한 재시도는 Retry로 이동시킵니다. 접근 제한은 접근 복원 버튼으로 포커스를 이동시킵니다.
• 접근 복원은 데이터 다시 가져오기 버튼으로 포커스를 이동시키며 즉시 성공으로 간주하지 않습니다.
• 세부 정보 공개와 복사 메시지는 각 프리미티브의 키보드 규칙을 따릅니다.
• 오류는 role=alert을 사용합니다. 진행률과 복구 결과는 status 알림을 사용합니다.

각 컨트롤에 목적을 설명하는 이름을 지정하세요. 오류 메시지를 해당 컨트롤에 연결하고, 상태를 색만으로 알리지 마세요. 자동 검사는 수동 키보드 및 보조 기술 테스트를 대신하지 않습니다.

예시 코드

공유 컴포넌트는 디자인 토큰에서 스타일을 가져옵니다. 각 예시는 자체 구성과 접근성 속성을 설정합니다. 호출하는 화면이 콜백, ref, 제품 데이터를 정의합니다.

import { InlineMessage, Button, EmptyState } from '@surflane/ui'

<InlineMessage.Root tone='danger' role='alert'>
  <InlineMessage.Content>
    <InlineMessage.Title>The request failed</InlineMessage.Title>
    <InlineMessage.Description>
      Your draft is retained.
    </InlineMessage.Description>
    <InlineMessage.Actions>
      <Button onClick={retry}>Retry</Button>
    </InlineMessage.Actions>
  </InlineMessage.Content>
</InlineMessage.Root>

// Request ownership remains in the product:
// guard duplicate starts synchronously; snapshot the draft; use AbortController.
// accept a response only if its identity is still current and not aborted.
// preserve draft on failure/cancel; clear protected caches on permission changes.
// restore meaningful focus and report freshness without implying successful mutation.
// diagnostics must be safe to display/copy and contain no credentials.

주요 API

표는 공통 래퍼의 주요 props를 나열합니다. 전체 타입은 패키지 타입 선언을 참조하세요.

관련 토큰