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);
)};

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