このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
apricot:app:error [2020/05/09 15:52] y2sunlight [エラー画面の設定] |
apricot:app:error [2020/07/01 13:34] (現在) tanaka [集約例外コントローラ] |
||
---|---|---|---|
行 1: | 行 1: | ||
- | ====== Apricot | + | ====== Apricot |
- | --- // | + | --- // |
[[apricot: | [[apricot: | ||
行 11: | 行 11: | ||
* [[apricot: | * [[apricot: | ||
* [[apricot: | * [[apricot: | ||
- | * [[apricot: | + | * Apricot エラー画面 |
* [[apricot: | * [[apricot: | ||
* [[apricot: | * [[apricot: | ||
- | * [[apricot: | + | * [[apricot: |
* [[apricot: | * [[apricot: | ||
* [[apricot: | * [[apricot: | ||
- | * [[apricot: | + | * [[apricot: |
- | \\ | + | アプリのエラー画面を作ります。\\ |
- | + | エラー画面は集約例外ハンドラー([[basic-library: | |
- | アプリのエラー画面を作ります。エラー画面は集約例外ハンドラー([[basic-library: | + | |
---- | ---- | ||
行 51: | 行 50: | ||
===== 集約例外コントローラ ===== | ===== 集約例外コントローラ ===== | ||
- | > TODO: | + | |
+ | 集約例外ハンドラーから呼び出されるコントローラを集約例外コントローラと呼びます。whoops.setting.php での設定に従い UncaughtExceptionHandler@render メソッドが実行されてエラー画面を表示します。以下に集約例外コントローラを示します。 | ||
{{fa> | {{fa> | ||
行 85: | 行 85: | ||
// エラー画面を表示する | // エラー画面を表示する | ||
- | | + | render(' |
} | } | ||
} | } | ||
</ | </ | ||
+ | |||
+ | * 例外の種類に応じて表示用のステータスコードを設定します。 | ||
+ | * CSRFエラーなどの TokenMismatchException( トークンエラー )は419( Page Expired )に設定 | ||
+ | * HttpException( ヘルパー関数 '' | ||
+ | * その他の例外は 500( Internal Server Error )に設定 | ||
+ | |||
+ | * ヘルパー関数 render() を呼び出してレスポンスをレンダリングしています | ||
+ | * **render(string $view=null, array $variables=[])** | ||
+ | - $view : テンプレート名\\ 上例では assets/ | ||
+ | - $variables : テンプレート変数の連想配列\\ 上例では $status_codeをテンプレートに渡しています。 | ||
+ | * commit()メソッドはレンダリングされたHTMLを確定してレスポンスを送信します | ||
\\ | \\ | ||
+ | |||
+ | |||
===== HTMLテンプレート ===== | ===== HTMLテンプレート ===== | ||
- | > TODO: | + | |
+ | エラー画面のレイアウトは以下の2つのHTMLテンプレートから成っています。 | ||
+ | |||
+ | * error.layout --- エラー画面共通のレイアウト | ||
+ | * error.exception --- 集約例外コントローラが使用する画面内容 | ||
+ | |||
+ | テンプレート error.exception は、error.layout から継承して作成します。 | ||
+ | |||
+ | |||
+ | ==== error.layout ==== | ||
+ | |||
+ | 以下にエラー画面共通のレイアウト( error.layout )を示します。CSSやJavaScriptも使用せずに出来るだけシンプルなHTMLになっています。 | ||
+ | |||
+ | {{fa>folder-open-o}} ** / | ||
+ | <code php layout.blade.php> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | <meta name=" | ||
+ | |||
+ | < | ||
+ | |||
+ | <!-- Fonts --> | ||
+ | <link rel=" | ||
+ | <link href=" | ||
+ | |||
+ | <!-- Styles --> | ||
+ | < | ||
+ | html, body { | ||
+ | background-color: | ||
+ | color: #636b6f; | ||
+ | font-family: | ||
+ | font-weight: | ||
+ | height: 100vh; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .full-height { | ||
+ | height: 100vh; | ||
+ | } | ||
+ | |||
+ | .flex-center { | ||
+ | align-items: | ||
+ | display: flex; | ||
+ | justify-content: | ||
+ | } | ||
+ | |||
+ | .flex-row { | ||
+ | flex-direction: | ||
+ | } | ||
+ | |||
+ | .position-ref { | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .code { | ||
+ | border-right: | ||
+ | font-size: 26px; | ||
+ | padding: 0 15px 0 15px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .message { | ||
+ | font-size: 18px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .mb { | ||
+ | margin-bottom: | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <div class=" | ||
+ | @yield(' | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ==== error.exception ==== | ||
+ | |||
+ | 以下に集約例外コントローラでレンダリングしているHTMLテンプレート( error.exception )を示します。 | ||
+ | |||
+ | {{fa> | ||
+ | <code php exception.blade.php> | ||
+ | {{-- 親レイアウト --}} | ||
+ | @extends(' | ||
+ | |||
+ | {{-- コンテンツ --}} | ||
+ | @section(' | ||
+ | @php | ||
+ | switch ($status_code) { | ||
+ | case 400: | ||
+ | $message = 'Bad Request'; | ||
+ | break; | ||
+ | case 401: | ||
+ | $message = ' | ||
+ | break; | ||
+ | case 403: | ||
+ | $message = ' | ||
+ | break; | ||
+ | case 404: | ||
+ | $message = 'Not Found'; | ||
+ | break; | ||
+ | case 405: | ||
+ | $message = ' | ||
+ | break; | ||
+ | case 408: | ||
+ | $message = ' | ||
+ | break; | ||
+ | case 414: | ||
+ | $message = 'URI Too Long'; | ||
+ | break; | ||
+ | case 419: | ||
+ | $message = 'Page Expired'; | ||
+ | break; | ||
+ | case 500: | ||
+ | $message = ' | ||
+ | break; | ||
+ | case 503: | ||
+ | $message = ' | ||
+ | break; | ||
+ | default: | ||
+ | $message = ' | ||
+ | break; | ||
+ | } | ||
+ | @endphp | ||
+ | |||
+ | <div class=" | ||
+ | <div class=" | ||
+ | @endsection | ||
+ | </ | ||
+ | |||
+ | \\ | ||
===== テスト実行 ===== | ===== テスト実行 ===== | ||
- | > TODO: | + | |
+ | エラー画面を表示してみましょう。 | ||
+ | |||
+ | .envを以下のように修正してデバッグモードから本番モードに変更します。 | ||
+ | > デバッグモードの時は集約エラーハンドラーは実行されません(その代わりに Whoops提供のPrettyErrorHandlerのデバッグ画面が表示されます )。 | ||
+ | |||
+ | {{fa> | ||
+ | <code int .env> | ||
+ | ... | ||
+ | APP_DEBUG=false | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | ブラウザ上で以下のURLにアクセスしてみて下さい。 | ||
+ | |||
+ | < | ||
+ | http:// | ||
+ | </ | ||
+ | |||
+ | 次の画面が表示されます | ||
+ | [{{apricot: | ||
+ | |||
+ | \\ | ||
+ | |||
+ | テスト後は、.envを元に戻しておいて下さい。 | ||
+ | <code int .env> | ||
+ | ... | ||
+ | APP_DEBUG=true | ||
+ | ... | ||
+ | </ | ||
+ | |||
+ | \\ | ||