エラー画面をカスタマイズする

Last updated
Save as PDF

未処理例外があった場合にモバイルアプリが表示するエラー画面をカスタマイズすることができます。Service Studio内のJSON構成ファイルを編集することによってそれが可能になります。ベストプラクティスに従い、エラー画面は依存関係を最小にする必要があります。そのため、エラー画面ではCSSテーマは適用されません（その代わり、HTMLのhead要素でCSSを使用します）。画像はbase64エンコーディングされています。

エラーページの外観の変更およびメッセージの変更は、いずれもJSONで行います。

エラー画面をカスタマイズするためのJSONを追加または編集するには、以下の手順を実行します。

モジュールのプロパティで、［Advanced］セクションを探し、そこで［Extensibility Configuration］をクリックします。
JSON文字列を追加または編集します。
カスタマイズの対象とするエラーのタイプに、メッセージを入力します。JSONの例およびerrorPage.messagesブロックをご覧ください。キーの説明は、「カスタムエラーJSONの参照テーブル」に記載されています。
clientRuntime.errorPage.cssに、JSONでエラー画面用CSSを入力します。詳細については、「エラーページのHTML構造」および「エラーページ内のCSSセレクタ」をご覧ください。独自のCSSを入力すると、デフォルトのCSSはロードされません。ご注意ください。

エラー画面を構成するためのJSONの例

エラー画面をカスタマイズするには、Extensibility ConfigurationでこのJSON文字列を追加または編集します。

{
    "clientRuntime": {
        "errorPage": {
            "messages": {
                "defaultMessage": "Oops...An unexpected error occurred.:(",
                "screenNotFound": "The screen you're trying to access does not exist.",
                "noDefaultScreen": "There is no home screen defined in the application.",
                "appOffline": "The application is currently offline.Try again later.",
                "incompatibleProducer": "A producer is not compatible with this module."
            },
            "extraMessage": "If you have any questions, try contacting our services at 808 000 888.",
            "reloadLabel": "GO TO HOME SCREEN",
            "css": "body { background-color: red; }"
        }
    }
}

