useErrors

useErrors(options?: UseErrorOptions) · UseErrorsResult

ACUL (Advanced Customization of Universal Login) でエラーの参照と管理を行うための React フックです。 エラーは次の 3 種類に分類されます。

• auth0 — Auth0 または独自のバックエンドから返されるエラー。
• validation — クライアント側のバリデーションによるエラー (例: 無効なフォーム入力) 。
• configuration — 統合設定の誤りや SDK の誤用によって発生するエラー。

​

主な機能

• 統一されたエラーストア — auth0、validation、configuration の各エラーを 1 つのフックから取得できます。
• 柔軟なフィルタリング — 種類、フィールド、またはその両方を組み合わせてエラーを絞り込めます。
• dismiss の制御 — 個別のエラーを削除したり、すべてをまとめてクリアしたりできます。

​

パラメータ

options · UseErrorOptions

フックの任意の設定です。

表示 properties

includeDevErrors · boolean

true の場合、開発時向けのエラー詳細をエラー一覧に含めます。デフォルトは false です。

​

戻り値

UseErrorsResult

以下を含む UseErrorsResult オブジェクト:

• errors — 型 ErrorsResult の完全なエラー一覧。次のヘルパーが含まれます。
  • errors.byType(type, filter?) — エラー種別でフィルタリングし、必要に応じてフィールドでも絞り込めます。
  • errors.byField(field, filter?) — フィールドでフィルタリングし、必要に応じて種別でも絞り込めます。
• hasError — 現在エラーが 1 件でもある場合は true。
• dismiss(id) — ID を指定して特定のエラーを削除します。
• dismissAll() — 追跡中のすべてのエラーをクリアします。

​

対応画面

• useErrors フックは、すべての ACUL 画面で利用できます。

Example

import { useErrors } from "@auth0/auth0-acul-react";

export function SignupForm() {
  const { errors, hasError, dismiss, dismissAll } = useErrors();

  return (
    <div>
      {hasError && (
        <div className="mb-4">
          {errors.byType("auth0").map(err => (
            <div key={err.id} className="text-red-600">
              {err.message}
              <button onClick={() => dismiss(err.id)}>Dismiss</button>
            </div>
          ))}
        </div>
      )}

      <button onClick={dismissAll}>Clear All Errors</button>
    </div>
  );
}

メッセージを表示するだけでなく、フィールドや種類でもフィルタリングできます。

console.log(errors.byType('validation')); // すべての validation エラー
console.log(errors.byType('validation', { field: 'username' })); // 'username' フィールドの validation エラー
console.log(errors.byField('username')); // 'username' フィールドのすべてのエラー
console.log(errors.byField('username', { type: 'auth0' })); // 'username' フィールドの auth0 エラー

​

注記

• useErrors は画面単位のフックではありません。@auth0/auth0-acul-react から直接インポートしてください。
• useErrors はコンポーネントのトップレベルで呼び出してください。条件分岐の中やイベントハンドラー内では呼び出さないでください。
• 開発中は includeDevErrors: true を使って SDK の誤用エラーを表示し、本番環境では無効にしてください。