Many time we have use case to add child/grand child component on main component. If we found any error in life cycle events (e.g. connectedCallback, renderedCallback) of child or grand child component, that error should we shown on parent component instead of respective child component.
In lightning web component has excellent feature errorCallback which creates a error boundary. This error boundary captures all errors from its descendent component tree for life cycle events. It will not capture any other events issue like button click handler issue. We can log and show life cycle event error based on our application design.
Sample Code to handle life cycle error
errorCallback handler should be put in parent or container components. This will help us in getting all errors from child or grand child components. We can show errors in UI based on our UI design.
Here is parent or container component code which will catch all child component errors.
Child Component:
Let us take example, we want to include external data library in our component. That external js file should be loaded using renderedCallback. If any error will be thrown while loading js it will catched by parent container.
Here is error which will be thrown by childModule component as we have missed import line for css , scripts and toast.
import { loadScript,loadStyle } from "lightning/platformResourceLoader";
import { ShowToastEvent } from 'lightning/platformShowToastEvent'
