差分

このページの2つのバージョン間の差分を表示します。

--- apricot:app:error [2020/05/09 15:52]
y2sunlight [エラー画面の設定]
+++ apricot:app:error [2020/07/01 13:34] (現在)
tanaka [集約例外コントローラ]
@@ 行 1: / 行 1: @@
-====== Apricot アプリ作成の準備 ======
+====== Apricot エラー画面 ======
- --- //[[http://www.y2sunlight.com|y2sunlight]] 2020-05-06//
+ --- //[[http://www.y2sunlight.com|y2sunlight]] 2020-05-09//
 [[apricot:top|Apricot に戻る]]
@@ 行 11: / 行 11: @@
     * [[apricot:app:top|Apricot アプリ作成の準備]]
     * [[apricot:app:home|Apricot ホーム画面]]
-    * [[apricot:app:error|Apricot エラー画面]]
+    * Apricot エラー画面
     * [[apricot:app:db-model|Apricot データベースとモデル]]
     * [[apricot:app:user-list|Apricot ユーザ一覧画面]]
-    * [[apricot:app:user-edit|Apricot ユーザ編集画面]]
+    * [[apricot:app:user-edit|Apricot ユーザ登録画面]]
     * [[apricot:app:validation|Apricot バリデーション]]
     * [[apricot:app:transaction|Apricot トランザクション]]
-  * [[apricot:ext:top|Apricot 拡張]]
+  * [[apricot:ext:middleware|Apricot 拡張]]
-\\
+アプリのエラー画面を作ります。\\
+エラー画面は集約例外ハンドラー([[basic-library:whoops:2.7|Whoops]])から呼び出されます。
-アプリのエラー画面を作ります。エラー画面は集約例外ハンドラー([[basic-library:whoops:2.7|Whoops]])から呼び出されます。
 ----
@@ 行 51: / 行 50: @@
 ===== 集約例外コントローラ =====
-> TODO:
+集約例外ハンドラーから呼び出されるコントローラを集約例外コントローラと呼びます。whoops.setting.php での設定に従い UncaughtExceptionHandler@render メソッドが実行されてエラー画面を表示します。以下に集約例外コントローラを示します。
 {{fa>folder-open-o}} ** /apricot/app/Exceptions **
@@ 行 85: / 行 85: @@
         // エラー画面を表示する
-        echo render('error.exception', ['status_code'=>$status_code])->commit();
+        render('error.exception', ['status_code'=>$status_code])->commit($status_code);
     }
 }
 </code>
+  * 例外の種類に応じて表示用のステータスコードを設定します。
+    * CSRFエラーなどの TokenMismatchException( トークンエラー )は419( Page Expired )に設定
+    * HttpException( ヘルパー関数 ''abort()'' によるHTTP例外 )はそのステータスコードを使用
+    * その他の例外は 500( Internal Server Error )に設定
+  * ヘルパー関数 render() を呼び出してレスポンスをレンダリングしています
+  * **render(string $view=null, array $variables=[])**
+    - $view : テンプレート名\\ 上例では assets/views/error/exception.blade.php がテンプレートファイルになります
+    - $variables : テンプレート変数の連想配列\\ 上例では $status_codeをテンプレートに渡しています。
+  * commit()メソッドはレンダリングされたHTMLを確定してレスポンスを送信します
 \\
 ===== HTMLテンプレート =====
-> TODO:
+エラー画面のレイアウトは以下の２つのHTMLテンプレートから成っています。
+  * error.layout --- エラー画面共通のレイアウト
+  * error.exception --- 集約例外コントローラが使用する画面内容
+テンプレート error.exception は、error.layout から継承して作成します。
+==== error.layout ====
+以下にエラー画面共通のレイアウト( error.layout )を示します。CSSやJavaScriptも使用せずに出来るだけシンプルなHTMLになっています。
+{{fa>folder-open-o}} ** /apricot/assets/views/error **
+<code php layout.blade.php>
+<!DOCTYPE html>
+<html lang="ja">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>{{__('messages.app.title')}}</title>
+        <!-- Fonts -->
+        <link rel="dns-prefetch" href="//fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
+        <!-- Styles -->
+        <style>
+            html, body {
+                background-color: #fff;
+                color: #636b6f;
+                font-family: 'Nunito', sans-serif;
+                font-weight: 100;
+                height: 100vh;
+                margin: 0;
+            }
+            .full-height {
+                height: 100vh;
+            }
+            .flex-center {
+                align-items: center;
+                display: flex;
+                justify-content: center;
+            }
+            .flex-row {
+                flex-direction: column;
+            }
+            .position-ref {
+                position: relative;
+            }
+            .code {
+                border-right: 2px solid;
+                font-size: 26px;
+                padding: 0 15px 0 15px;
+                text-align: center;
+            }
+            .message {
+                font-size: 18px;
+                text-align: center;
+            }
+            .mb {
+                margin-bottom:1em;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="flex-center position-ref full-height">
+            @yield('content')
+        </div>
+    </body>
+</html>
+</code>
+==== error.exception ====
+以下に集約例外コントローラでレンダリングしているHTMLテンプレート( error.exception )を示します。
+{{fa>folder-open-o}} ** /apricot/assets/views/error **
+<code php exception.blade.php>
+{{-- 親レイアウト --}}
+@extends('error.layout')
+{{-- コンテンツ --}}
+@section('content')
+    @php
+        switch ($status_code) {
+            case 400:
+                $message = 'Bad Request';
+                break;
+            case 401:
+                $message = 'Unauthorized';
+                break;
+            case 403:
+                $message = 'Forbidden';
+                break;
+            case 404:
+                $message = 'Not Found';
+                break;
+            case 405:
+                $message = 'Method Not Allowed';
+                break;
+            case 408:
+                $message = 'Request Timeout';
+                break;
+            case 414:
+                $message = 'URI Too Long';
+                break;
+            case 419:
+                $message = 'Page Expired';
+                break;
+            case 500:
+                $message = 'Internal Server Error';
+                break;
+            case 503:
+                $message = 'Service Unavailable';
+                break;
+            default:
+                $message = 'Error';
+                break;
+        }
+    @endphp
+    <div class="code">{{$status_code}}</div>
+    <div class="message" style="padding: 10px;">{{ $message }}</div>
+@endsection
+</code>
+\\
 ===== テスト実行 =====
-> TODO:
+エラー画面を表示してみましょう。
+.envを以下のように修正してデバッグモードから本番モードに変更します。
+> デバッグモードの時は集約エラーハンドラーは実行されません（その代わりに Whoops提供のPrettyErrorHandlerのデバッグ画面が表示されます ）。
+{{fa>folder-open-o}} ** /apricot **
+<code int .env>
+...
+APP_DEBUG=false
+...
+</code>
+ブラウザ上で以下のURLにアクセスしてみて下さい。
+<code>
+http://localhost/ws2019/apricot/public/users
+</code>
+次の画面が表示されます
+[{{apricot:app:app03.png?nolink}}]
+\\
+テスト後は、.envを元に戻しておいて下さい。
+<code int .env>
+...
+APP_DEBUG=true
+...
+</code>
+\\

Ground Sunlight

ユーザ用ツール

サイト用ツール

差分

ページ用ツール