Event Logging for Lightning Web Components (first introduced in beta, in the 3.53 release) enables developers to record event data from the internal execution of a custom component. This allows administrators and developers to capture component errors and track the User behaviors that led to them.
If you've read our LWC Events with Apex article, you know how easy it can be to record component behaviors. In this article, we will show you an even easier way to achieve the same outcomes for your visibility. Both of these techniques produce the same results, so the choice is up to you.
| Note: We understand that there are multiple ways of doing things in JavaScript. Please adapt these examples to your own coding standards and styles! |
Embed the lwc-event Component
The first step to accessing the capabilities of SightLane LWC is to embed it into the HTML file of another LWC. In the example below, the lwc event component is embedded into the User Selector component created in the subscriber org. It is commonly placed at the bottom of the HTML, just inside the template tag (though this is not required).
<template>
<article>
<h1>User Selector</h1>
...Other LWC code goes here
</article>
<sightlane-lwc-event monitorname="User Selector Component Event"></sightlane-lwc-event>
</template>
The monitorname parameter is optional and determines the name of the SightLane monitor under which all events will be captured. If the monitorname is determined dynamically, simply leave it out and set it in the code as shown below.
Query the SightLane Component
In your custom component, use a querySelector to access the lwc-event component. This gives you access to the entire initialized component and all its public properties and methods.
handleUserSelect(event) {
const logger = this.template.querySelector('sightlane-lwc-event');
...
}
Use Sightlane Component Methods
The User Selector component now has access to all of the public properties and methods. There is no need to import methods or classes separately. Let's look at how the component methods are used below.
handleUserSelect(event) {
const logger = this.template.querySelector('sightlane-lwc-event');
if (logger) {
logger.setMonitorName('Explicit Name');
logger.reportToSightLane('This is a log message from OtherComponent');
logger.reportFailureToSightLane(['One','Two','Three']);
}
}
setMonitorName is an optional method for determining the SightLane monitor under which these events will be logged. As noted earlier, you can also set this in the embedded lwc-event component parameter in the UserSelector component's HTML file.
To create an Event, call the reportToSightLane method or the reportFailureToSightLane method. Notice that the parameter usage is different in the two methods above. Both methods accept either a single string value or an Array of string values. If you are auditing User behavior, it is a more efficient practice to gather a collection of strings during execution and then report them all at once, at the appropriate time.
Secret Bonus
Keep in mind that because you are now connecting LWC events directly to the SightLane solution platform, they have all the privileges of other SightLane Events. This means you can configure SightLane Responses to notify developers and/or handle User issues. In addition, errors and other Event data are tracked historically and are easy to recall at the right time.
Summary
And that's it (for now)! Gathering Event data and error feedback from your custom LWCs is now easier than ever. SightLane LWC capabilities are just getting started and will continue to grow to help build visibility and responsiveness into every process!