LWC Events with Apex

Event Logging for Lightning Web Components (in beta as of the 3.53 release) allows developers to capture LWC component errors and to track the User behaviors that led to them. This article outlines the basic techniques of LWC event logging with SightLane

Note:  We understand that there are multiple ways of doing things in JavaScript.  Please adapt these examples to your own coding standards and styles!

Import SightLane Methods

First, be sure that the component js file includes imports for one or both of the SightLane Event logging methods.  Remember to include the sightlane namespace, as shown below.

import reportEvent from "@salesforce/apex/sightlane.Logging.reportToSightLane";
import reportFailureEvent from "@salesforce/apex/sightlane.Logging.reportFailureToSightLane";

Call Reporting Methods imperatively

Next, use the reporting methods in your code as necessary, passing in a collection of Strings for the logStatements parameter.  use the .then and .catch portions to react locally to the completion of the monitoring Event.

 reportEvent({ monitorName: "My Monitor", logStatements: logStatements })
    .then(() => {
        console.log('sldebug - Event logs successfully sent to SightLane');
    })
    .catch(error => {
        console.error('sldebug - Error reporting Event logs to SightLane:', error);
    });

With just these two simple steps, you can capture errors and other critical data from your custom Lightning Web Components. The use of the reportFailureToSightLane method is not explicitly shown here but follows the same pattern as the reportToSightLane method.

Putting it all Together

The code and screenshot below show one common use of SightLane Event logging from an lwc context.  Of course, there are many different ways to incorporate these calls into your own JavaScript/component code.  Experiment with these techniques to find the best style and standard for your implementation.

import { LightningElement, track } from 'lwc';
import createContact from '@salesforce/apex/ContactController.createContact';

// import SightLane methods
import reportEvent from '@salesforce/apex/sightlane.Logging.reportToSightLane'; 
import reportFailureEvent from '@salesforce/apex/sightlane.Logging.reportFailureToSightLane';

export default class ContactCreator extends LightningElement {
    handleCreateContact() {
    reportEvent({ monitorName: "LWC Apex Event", logStatements: ["One","Two","Three"] })
    .then(() => {
        console.log('Contact Details successfully sent to SightLane');
    })
    .catch(error => {
        console.error('Contact Details Error successfully sent to SightLane:', error);
    });
}

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.  If you'd like an even easier way to do things, check out our article on the lwc-event component article.  SightLane LWC capabilities are just getting started and will continue to grow to help build visibility and responsiveness into every process!