Change logLevel at runtime

[erodewald]

It doesn't appear that there is an options object for changing the global configuration of Vue.$log's logLevel. I would like to make it a user-defined option which won't work without that. Any ideas? Or would you accept a PR with that ability?

[justinkames]

Hi there,

You mean specifying the logLevels yourself ? Something like this?

const options = {
    logLevels : ['customA','customB','customC'],
    isEnabled: true,
    logLevel : isProduction ? 'customA' : 'customB',
    stringifyArguments : false,
    showLogLevel : true,
    showMethodName : true,
    separator: '|',
    showConsoleColors: true
};

new Vue({
    data() {
        return {
            a : 'a',
            b : 'b'
        }
    },
    created() {
        this.$log.customA('test', this.a, 123)
        this.$log.customB('test', this.b)
        this.$log.customC('test', this.b)
    }
});

[erodewald]

Not exactly. I am fine with the available log levels, but I'd like to change the logLevel threshold at runtime. If this is not possible I would be happy to figure out how to make it work.

Does this make sense? Maybe this is actually possible, I just don't see any accessors to do this.

// set defaults
const options = {
    isEnabled: true,
    logLevel : isProduction ? 'fatal' : 'debug',
};
Vue.use(log, options);

new Vue({
    created() {
        this.$log.config.logLevel = "fatal"
        this.$log.debug('not shown, because debug is below the desired logLevel threshold')

        this.$log.config.logLevel = "debug"
        this.$log.debug('shown, because debug is at or above the desired logLevel threshold')

        this.$log.config.logLevel = "fatal"
        this.$log.config.enabled = false
        this.$log.fatal('not shown, because logging is disabled')"
    }
});

[justinkames]

Hi @erodewald,

I'm not yet convinced that this would be a desirable feature. Could you explain why?
Loglevels could be changed at many places which could lead to confusion.

Is it not sufficient to set it in the options object ( production/dev ) ?

Thanks!

[erodewald]

@justinkames I've seen other loggers that allow you to modify the "log level" at runtime. It's fine if you disagree with the validity of the use case, I'll just try to explain what I would use it for and if you're interested then we can talk about it more.

1. App initializes with logLevel = "fatal" as a default for everybody
2. Power user / developer wants to see more log output
3. App has a settings panel where they can lower the logLevel threshold so they see more logging
4. Power user changes the logLevel setting, it immediately starts logging output that was previously below the "error" threshold.

The problem I'm perceiving, is that you can only configure those settings upon initialization when you pass it the config object. Can that be done after initialization? If it can be, this issue can be closed.

Thanks for reading.

[tuvokki]

+1 This seems a valid use-case. I'd like to be able to instruct a (power)user to hit some magic button sequence and set the logging to debug. This will allow me to analyze problems with instances of my app running in cordova-based apps.

[justinkames]

@erodewald @tuvokki

Interesting, sounds like a valid use case. I'm going to work on this and get back to you guys when it's implemented. Feel free to submit pull requests as well at any time.

[tuvokki]

Hi Justin,
I have been struggling with this and created a pr with a comment, can you have a look?
#26

[justinkames]

@tuvokki I will, thanks!

[tuvokki]

@justinkames I finally made some time to have another go at this one.
I hope this is the way to go with this. Can you review?

Verified the working code + test.

[pranavkumar389]

@justinkames
This is a very useful feature.
Has this requirement is done?

I was trying like this:

window.logOptions = {
    isEnabled: true,
    logLevel : isProduction ? 'error' : 'debug',
    stringifyArguments : false,
    showLogLevel : true,
    showMethodName : true,
    separator: '|',
    showConsoleColors: true
};

 
Vue.use(VueLogger, window.logOptions); 

[justinkames]

I've been very busy lately. Apologies. I'll review the PR of @tuvokki / implement this feature asap.

[hjelperne]

Hi,
Is there any progress on this issue?
I would love to be able to change the log level at runtime without having to redeploy the entire app.
Great work!

[hjelperne]

It appears @tuvokki has accomplished some sort of ability to:
Vue.$log.changeLogLevel('info') in his commit:
tuvokki@056e6d5

Would it be possible to incorporate this great feature? 🙏🏻

[literakl]

This is a must feature. If there is a bug in a production and I have no idea where it comes from, I would ask a user to open the dev console and turn on more verbose logs.

[tom999]

I solved it by adapt the initialization process:

`
onst vlOptions = {
isEnabled: true,
logLevel: isProduction ? 'info' : 'debug',
stringifyArguments: true,
showLogLevel: true,
showMethodName: true,
separator: '|',
showConsoleColors: true
}

let urlParams = new URLSearchParams(window.location.search);
const newLogLevel = urlParams.get('logLevel')
if (newLogLevel) {
vlOptions.logLevel = newLogLevel;
}

const app = createApp({})
app.use(VueLogger, vlOptions);
const logger = app.config.globalProperties.$log;
`