useErrors

useErrors(options?: UseErrorOptions) · UseErrorsResult

ACUL (Universal Login の高度なカスタマイズ) でエラーを読み取り、管理するための React フックです。 エラーは次の 3 種類に分類されます。

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

​

主な機能

• 統一されたエラーストア — 単一のフックから auth0、validation、configuration の各エラーを取得できます。
• 柔軟なフィルタリング — 種類、フィールド、またはその両方を組み合わせてエラーを照会できます。
• dismiss 操作 — 個々のエラーを削除することも、すべてを一度に消去することもできます。

​

パラメーター

options · UseErrorOptions

フックの省略可能な設定です。

表示 プロパティ

includeDevErrors · boolean

true の場合、開発時専用のエラー詳細をエラーリストに含めます。既定値は false です。

​

戻り値

UseErrorsResult

次を含む UseErrorsResult オブジェクトです。

• errors — 型 ErrorsResult の完全なエラーリスト。次のヘルパーを利用できます。
  • errors.byType(type, filter?) — エラーの種類でフィルタリングし、必要に応じてフィールドでも絞り込みます。
  • errors.byField(field, filter?) — フィールドでフィルタリングし、必要に応じて種類でも絞り込みます。
• hasError — 現在いずれかのエラーが存在する場合は 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 はコンポーネントのトップレベルで呼び出してください。条件付きでは呼び出さず、イベントハンドラー内でも呼び出さないでください。
• SDK の誤用によるエラーを検出しやすくするため、開発中は includeDevErrors: true を使用し、本番環境では無効にしてください。