メインコンテンツへスキップ
​
useErrors(options?: UseErrorOptions)
UseErrorsResult
ACUL (Universal Login の高度なカスタマイズ) でエラーを読み取り、管理するための React フックです。 エラーは次の 3 種類に分類されます。
  • auth0 — Auth0 または独自のバックエンドから返されるエラー。
  • validation — クライアント側のバリデーション (例: 無効なフォーム入力) によるエラー。
  • configuration — 統合設定の誤りや SDK の誤用によって発生するエラー。

​
主な機能

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

​
パラメーター

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

​
戻り値

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 を使用し、本番環境では無効にしてください。