ErrorScreen

ErrorScreenコンポーネントはエラーを全画面で表示するためのコンポーネントです。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

以下のように、エラーによってユーザーが操作できない状況や、ユーザーに操作させたくない状況で使用してください。

  • 存在しないページにアクセスした場合
  • ページにアクセスする権限がない場合
  • サービスがメンテナンス中の場合
  • 一定時間操作がなかった場合
  • 予期しないエラーが発生した場合

具体例はエラー別の表示内容に記述しています。

フォームのバリデーションエラーや連携APIの疎通エラーのような一時的なエラーの場合、NotificationBarResponseMessageInformationPanelなどを使用を検討します。詳細はフィードバックの基準を参照してください。

レイアウト

ロゴ、タイトル、メッセージ、リンクを表示できます。

ロゴ

デフォルトでSmartHRのロゴが表示されます。特別な理由がない限り、必ずロゴを表示してください。

タイトル

なぜエラーが発生したのかがわかる文言を設定します。

メッセージ

タイトルに補足が必要な場合、メッセージを設定します。

リンク

エラーになったときにユーザーの助けになるようなページへ誘導できる場合はリンクを表示してください。

必要に応じて別タブで開くオプションも設定します。

エラー別の表示内容

存在しないページにアクセスした場合(404 Not Foundエラー)

存在しないページはにアクセスした原因として、ページ自体が移動・削除された可能性やユーザーがURLを間違えている可能性を提示しましょう。プロダクトのホームへ戻るリンクも表示してください。

ページにアクセスする権限がない場合(403 Forbiddenエラー)

ユーザーがページにアクセスする権限をもっていない場合、プロダクトのホームへ戻るリンクを表示します。必要に応じて、所属企業の担当者(管理者)へ問い合わせるという対応策を提示してください。

サービスがメンテナンス中の場合(503 Service Unavailableエラー)

サービスがメンテナンス中の場合、SmartHRのメンテナンス・障害のお知らせへのリンクを表示してください。お知らせは、別タブで開くように設定してください。

一定時間操作がなかった場合(401 Unauthorizedエラー)

一定の時間、ユーザーが操作しなかった場合、自動でログアウトしたことがわかるメッセージとログインボタンを表示します。ログインボタンを押せば、再ログインできるようにしてください。

「セッションがタイムアウトしました。」は一般的なユーザーには伝わりにくい表現なので「自動でログアウトしました」を推奨します。

予期しないエラーが発生した場合(500 Internal Server Errorエラーなど)

データの閲覧・作成・更新が安全に実行できない状況の場合、予期しないエラーが発生したメッセージを表示してください。

また、このページに記載されていないその他のエラーをまとめて扱う場合にも、以下の表示内容を使用できます。

必要があればプロダクトのホームへ戻るリンクを表示してください。

props

logo
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ロゴ

title
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

コンテンツの上に表示されるタイトル

links
{ label: ReactNode; url: string; target?: string; }[]

コンテンツの下に表示されるアンカー要素のリスト

children
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

表示するコンテンツ

className
string

コンポーネントに適用するクラス名