ErrorScreen

エラーを全画面で表示するためのプリミティブコンポーネントです。Auth/Forbidden/NotFound/Unauthorized/Unexpectedの各ErrorScreenで実現できない独自のエラー画面を提供するときに使います。

なんらかのエラーによってユーザーが操作できなくなった場合や、ユーザーに操作をさせたくない場合に使用してください。

使用上の注意

全画面でエラーを表示する必要がないエラーには使用しないでください。

フォームのバリデーションエラーや連携APIの疎通エラーのような一時的なエラーの場合は以下のコンポーネントの使用を検討します。

• NotificationBar
• ResponseMessage
• InformationPanel

詳細はフィードバックの基準を参照してください。

レイアウト

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

ロゴ

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

タイトル

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

メッセージ

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

リンク

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

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

ErrorScreenを使用したコンポーネント

頻繁に利用するErrorScreenのパターンを、エラーの種類に応じたコンポーネントとして用意しています。

使い方チェックリスト

ErrorScreen

参照元：使用上の注意 「使用上の注意」の本文へ移動

• Avoid

  全画面でエラーを表示する必要がないエラーには ErrorScreen を使用しない
• Should

  フォームのバリデーションエラーや連携 API の疎通エラーのような一時的なエラーの場合は、NotificationBar / ResponseMessage / InformationPanel の使用を検討する

参照元：レイアウト > ロゴ 「レイアウト > ロゴ」の本文へ移動

• Should

  特別な理由がない限り、ロゴを表示する

参照元：レイアウト > タイトル 「レイアウト > タイトル」の本文へ移動

• Must

  タイトルには、どのようなエラーが発生したのかがわかる文言を設定する

参照元：レイアウト > メッセージ 「レイアウト > メッセージ」の本文へ移動

• Should

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

参照元：レイアウト > リンク 「レイアウト > リンク」の本文へ移動

• Should

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

Props