2

I am having an root LWC component and nested inner child LWC components structured like below for example.

<c-application>
  <c-header></c-header>
  <c-form-container>
    <c-form>
       <c-form-row>
         <c-input-field></c-input-field>
         <c-input-field></c-input-field>
       </c-form-row>
    </c-form>
  </c-form-container>
</c-application>

I want to log any JavaScript exception or errors happening in any of the LWC component in this nested structure. So instead of adding a try catch in each of LWC component JS file, I have added a errorCallback lifecycle method in root component <c-application> like below:

application.js

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

But the problem here is that whenever an error or exception happens on any of the components that particular component is getting removed from the DOM. Example: if some exception gets thrown in component, then component gets unmounted.

If I remove the errorCallback lifecycle method, then even if exception gets thrown the component does not get removed.

Can any one please suggest how to solve this problem of errorCallback(). Basically I only want to log all the errors or exceptions happening at any component without having to write try catch blocks everywhere, also without removing the component which has error from the DOM.

If there is an alternate way to achieve this without errorCallback method, please suggest that as well..

0

You must log in to answer this question.