What is the use of errorCallback lifecycle hook in LWC?

Question

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.

Answer 1

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

Answer 2

As the document the above example states errorCallback() captures errors in all the child components in its tree during one of their lifecycle hooks. So you can use to catch those errors and may be show a generic message/toast