Introduction
The errorCallback() lifecycle hook is invoked whenever an unhandled error occurs in the component itself or any child component within its tree.
It allows developers to capture the error details, log them, and display user-friendly error messages or alternative content.
Key Roles
1. Error Handling:
Intercept runtime errors to prevent them from crashing the application.
2. Graceful Degradation:
Provide fallback UI or messages when an error occurs.
3. Error Logging:
Record error details for debugging and monitoring purposes.
Properties of errorCallback()
1. Error Context
The errorCallback() method receives two parameters:
- error: The actual error object containing details about the exception.
- stack: The stack trace string, which helps identify where the error originated.
2. Catches Errors from the Component Tree:
It captures errors from:
- The current component.
- Any child components rendered within it.
3. No Automatic UI Updates:
This hook does not automatically update the UI; you must explicitly handle it (e.g., by displaying an error message).
When to Use errorCallback()
1. Error Logging:
Send error details to an external logging service for tracking and debugging.
2. Fallback Content:
Show a meaningful message or alternative content when an error occurs.
3. User Notifications:
Alert users about the error in a user-friendly way without exposing technical details.
Best Practices for errorCallback()
1. Avoid Exposing Sensitive Details:
Do not display raw error details to users. Instead, show a generic message.
2.Log Errors for Debugging:
Use an external service or logging mechanism to track and resolve issues.
3.Provide User Feedback:
Let users know that an issue occurred and offer actionable steps, if possible.
4.Handle Errors Gracefully:
Always aim to provide a seamless experience, even when errors happen.
Key Takeaways
- The errorCallback() hook captures unhandled errors from the component and its child components.
- Use it to log errors, show fallback UI, and prevent application crashes.
- Implement user-friendly error messages and avoid exposing technical details.
By using errorCallback() effectively, you can ensure that your Salesforce applications are robust and capable of handling unexpected issues gracefully.
Explore the post below to learn about the five different lifecycle hooks in LWC.
Example of errorCallback()
Here’s a simple example demonstrating how to use errorCallback() to handle and log errors:
HTML File (errorCallbackDemo.html):
<template>
<div>
<h1 id="error-callback-demo" class="rb-heading-index-18">Error Callback Demo</h1>
<template if:true={hasError}>
<p class="error-message">Something went wrong! Please try again later.</p>
</template>
<template if:false={hasError}>
<c-child-component></c-child-component>
</template>
</div>
</template>
JavaScript File (errorCallbackDemo.js):
import { LightningElement } from 'lwc';
export default class ErrorCallbackDemo extends LightningElement {
hasError = false;
errorCallback(error, stack) {
console.error('Error occurred:', error);
console.error('Stack trace:', stack);
// Display fallback UI
this.hasError = true;
// Log error to an external service
this.logErrorToService(error, stack);
}
logErrorToService(error, stack) {
// Simulate logging the error
console.log('Logging error to service:', { error, stack });
}
}
Child Component (childComponent.js):
import { LightningElement } from 'lwc';
export default class ChildComponent extends LightningElement {
connectedCallback() {
// Simulate an error
throw new Error('An error occurred in the child component!');
}
}
Checkout below posts to explore other Lifecycle hooks in LWC in detail
