LWC - Logs not created when using new createLogger pattern

[shuylern]

When using the newer version of the LWC Logger pattern I am unable to successfully create an Error Log in the Connected Callback cycle. I have included the

import { createLogger } from 'c/logger';

and

logger = createLogger();

This is meant to simulate an error, catch the error, display the LWC error component, and generate a Log.

Everything works except the Log is not created. Does the saveLog() method need something additional?

The Demo recipe works fine but is geared towards User interaction (pushing buttons). I am trying to model what would happen if the LWC completely fails.

connectedCallback() {
        console.log('>>> start of connectedCallback()'); 
        try {
            undefinedVariable.toString();
             this.error = undefined;
             this.bolNoError = true;
        } catch (error) {
            this.bolNoError = false;
            this.error = error;
            this.logger.error('>>> connectedCallback error: ' + JSON.stringify(error));
            console.log(this.logger);
            this.logger.saveLog();
        }        
        console.log('>>> done with connectedCallback()');
    }

[shuylern]

UPDATE

I was able to determine that the saveLog() was actually being executed prior to the logger actually finishing its creation.

I did this on the wire call which returned a forced Error from the Apex controller.

I added a setTimeout method that paused the saveLog() for 2.5 seconds after the logger creation was initiated. This resulted in the Log (error) being created without issue.

I am still interested in knowing if there is a delivered solution that I may have overlooked.

 @wire(returnSomeString)
    wiredReturnSomeString({ error, data }) {        
        if (data) {
            this.logger.info('>>> wire function return value: ' + data);
        } else if (error) {
            console.log('error in Wire');            
            const entry = this.logger.error('stuck here').setError(error).setRecordId(this.recordId).addTags([this.loggerDeleteByTag,'#LWC']);
            this.error = error;
            this.sleep(2500).then(() => { this.saveLogExample() });
        }
    }

saveLogExample() {
        console.log('running saveLog for btn');
        this.logger.setScenario(this.scenario);
        console.log(this.logger);
        //this.logger.saveLog('QUEUEABLE');
        this.logger.saveLog();
    }

    sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

[jongpie]

Hi @shuylern, thanks for doing some investigation on this! It sounds like a bug in the new createLogger() function - adding new entries happens asynchronously, but the saveLog() function runs synchronously, so in lifecycle events like connectedCallback(), saving seems to be problematic. The saveLog() function in logger needs to be enqueued so it runs after adding entries.

I've made a bug for this, #518 - I'll see if there's a quick & effective way to get this resolved in the coming weeks.