> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.

# useErrors

<ParamField body="useErrors(options)" type={<span><a href="/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult">UseErrorsResult</a></span>}>
  ACUL (Advanced Customization of Universal Login) におけるエラーを読み取り、管理するための React フックです。
  すべてのバリデーションエラーとサーバー側エラーを対象とし、エラーを次の 3 種類に分類します:

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

  ## Returns

  [`UseErrorsResult`](/docs/ja-JP/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult)

  [UseErrorsResult](/docs/ja-JP/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorsResult) 型のオブジェクトで、次を含みます:

  * `errors` — [ErrorsResult](/docs/ja-JP/libraries/acul/react-sdk/API-Reference/Types/interfaces/ErrorsResult) 型のすべてのエラー一覧で、次のヘルパーを持ちます:
    * `errors.byKind(kind, filter?)` — エラーの種類でフィルターし、必要に応じてフィールドでもフィルターします。
    * `errors.byField(field, filter?)` — フィールドでフィルターし、必要に応じて種類でもフィルターします。
  * `hasError` — 現在エラーが 1 つでもある場合は `true`。
  * `dismiss(id)` — 指定した ID のエラーを削除します。
  * `dismissAll()` — 追跡中のエラーをすべてクリアします。

  一般的な利用シーンは、エラーをリアクティブに表示し、それらを解消する手段を提供する必要があるフォームや画面コンポーネント内です。

  ## Supported Screens

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

  ```tsx Example theme={null}
  import { useErrors } from "@auth0/auth0-acul-react";

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

    return (
      <div>
        {hasError && (
          <div className="mb-4">
            {errors.byKind("server").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>
    );
  }
  ```

  メッセージをレンダリングすることに加えて、フィールドや種類でフィルターすることもできます:

  ```ts theme={null}
  console.log(errors.byKind('client')); // すべての client エラー
  console.log(errors.byKind('client', { field: 'username' })); // field 'username' に対する client エラー
  console.log(errors.byField('username')); // field 'username' に対するすべてのエラー
  console.log(errors.byField('username', { kind: 'server' })); // field 'username' に対する server エラー
  ```

  <Expandable title="パラメーター">
    <ParamField body="options" type={<span><a href='/docs/libraries/acul/react-sdk/API-Reference/Types/interfaces/UseErrorOptions'>[UseErrorOptions]</a> = {}</span>}>
      **プロパティ**

      <ParamField body="includeDevErrors?" type="boolean" />
    </ParamField>
  </Expandable>
</ParamField>