log level formatting in functions emulator and shell

[christophe-g]

This is a follow-up of https://groups.google.com/forum/#!topic/firebase-talk/EVsq7gLkTsE

It would be nice to have better formatting in the shell when using console.log , console.error, ... For instance, colors or prefix to differentiate log levels.

It is of course possible to wrap native console behavior (I am using loglevel and loglevel-plugin-prefix), but applying different colors does not work.

Also, one need to detect it we are running locally from funtions:shell or as deployed function for not duplicating log level indicator and timestamp displayed in the web-based logs viewer.

Thank you,

[samtstern]

@christophe-g thanks for following up on your email! This is a reasonable feature request. I think my personal preference would be for a label over colors (since not everyone uses a colorful terminal) but it's not a strong preference.

[christophe-g]

@samtstern - thanks a lot.

What about smth similar to the web. .

It seems it is kind of already in place. From lib/util.js:

exports.logLabeledSuccess = logLabeledSuccess;
function logBullet(message, type = "info") {
    logger[type](clc.cyan.bold("i "), message);
}
exports.logBullet = logBullet;
function logLabeledBullet(label, message, type = "info") {
    logger[type](clc.cyan.bold(`i  ${label}:`), message);
}
exports.logLabeledBullet = logLabeledBullet;
function logWarning(message, type = "warn") {
    logger[type](clc.yellow.bold(`${WARNING_CHAR} `), message);
}
exports.logWarning = logWarning;
function logLabeledWarning(label, message, type = "warn") {
    logger[type](clc.yellow.bold(`${WARNING_CHAR}  ${label}:`), message);
} 

[ultraGentle]

I like the idea of differentiating via symbols, and I'd further suggest some formatting (example below) to make the logs easy to read:

log 1: blah blah blah
       second line of blah blah blah
       third line of blah
log 2: easy to find b/c of indent
log 3: blah blah blah

vs

log 1: blah blah blah
second line of blah blah blah
a third line line of blah
log 2: less easy to find without indent
log 3: blah blah blah

This is already available in the online (i.e. non-emulated) function logs, in the sense that when you click the arrow to expand the log information, the expanded info stays in its column. In the terminal, there would be no such GUI, so that would presumably have to be built into the formatting.

[ultraGentle]

FYI, here's a StackOverflow question which is related to viewing Firebase emulator logs in browser devtools.

I'm not suggesting that should be answered here, but people who arrive here looking for a richer logging/debugging experience might benefit from whatever information shows up there.

https://stackoverflow.com/questions/59413448/using-node-inspect-to-attach-firebase-emulated-functions-to-browser-devtools

And, if that turns out to be a viable option, it might obviate the need for (some) of the functionality being discussed in this thread being build into the CLI.

[ultraGentle]

Wow, that question was already answered, and is indeed relevant to this issue.

Firebase tools 7.11.0 introduces the ability view logs and debug from browser devtools.

The reason that's relevant to this issue is that devtools differentiate console. log warn etc., and furthermore links to the relevant spot in index.js.

So, for me, at least, this update is sufficient (and most welcome!).

[samtstern]

@abeisgoat do you want to handle this since you're now Logging Czar? We currently use the > prefix for user logs but many people have said it would be more useful to have some sort of [c.log] prefix.

[samtstern]

@ultraGentle @christophe-g we have a new feature related to emulator logging in Alpha that I'd love to get your opinion on.

If you email me at samstern [at] google [dot] com I will invite you to the Alpha! Oh and you'll also need to fill this out (if you never have before): https://services.google.com/fb/forms/firebasealphaprogram/