Component Name/ Function in LWC Log Entry are null.

[robferro]

Hello!

I'm testing out the unmanaged package and noticed that when an LWC logs an entry, the Component Name and Function are null. I can find the LWC name buried in the stack trace, but I was wondering if there was a way to populate these fields?

I'm using the import { createLogger } from 'c/logger'; method and below is the snippet that creates the log:

this.logger.error(errMessage); this.logger.saveLog().then(() => { console.log('done with async save'); });

[robferro]

I tried using this method based on the recipe:

const entry = this.logger.error(this.message).setError(someError).addTag('lwc logging demo');

But anytime I add the setError method, the dev console throws an error:

[jongpie]

That sounds great, thanks @robferro. My guess is it's still somehow related to an org setting somewhere under Setup (even though those 2 session settings didn't seem to explain it). If you find any pattern in your orgs, or notice a difference in the format of the stack traces, let me know. I'll also try to continue to reproduce the issue on my side.

[jongpie]

@robferro I realized I haven't posted an updated on this discussion in a while, but there have been some good improvements made with JS stack trace parsing over the last few months:

• In release v4.13.17, I completely rewrote how JS stack trace parsing works - it's now much better overall, and has much better cross-browser support
• Issue JavaScript stack traces can still be inaccurate due to createLogger() being async  #728 was 1 issue not resolved by v4.13.17 - JS stack traces in async functions still don't have fully accurate function names. This is a challenge in JavaScript in general (not an issue specific to Nebula Logger) because some browsers simply don't provide enough details in stack traces generated in async functions
• PR New synchronous JS function getLogger() + deprecated async function createLogger() #775 will help avoid issue JavaScript stack traces can still be inaccurate due to createLogger() being async  #728 - but not directly fix it - by eliminating the need to use await when importing Nebula Logger's component

  • For example, in your comment above the connectedCallback() was async because createLogger() requires it - here's a simplified version of it:

      import { LightningElement } from 'lwc';
      import { createLogger } from 'c/logger';
    
      export default class TestLWC extends LightningElement {
          logger;
    
          async connectedCallback() {
              this.logger = await createLogger();
              this.logger.info('test info entry, after using async & await');
              this.logger.saveLog();
          }
      }

  • Once PR New synchronous JS function getLogger() + deprecated async function createLogger() #775 is merged (hopefully this week), async won't be needed, and the resulting stack traces will be more accurate

        import { LightningElement } from 'lwc';
        import { getLogger } from 'c/logger';
    
        export default class TestLWC extends LightningElement {
            logger = getLogger();
    
            connectedCallback() {
                this.logger.info('test info entry, no await required');
                this.logger.saveLog();
            }
        }

[pcc-ferror]

@jongpie Glad to hear! I'll subscribe to that PR to stay updated. Cheers!

[jongpie]

Alright, another update - I've just published release v4.14.13, which I think finishes addressing all of the open/known issues with LWC logging. There are still some known limitations with logging in async functions (mentioned in the release notes), but I'm not aware of any other issues.

I'm marking this discussion as resolved for now, but we can create new issues/discussions if something else comes up.