New Release v4.10.2 - Logger LWC Enhancements

[jongpie]

Many thanks to @jefersonchaves for all of the work on this release! This release makes some changes and improvements to logging in lightning components, and provides support for logging in additional lifecycle events that would have previously failed to log.

⚠️ For orgs that are upgrading to this version & that use the logger LWC for logging in Aura/LWC: This release has 2 important changes:

1. The behavior of the getUserSettings() to return a read-only object (in previous versions, this object was modifiable). This change will break any code that previously relied on getUserSettings() to change in-memory settings values. If this negatively impacts your code, please let me know!
2. There is now a new recommended approach for using the logger LWC within your own components. Instead of adding <c-logger> directly in your HTML markup, you should now instead import it in your JavaScript file, using import { createLogger } from 'c/logger';
   • Note: the old approach of adding <c-logger> directly in your HTML markup is still supported (and I have no plans to remove the functionality) - but due to limitations with its approach (namely, it can't be used for logging in all lifecycle events), it is now considered deprecated & is no longer the recommended way to log in JavaScript.

Core Unlocked Package Changes

logger LWC Enhancements

• @jefersonchaves resolved Fail to create logs on wire properties #280 and Ability to capture logs in LWC wire method #483 via PR Logger LWC Enhancements #401 - the logger LWC can now be used to log during all LWC lifecycle events and @wire properties/methods. Please note that this requires updating your own components to use import { createLogger } from 'c/logger';
  • Previously, you would have added <c-logger> to your markup and had something like this in your JavaScript file:

    import { LightningElement } from 'lwc';
    
    export default class SomeExampleComponent extends LightningElement {
        someFunction() {
            const logger = this.template.querySelector('c-logger');
            logger.info('hello, world');
            logger.saveLog();
        }
    }

  • Now, you can remove <c-logger> in your markup, and instead import it in your JavaScript file:

    import { LightningElement } from 'lwc';
    import { createLogger } from 'c/logger';
    
    export default class SomeExampleComponent extends LightningElement {
        logger = createLogger();
        
        someFunction() {
            this.logger.info('hello, world');
            this.logger.saveLog();
        }
    }

  • These lifecycle events have been tested and should work with the new import approach:
    • constructor()
    • connectedCallback()
    • disconnectedCallback()
    • renderedCallback()
    • @wire properties and methods
• Improved the console statements that are generated by Nebula Logger when console logging is enabled via LoggerSettings__c. Now, each log entry created in JavaScript:

  • Includes Nebula Logger as a prefix for any output - this makes it to know which entries in your browser's console were generated by Nebula Logger

    

  • Includes an additional (collapsed) output to provides more details for each entry, including the entry object itself and a JavaScript trace - these additional details can help with troubleshooting issues in your components and understanding which components generated specific entries

    

Recipes Changes

• Updated loggerLWCDemo lwc to use logger LWC's new createLogger function (instead of using <c-logger> in the markup) as the recommended approach for logging in JavaScript
• Added loggerLWCLegacyDemo lwc to continue providing an example of using the now-deprecated (but still-supported) approach of using <c-logger> in markup

Installation Info

Core Unlocked Package - no namespace

Full Changelog: v4.10.1...v4.10.2

• SFDX CLI: sfdx package install --wait 20 --security-type AdminsOnly --package 04t5Y0000023SAGQA2
• Sandbox: https://test.salesforce.com/packaging/installPackage.apexp?p0=04t5Y0000023SAGQA2
• Production: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t5Y0000023SAGQA2

---

This discussion was created from the release Logger LWC Enhancements.