エラーページのHTML構造{ #html-structure-of-the-error-page }

HTMLのエラーページの構造は、以下のようになります。概要を簡略化するため、スタイルおよびJSを削除し、body要素のコンテンツだけを示しています。

<body>
    <div id="error-screen-wrapper">
        <div id="error-screen-message-wrapper">
            <div id="error-screen-message-text">リクエストの処理中にエラーが発生しました</div>
            <button class="error-screen-button" id="error-screen-message-reload-button" style="display: inline;"></button>
            <div id="error-screen-spinner" style="display: none;"></div>
            <div id="error-screen-message-text-extra"></div>
        </div>
        <div id="exception-detail" style="display: none">
            <button class="error-screen-button" id="error-screen-show-detail-button">詳細を表示する</button>
            <div id="exception-detail-text" hidden>
                <div id="error-screen-exception-message"></div>
                <pre id="error-screen-exception-stack"></pre>
            </div>
        </div>
    </div>
</body>

カスタムエラーJSONの参照テーブル

以下は、Service StudioのExtensibility Configurationプロパティでエラー画面をカスタマイズする際に使用可能なJSONキーの参照テーブルです。

プロパティ	目的
clientRuntime.errorPage.messages.defaultMessage	一般的なエラーが発生した場合にエンドユーザーに表示されるメッセージ
clientRuntime.errorPage.messages.screenNotFound	存在しない画面にエンドユーザーが移動しようとした場合に表示されるメッセージ
clientRuntime.errorPage.messages.noDefaultScreen	アプリケーションにデフォルト画面が設定されていない場合に表示されるメッセージ
clientRuntime.errorPage.messages.appOffline	サーバーがオフラインである場合に表示されるメッセージ
clientRuntime.errorPage.messages.incompatibleProducer	アプリケーションが、古くて互換性のないプロデューサモジュールを使用している場合に表示されるメッセージ
clientRuntime.errorPage.extraMessage	>エラー画面に常に表示される追加メッセージ
clientRuntime.errorPage.reloadLabel	アプリケーションのリロードに使用するボタンを表すテキスト
clientRuntime.errorPage.css	エラーページに組み入れるCSS規則。このフィールドが定義されている場合、エラーページにデフォルトのエラースタイルシートは含まれません

エラーページのCSSセレクタ

以下は、カスタムエラーHTMLページ用のCSSセレクタです。

CSS識別子/クラス	HTML Element	インラインCSS	目的
#error-screen-wrapper	div		エラー画面のHTML body全体をラップするコンテナ
#error-screen-message-wrapper	div		ユーザーから見えるコンテンツ（エラーメッセージ、付加情報、リロードボタン）をラップするコンテナ
#error-screen-message-text	div		主エラーメッセージ。前述の構成JSONで定義されたメッセージのうち1つを、エラーの性質に基づいて表示します
.error-screen-button	ボタン		2つのエラー画面ボタン（リロードおよび詳細表示）が使用するクラス
#error-screen-message-reload-button	ボタン	表示：インライン	カスタマイズJSONで定義されたテキストを表示するリロードボタン。このボタンをクリックすると、インラインスタイルが「display: none」に、またスピナーのインラインスタイルが「display: inline-block」に変わります
#error-screen-spinner	div	display: none	リロードをクリックした後に再生されるローディングアニメーション用のコンテナ（デフォルトではスピナーアニメーション）
#error-screen-message-text-extra	div		JSONで定義されている追加メッセージがこのコンテナに表示されます。
#exception-detail	div	display: none	例外メッセージおよびスタックトレース用のラッパーService Centerで［Remote Stack Display］オプションが有効になっている場合にのみ表示されます。
#error-screen-show-detail-button	ボタン		スタックトレースの表示/非表示を切り替えるボタン
#exception-detail-text	div	非表示	例外メッセージおよびスタックトレース用のラッパー
#error-screen-exception-message	div		例外メッセージ
#error-screen-exception-stack	pre		スタックトレース

カスタムエラー画面構成の例

以下にJSONおよびその結果の画面の例を示します。CSSは、CSSキーの値に収まりやすいよう短縮されています。

{
    "clientRuntime": {
        "errorPage": {
            "messages": {
                "defaultMessage": "Oops...An unexpected error occurred.:(",
                "screenNotFound": "The screen you're trying to access does not exist.",
                "noDefaultScreen": "There is no home screen defined in the application.",
                "appOffline": "The application is currently offline.Try again later.",
                "incompatibleProducer": "A producer is not compatible with this module."
            },
            "extraMessage": "If you have any questions, try contacting our services at 808 000 888.",
            "reloadLabel": "GO TO HOME SCREEN",
            "css": "body{background-color:#00465e}#error-screen-wrapper{position:absolute;top:0;left:0;width:100%;height:100%;font-family:Open Sans,Helvetica,Arial,sans-serif;font-size:18px;font-weight:400;color:#fff}#error-screen-message-text:before{content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4i xAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAuIQAALiEBB1v8/wAAABl0RVh0U29mdHdhc mUAcGFpbnQubmV0IDQuMC4xNzNun2MAAASYSURBVGhDzZrbixNXHMfjW60vLbR0c2Z213q tJucksl6WWlEEFaoPQv+BolDvUur/oGBBHwSLolYFqa6IoCKC+tJWXC9QWh+VKquru5lJs tsouzWN098ve466yW8u52Q2yRe+sMm5/T4z5/KbzCbikJdITMt3ZlIFO7Mzb4kTeSZu5xk fdBh/DZ89tIt/M/4c3A+ff3YtsTtvc45tZTetk5NMf+Fa/EcI7rEKWNfQfiDP0gfwQshum 6fhZGq5a4urcFXfUMGZ2rHE9VxHeqUcZupUSPZ0wdW/QAURr/mloS4+Sw4bn3Aeu0mxGQb 5p37QqTFMuVewxrbHtoYG7N7pcBdOU4M1w47F+158JmbIcMw00sU/hivzOzVAU83E3ecd2 U9lWHpCCOjgPtlxCwzT7IE2jNe98oO2uBM1hrPortY0A/pTVEft4ILFz0XaAFyW3kR10E6 GC71Dhksrz1KdsC5GqcbtZf5quDM1W4ZdL4A4TzdsR/PLMuzJgsXdCykH0SDcpU07vZEVG 8iyIBeXrfNKm3eRZVHsWJlVMvx3ApDLVOUwl7773vPKZa/yYkgLBiEqA88877+yV9q2h6w TasZvyvAnlLOyc00SQAWhFBWm2CshlAxhcAYNWWkhMXCn4vuoikGuhVAKg6mDUKrC/EC2C TQTByUGgohHZCUf+0Eo+cH4QighzFZNGMafVc8V2JPnkxV8PLJ6YyCEUi1MKIQSwIyu/Wb SmGHOMbEokbcyW6jCII8dOiJHDZaCiQwBGjt8nBwzyPjYjNPqCFUYZh2YytOpg0DDGj8N2 674lSqM4qgwUWQKgQaG+3h+PKEKozoOmLGfzCHQwJBDkJdUoY4bgWkUAg13pJJwYvolxAQ mDghlXCOx/aQzfvKMDDFc42f6yD5MHcvUQutssaiJrXk92ZeugaHS8GJH60IoxQUjF7v59 os2hVCqzQBMXN1+4Xg3OhDRjUIoNQzD+CnYtdLaKQr67fNETGoExk1CigJ3ZB5VGGQdCNx iddIZE5hhlsnKNJ4/pCpQLi5ZowWh2mnBLP960piBVmk8Cj7sJSsRLsxb5pXv3JPD+os67 KLAlP/40yss+LKura+ZOFCFQI3Yi+boHIxhMEEJYBCMLkQ1ZptziTEhfCdBVfZzFaa/HiZ KFkvBaN8JMIDckOG/k2tnlkIB2cDPtTA6qfj7MCYQ6Jydpd9uwQl5jmoQZAVj8jyBMKYQE OslGXa9oNCGSto/mRZm9ZDfR3Fh9mLy+yBDnC+LXeJzGTYt2Iq/pRq3kx0mtslwgwXPKCe pDtrBbpKfjfxe8XF3N77o+Y3qqJV2GL8zmOz5UIYZTcXuzEdwUN6jOmyFXZb+CyA+keHpa QKmsTQ/FjPebwyhhNMMOmvZmoEp/ov2dApSEXczxpv5NqvkWJktsf3DwPuqvpqzRJ9OXqZ rmV1chGk9Uw47dYLb3esycSVOIOwL+r1W6BRfyWGap1F4KMN3K+C/qeAi+glA7Hc7sgtlt 62V25FaACfuVtcWRyGwW/jAA3dtXAUMf/8L3w1CnduQaR+DM2E7/o9WPGsgkfgfuIXTKdr F2vwAAAAASUVORK5CYII=');display:block;margin-bottom:15px}#error-screen-message-wrapper{position:absolute;top:100px;height:150px!important;width:80%;right:10%;text-align:center}.error-screen-button{margin-top:2em;margin-bottom:2em;color:#5DBDE6;font-size:18px;border:none;background-color:transparent}#error-screen-spinner,#error-screen-spinner:after,#error-screen-spinner:before{border-radius:50%;width:2.5em;height:2.5em;-webkit-animation:load 1.8s infinite ease-in-out;animation:load 1.8s infinite ease-in-out}#error-screen-spinner{color:#fff;font-size:10px;margin:80px auto;position:relative;text-indent:-9999em;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation-delay:-.16s;animation-delay:-.16s}#error-screen-spinner:after,#error-screen-spinner:before{content:'';position:absolute;top:0}#error-screen-spinner:before{left:-3.5em;-webkit-animation-delay:-.32s;animation-delay:-.32s}#error-screen-spinner:after{left:3.5em}@-webkit-keyframes load{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}@keyframes load{0%,100%,80%{box-shadow:0 2.5em 0 -1.3em}40%{box-shadow:0 2.5em 0 0}}"
        }
    }
}

最終的に表示されるエラーページは、このようになります。

Training

Documentation