LWC

In this article we'll take a look at logging in LWC components and familiarize ourselves with Triton's JS interface.

LWC is a powerful UI framework in use today by organizations of all sizes. LWC provides a wealth of capabilities that extend the platform's user interface and allow developers to create rich visual experiences. However, with great power comes complexity.

It's quite common for LWC-based interfaces to become large and complex. At that point, one needs a little something to help manage the expanding functionality without loosing sanity. As you may have guessed, this is yet another area to leverage Pharos Triton. Let's first examine the basics.

Creating an LWC Logger

The good news is that getting a hold of the Triton logger in LWC is quite easy. The logger component is called triton. To access its capabilities, simply include it in your controller class. Then, create a logger instance inside the connectedCallback() method:

logDemo.js

//Triton logger component
import Triton from 'c/triton';

export default class LogDemo extends LightningElement {

    //instance of the logger 
    tritonLogger;
    
    connectedCallback() {
        //create new logger
        this.tritonLogger = new Triton();
    }
    
    //let's utilize our logger
    handleClick(event) {
        ....
        
        //invoke some action
        someAction({}).then(() => {
        }).catch((error) => {
            //log this exception
            this.tritonLogger.exception(error, null);
        });
        
        ....
    }    
    
    ....
}    
    

Inside Triton.js

If you've already familiarized yourselves with the Apex wrapper and its structure, the LWC version of the logger will look very familiar. Similar to its Apex counterpart, the javascript methods are broken up into 2 categories: buffered and immediate. Similarly, as before, the buffered methods are prefixed with add.

Likewise, you'll recognize the Enums denoting Category, Type, Area and Level. Their structure and usage is identical to their Apex counterparts.

TritonBuilder.js

Similar to the Apex version, the javascript logger also leverages the builder pattern. It's a bit simplified over its Apex twin but retains the core philosophy. In the javascript implementation, the distinction between a log and its builder is very blurred and could be considered non-existent because, at the end of the day, the builder instances are sent directly to the backend for persistence.

By using the internal _makeBuilder() method you are effectively creating the builder and buffering its instance at the same time. All the buffered (add*) logging methods will return an instance of the builder that you can further add properties too within your javascript controller.

Now that we've covered some basics, let's have a look at a more interesting example and combine the LWC logger with its Apex counterpart.