feat: logs tab

[kobenguyent]

Introducing Logs Modal

closes #130

[netlify]

✅ Deploy Preview for chimerical-kitsune-a0bfa0 ready!

Name	Link
🔨 Latest commit	20d8c7d
🔍 Latest deploy log	https://app.netlify.com/sites/chimerical-kitsune-a0bfa0/deploys/663dd19d749f9000085bf85a
😎 Deploy Preview	https://deploy-preview-137--chimerical-kitsune-a0bfa0.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[flawiddsouza]

I don't know if it's a good idea to have a logs tab on the request panel, when the logs printed there are not specific to the request. The logs tab should probably be in the nav bar. Not sure where exactly it would look good though.

[kobenguyent]

I don't know if it's a good idea to have a logs tab on the request panel, when the logs printed there are not specific to the request. The logs tab should probably be in the nav bar. Not sure where exactly it would look good though.

Moved to NavBar as the proposal!

[flawiddsouza]

Looks good.

Objects are logged as [object Object]

[flawiddsouza]

Not a bad solution:

But it won't work when users log their own objects in scripts and plugins.

args.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : arg) should work better

We really don't want to force people to JSON stringify their log objects.

[flawiddsouza]

There's a bug here. Timestamp never changes for logs in devtools console. That's why it was inside the log function before.

[flawiddsouza]

args will always be an array as I can tell, since it's a spread parameter

function argsMapping(args: any) :any {
    if (Array.isArray(args)) {
        return args.join(' ')
    }
    return args.map((arg: any) => typeof arg === 'object' ? JSON.stringify(arg) : arg)
}

Remove the if condition and do this instead:

return args.map((arg: any) => typeof arg === 'object' ? JSON.stringify(arg, null, 2) : arg).join(' ')

Should work properly then.

Also revert this change, as it won't be required after the above:

[flawiddsouza]

Seems like some extra indentation got added:

You can run: npm run lint-fix, to fix this or remove the indent manually

It's good to have a little indentation in stringified json, so JSON.stringify(arg, null, 2) would be good

[flawiddsouza]

Let's make all log methods have a timestamp prefix when logging to devtools. Same code as what I've highlighted should be placed in every log function. That's the last change I think.

[flawiddsouza]

[flawiddsouza]

[flawiddsouza]

That should be good.

Instead of this:

function interceptConsole(type: LogType): ConsoleMethod {
    return (...args: any[]) => {
        const timestampStyle = 'color: #4CAF50;'
        const logMessage = `%c${getCurrentTimestamp()} - [${type.toUpperCase()}] - %c${argsMapping(args)}`
        const resetStyle = 'color: inherit;'

        originalConsoleMethods[type](logMessage, timestampStyle, resetStyle)
        storeLog(type, args)
    }
}

Let's do this:

function interceptConsole(type: LogType): ConsoleMethod {
    return (...args: any[]) => {
        const timestampStyle = 'color: #4CAF50;'
        const logMessage = `%c${getCurrentTimestamp()} - [${type.toUpperCase()}]%c}`
        const resetStyle = 'color: inherit;'

        originalConsoleMethods[type](logMessage, timestampStyle, resetStyle, ...args)
        storeLog(type, args)
    }
}

There's stuff like arraybuffer which can't be logged well by our arg mapping. Let's let console.method itself handle the args however it wants, so we get the benefits of devtools console. Treating it like text logging removes benefits like collapsing large arrays and so on.

It would've been great if we could've gotten the logs modal to act like how data is logged and displayed in the devtools console.

[flawiddsouza]

I wonder if we can use this: https://github.com/liriliri/luna/blob/master/src/console/README.md to enhance the logging. Just a thought. We can take this up at a later point if you don't have the time to look into this right now.

[kobenguyent]

Well, IMHO, with this iteration, let's just have the logs displayed as simple as it is. Then throughout the next iterations, it's definitely more rooms for improvements.

[flawiddsouza]

Sounds good to me.

Not quite sure where the extra } is coming from in the devtools logs.