[SalesForce] the use of errorCallback lifecycle hook in LWC

I found the documentation of errorCallback here – https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_lifecycle_hooks.

But whatever I am trying to implement does not seem to work properly.

Implemented in parent component and throwing error in child component, But parent component is not able to handle or catch the error.

export default class Parent extends LightningElement {
    errorCallback(error, stack){
        console.log(error, stack);
    }
}

And in child if any error is happening, the standard error is being shown as modal and I am not getting anything in console log.

Best Answer

You can easily test this using a parent component and child component

Lets create a child component as below

child.html

<template>

</template>

child.js

 import { LightningElement } from 'lwc';

  export default class Child extends LightningElement {
    connectedCallback() {
       throw new Error('Whoops!');
  }
}

parent.html

<template>
   <c-child></c-child>
</template>

parent.js

 import { LightningElement } from 'lwc';

 export default class ParentCmp extends LightningElement {

    errorCallback(error, stack){
       throw error;
    }
 }

enter image description here

Related Topic