1k-error-handling

エラー処理

OneKey のコードベースにおけるエラー処理のベストプラクティスです。

基本原則

• 失敗する可能性がある非同期処理には、try/catch ブロックを使用します
• 適切なエラーメッセージとフォールバックを用意します
• ローディング状態やエラー状態を扱う必要がある処理には、useAsyncCall フックを使用します
• エラーを黙って握りつぶしてはいけません

クイックリファレンス

基本的な Try/Catch

async function fetchData() {
  try {
    const result = await apiCall();
    return result;
  } catch (error) {
    console.error('Failed to fetch data:', error);
    throw error; // Re-throw if caller needs to handle
  }
}

フォールバック値を使用する場合

async function fetchDataWithFallback() {
  try {
    const result = await apiCall();
    return result;
  } catch (error) {
    console.error('Failed to fetch, using fallback:', error);
    return defaultValue; // Return fallback instead of throwing
  }
}

useAsyncCall フックを使用する場合

import { useAsyncCall } from '@onekeyhq/kit/src/hooks/useAsyncCall';

function MyComponent() {
  const { run, isLoading, error, result } = useAsyncCall(
    async () => {
      return await fetchData();
    },
    {
      onError: (e) => {
        Toast.error({ title: 'Failed to load data' });
      },
    }
  );

  if (error) {
    return <ErrorView error={error} onRetry={run} />;
  }

  return <DataView data={result} loading={isLoading} />;
}

ユーザーに表示するエラー

async function submitForm(data: FormData) {
  try {
    await api.submit(data);
    Toast.success({ title: 'Submitted successfully' });
  } catch (error) {
    // Show user-friendly message
    Toast.error({
      title: 'Submission failed',
      message: getUserFriendlyMessage(error),
    });
    // Log detailed error for debugging
    console.error('Form submission error:', error);
  }
}

アンチパターン

エラーを黙って握りつぶす

// ❌ BAD: Error silently ignored
async function badExample() {
  try {
    await riskyOperation();
  } catch (error) {
    // Nothing here - error lost forever
  }
}

// ✅ GOOD: At minimum, log the error
async function goodExample() {
  try {
    await riskyOperation();
  } catch (error) {
    console.error('Operation failed:', error);
    // Handle appropriately
  }
}

UI にエラー状態がない

// ❌ BAD: No error state
function BadComponent() {
  const { data } = useQuery();
  return <View>{data}</View>; // What if data fetch fails?
}

// ✅ GOOD: Handle all states
function GoodComponent() {
  const { data, isLoading, error } = useQuery();

  if (isLoading) return <Loading />;
  if (error) return <Error error={error} />;
  return <View>{data}</View>;
}

詳細ガイド

包括的なエラー処理のパターンと例については、error-handling.md をご覧ください。

扱うトピック：

• 基本原則
• エラー処理のパターン（try/catch、フォールバック、フック）
• React のエラーバウンダリー
• エラーの種類（ネットワーク、検証、ユーザーに表示するエラー）
• 避けるべきアンチパターン
• エラー処理のチェックリスト

チェックリスト

• すべての非同期処理が try/catch で囲まれている
• デバッグ用にエラーがログに記録されている
• ユーザーにわかりやすいメッセージが表示される
• UI でローディング状態とエラー状態が処理されている
• エラーが黙って握りつぶされない
• 適切な場合は、具体的なエラーの種類を捕捉している

関連スキル

• /1k-coding-patterns - 一般的なコーディングパターンと Promise の処理
• /1k-sentry-analysis - Sentry のエラー分析と修正