Lightning Web Components開発で必須のツール

Lightning Web Componentsで開発をするために必須のツールを紹介します。

Lightning Web Componentsは、Apexクラスとやりとりをします。やりとりをするときにエラーが発生するのはよくあります。

そのエラーの内容を調査するためには、以下の方法があります。

  • ChromeのDevToolsで、ソースにブレークポイントを設定してエラーの内容を見る
  • Salesforceのデバッグログを仕掛けて内容を確認する

どちらも有効な方法ではありますが、以下の問題があります。

  • めんどくさい
  • 運用中にエラーが出ると対応が大変

そこで、エラーをダイアログで表示するコンポーネントを準備します。

エラーを表示するダイアログコンポーネントの作成

まずは、ErrorDialog.jsです。

import { LightningElement, track, api } from 'lwc';

export default class ErrorDialog extends LightningElement {
    /**
     * メッセージ
     */
    @track message;

    /**
     * メッセージ表示
     */
    @api show(message) {
        this.message = message;
        this.isShow = true;
    }

    /**
     * Apexエラーメッセージ表示
     */
    @api showApexError(body) {
        let msg = 'サーバーでエラーが発生しました';
        msg += '\r\n';
        msg += body.exceptionType + '\r\n';
        msg += body.message + '\r\n';
        msg += body.stackTrace + '\r\n';
    
        this.show(msg);
    }

    /**
     * 表示フラグ
     */
    @track isShow = false;

    handleOKClick() {
        this.isShow = false;
    }
}

次に、ErrorDialog.htmlです。

<template>
    <template if:true={isShow}>
        <div class="demo-only" style="height:24rem">
            <section role="alertdialog" tabindex="0" aria-labelledby="prompt-heading-id" aria-describedby="prompt-message-wrapper" class="slds-modal slds-fade-in-open slds-modal_prompt" aria-modal="true">
                <div class="slds-modal__container">
                    <header class="slds-modal__header slds-theme_error">
                        <h2 class="slds-text-heading_medium" id="prompt-heading-id">エラー</h2>
                    </header>
                    <div class="slds-modal__content slds-p-around_medium prompt-message" id="prompt-message-wrapper">
                        <div class="slds-grid slds-gutters">
                            <div class="slds-col slds-size_1-of-3">
                                <lightning-icon icon-name="action:close" size="small"></lightning-icon>
                            </div>
                            <div class="slds-col slds-size_2-of-3">
                                {message}
                            </div>
                        </div>
                    </div>
                    <footer class="slds-modal__footer slds-theme_default">
                        <lightning-button label="OK" variant="brand" onclick={handleOKClick}></lightning-button>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </div>
    </template>
</template>

Lightning Web Componentに仕掛ける

ApexクラスとやりとりをするLightning Web Componentsに仕掛けます。

ますは、HTMLファイルのtemplateの中に以下を追加します。

<c-error-dialog></c-error-dialog>

Apexクラスでやりとりするところに、エラーダイアログが表示されるように仕掛けます。これは運用中も有効なので、削除する必要はありません。

ApexMethod()
.then((result) => {
    // 成功時の処理
})
.catch((err) => {
    // エラーダイアログを表示する
    this.template.querySelector('c-error-dialog').showApexError(err.body);
)};

これでこのようなエラーメッセージが表示されます。