Showing Apex Error on UI for Lightning WebComponents(lwc)

 Template:

<template>

    <lightning-card title="Showing error From Apex">

        <lightning-button label="Get Contacts" onclick={handleGetContacts}></lightning-button>

        

        <template if:true={error}>

            <c-error-panel errors={error}></c-error-panel>

        </template>

    </lightning-card>

</template>

Js:

   

 import { LightningElement,wire } from 'lwc';

//importing from apex

import srchval from '@salesforce/apex/showErrorMsg.showError';

export default class ShowErrorfromApex extends LightningElement {

    value;

    error;

   //on button click if error displays error on UI

    handleGetContacts() {

        srchval()

        .then(result => {

           console.log(JSON.stringify(result));

        })

        .catch(error => {

            this.error=error;

            console.error(error);

            console.log('error.body.message'+error.body.message);

            console.error('error.body.exceptionType => ' + error.body.exceptionType);

            console.error('error.body.stackTrace => ' + error.body.stackTrace );

             

        });

        

    }

}

Class

public with sharing class showErrorMsg {

    @AuraEnabled

        public static integer showError() {

        system.debug('showErrorfromApextoUI Executing');

            return 10/0;

        }

}

OutPut: