Log LWC Event Messages using Lightning Logger : Event Monitoring in Salesforce

Hello Trailblazers,

In this post we're going to talk about lightning/logger module. This module can be used to log messages to salesforce event monitoring from your lightning web components. You can log the error messages as well as any kind of interactions that a user is having with your LWC component. Let's see how!

A simple LWC component logging a message using Salesforce Event Monitoring on button click

Before jumping onto the code, I just want to share a one liner about Salesforce Event Monitoring. Event Monitoring is basically a tool (EventLogFile object) in salesforce that you can use to monitor events in your org and keep your data secure. It can track different types of events like: login, logout, web clicks, apex executions, report exports etc. You can also enable event monitoring for your custom LWC components and can use the library to log events in this EventLogFile object. You can learn more about event monitoring in this trailhead module.

Turn on Event Monitoring for LWC

In order to turn on event monitoring for lightning web components, we can go to Setup->Event Monitoring Settings and turn on the switch for Enable Lightning Logger Events as shown below:

Make sure Generate event log files switch is turned on as well.

Note: As per salesforce documentation, This change is available to customers who purchased Salesforce Shield or Salesforce Event Monitoring add-on subscriptions.

Let's begin by creating our LWC component:

eventLogDemo.html

I created a new LWC component named eventLogDemo. The HTML code for the same is provided below:

<template>
    <lightning-button label="Click Me!" onclick={createEventLog}></lightning-button>
</template>

As you can see above, I defined a simple button with label Click Me! and on clicking of this button, I'm calling my createEventLog() method which we're going to define in our js

eventLogDemo.js

import { LightningElement } from 'lwc';
import { log } from 'lightning/logger';

export default class EventLogDemo extends LightningElement {

    createEventLog() {
        log('Click Me button clicked!');
        console.log('Event Log created!');
    }
}

For the js part, first of all, I imported log method from lightning/logger library. Inside our EventLogDemo class, I defined createEventLog() method which we're calling on clicking the button. This method is calling the log method we imported from the module and is passing a string message in the parameter i.e. Click Me button clicked!. After that, we're having a console.log statement as Event Log created! which is the message printed on the console.

eventLogDemo.js-meta.xml

We also did common changes in our meta.xml file to embed this component in our homepage as shown below:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Event Log Demo</masterLabel>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now, it's time to do see this in action. Let's begin!

Demo

I enabled Debug Mode for my user, so that I can see additional console.logs as well along with the one I have in my component. You can do the same by navigating to Setup -> Debug Mode and enabling it for your user as shown below:

I embedded my component on the homepage and as I clicked on the Click Me! button, I received an output as shown below:

If you notice above, as I called log() method from the logger module, a message from client.js is printed on the console (because I have lightning components debug mode enabled). This object has the message as Click Me button clicked! which is the same that I passed in log() method. After this, we have our console.log() message printed as well i.e. Event Log created!.

Now, In order to view our event logs, we can query them using the below query:

SELECT Id, EventType, CreatedDate, LogFileLength, LogDate, ApiVersion, LogFileContentType, Sequence, Interval, LogFile FROM EventLogFile WHERE Interval = 'Hourly' AND EventType = 'LightningLogger'

I've mentioned Interval = 'Hourly' AND EventType = 'LightningLogger' to get only those event logs which are created using our LWC component. The result is provided below:

Note: I'm using a scratch org and it took somewhere about 2 hours for logs to start appearing after I generated them by clicking the button (the interval is Hourly for these). It might not be the same case for a production org (maybe you can check this and let me know in the comments down below). However, in the Event Monitoring Trailhead, it's written that An event log file is generated when an event occurs in your organization and is available to view and download after 24 hours. So you might have to wait more before you can access the event log files. It's also written that - all log files have 1 day data retention, you can increase it to 30 days for enterprise, unlimited and performance edition at an extra cost.

If you want to download this log file, you can do that by calling the API as shown in the LogFile column as: /services/data/v59.0/sobjects/EventLogFile/0AT1y0000053cjXGAQ/LogFile. You can also download the same using Salesforce Event Log File Browser tool.

Note: Salesforce Event Log File Browser is not an official salesforce tool.

Salesforce Event Log File Browser

To use this tool, go to: https://salesforce-elf.herokuapp.com

You can click on Production Login if you're using a developer/production org or Sandbox Login if you're using a sandbox/scratch org. You'll get the OAuth screen as shown below:

Click on Allow. 

You'll land to the below page where you can see all the event logs:

You can filter the results using the dropdowns/picklists present above. As you can see below, I selected the event type as LightningLogger and got the below output:

In the Action column, I have two buttons. I can download the CSV log file or a shell script - which will download the log file to my system. I downloaded the CSV log file and the output for the same is shown below:

If you notice above, the PAGE_URL is /lightning/page/home which specifies that this log is triggered from our homepage as the lwc component is embedded in the homepage and the MESSAGE is: Click Me button clicked! which is the same as we passed to the log() method. The 3 entries here means that I clicked this button (or fired this event) 3 times during the hour for which this log file is generated. We can also pass a js object to our log method which is automatically stringified. The maximum string length is 4096 characters. I modified our js code a little bit to pass an object as shown below:

import { LightningElement } from 'lwc';
import { log } from 'lightning/logger';

export default class EventLogDemo extends LightningElement {

    msg = {
        type: "click",
        action: "Click Me button clicked"
    };

    createEventLog() {
        log(this.msg);
        log('Click Me button clicked!');
        console.log('Event Log created!');
    }
}

As you can see above, I'm passing the msg object to the log() method which consist of two properties: type and action. The type is click and action is Click Me button clicked. As I click the button now, I get two messages from client.js along with my console.log() message as shown below:

This time we have two event logs generated. One is having the message as: "{"type":"click","action":"Click Me button clicked"}" and another one is having the message as "Click Me button clicked!". The log file generated for the same is provided below:

As you can see, this time our whole object is also coming as message in the logs.

This is how, you can log your custom LWC event messages and view them using salesforce event monitoring tool. That's all for this tutorial, I hope you liked it. Let me know your feedback in the comments down below.

Happy Trailblazing!!