Ground Sunlight

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== Apricot エラー画面 ======
 --- //[[http://www.y2sunlight.com|y2sunlight]] 2020-05-09//

[[apricot:top|Apricot に戻る]]

関連記事
  * [[apricot:configuration|Apricot プロジェクトの作成]]
  * [[apricot:public|Apricot 公開フォルダ]]
  * [[apricot:core:top|Apricot コア]]
  * Apricot アプリ
    * [[apricot:app:top|Apricot アプリ作成の準備]]
    * [[apricot:app:home|Apricot ホーム画面]]
    * Apricot エラー画面
    * [[apricot:app:db-model|Apricot データベースとモデル]]
    * [[apricot:app:user-list|Apricot ユーザ一覧画面]]
    * [[apricot:app:user-edit|Apricot ユーザ登録画面]]
    * [[apricot:app:validation|Apricot バリデーション]]
    * [[apricot:app:transaction|Apricot トランザクション]]
  * [[apricot:ext:middleware|Apricot 拡張]]

アプリのエラー画面を作ります。\\ 
エラー画面は集約例外ハンドラー([[basic-library:whoops:2.7|Whoops]])から呼び出されます。

----

===== エラー画面の設定 =====

エラー画面を表示するアクションメソッドは通常の(リクエストルータ経由の)アクションとは異なり、集約例外ハンドラーから呼び出されます。このアクションメソッドの設定は以下の設定ファイルで行います。
これは既に[[apricot:core:basic-class|各種コアクラス]]の[[apricot:core:basic-class#集約例外ハンドラー|集約エラーハンドラ]]の項で説明済ですが、念のため以下に再掲しておきます。

=== 設定ファイル ===

{{fa>folder-open-o}} ** /apricot/config/setting **
<code php whoops.setting.php>
<?php
return
[
    'debug' => env('APP_DEBUG',false),
    'controller' => \App\Exceptions\UncaughtExceptionHandler::class,
    'action' => 'render',
];
</code>

  * debug --- デバッグモード(既定値は 環境変数APP_DEBUGの値)
  * controller --- 本番用エラー画面のコントローラクラス
  * action --- 本番用エラー画面のアクションメソッド

\\


===== 集約例外コントローラ =====

集約例外ハンドラーから呼び出されるコントローラを集約例外コントローラと呼びます。whoops.setting.php での設定に従い UncaughtExceptionHandler@render メソッドが実行されてエラー画面を表示します。以下に集約例外コントローラを示します。

{{fa>folder-open-o}} ** /apricot/app/Exceptions **
<code php UncaughtExceptionHandler.php>
<?php
namespace App\Exceptions;

/**
 * Uncaught Exception Handler
 */
class UncaughtExceptionHandler
{
    /**
     * Render uncaught exception
     * @param \Throwable $exception
     */
    public function render(\Throwable $exception)
    {
        if ($exception instanceof \Core\Exceptions\TokenMismatchException)
        {
            // CSRFエラーなどのトークンエラーは419(Page Expired)
            $status_code = 419;
        }
        elseif ($exception instanceof \Core\Exceptions\HttpException)
        {
            $status_code = $exception->getStatusCode();
        }
        else
        {
            // その他のエラーは500(Internal Server Error)
            $status_code = 500;
        }

        // エラー画面を表示する
        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テンプレート =====

エラー画面のレイアウトは以下の２つの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>

\\

===== テスト実行 =====

エラー画面を表示してみましょう。

.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

ユーザ用ツール

サイト用ツール

ページ用ツール
