Remove "┏ Electron -------------------" console borders

[davestewart]

So a normal console.log() takes up 6 lines (including the blank one):

┏ Electron -------------------

  // output here

┗ ----------------------------

I really, really don't want this! It makes it impossible to do your own debugging code.

Can it be disabled, or can this output be aliased to console.trace() or some other utility function?

I just want to be in control of my own logging, thanks.

[davestewart]

It turns out the interim solution to this is manually editing the file in .electron-vue/dev-runner.js as this comes from a template anyway:

function startElectron () { 
...
  electronProcess.stdout.on('data', data => {
    electronLog(data)
  })
  electronProcess.stderr.on('data', data => {
    electronLog(data, true)
  })
...
}

function electronLog (input, error) {
  if (input) {
    let output = String(input).replace(/(\r?\n)$/, '')
    if (error) {
      output = chalk['red'].bold(output)
    }
    console.log(output)
  }
}

Or you could add some time info like so:

    const time = (new Date()).toString().match(/\d{2}:\d{2}:\d{2}/)
    console.log(`[ ${chalk['dim'](time)} ] ${output}`)

There are probably better logging options out there, but I'm still pretty new to Node and Electron development, so I'm not up on them yet.

[bdsoha]

@davestewart Planning a PR?

[davestewart]

Perhaps if more activity on the thread, or @SimulatedGREG expresses an interest.

[bdsoha]

@davestewart I am very interested because I feel the current log is takes up a lot of screen real-estate.

[gabrielstuff]

I'm thinking about integrating winston: https://github.com/winstonjs/winston.

What you guys think ?

[davestewart]

I really just want something easy and informative.

Do you have any links to something a bit less extensive than the very extensive docs?

[gabrielstuff]

Understood. In the world of node when you are in the logging universe you have to options:

A. Using console.log / error / info B. Using a logger which will allow to have :

• debug
• release
• verbose Log to file or in the output

What you are currently doing is ok. I was just questioning the interest of having a logging formatter

[bdsoha]

I made a Console.js file for this:

const chalk = require('chalk')

function time() {
    const now = new Date().toString().match(/\d{2}:\d{2}:\d{2}/)
    return `[ ${chalk.dim(now)} ]`
}

function source(s) {
    const padding = ' '.repeat((10 - s.length) / 2)
    const padded  = `[${padding}${s.toUpperCase()}${padding}]`
    return chalk.magenta.bold.dim(padded)
}

function log(message, s = 'renderer') {
    console.log(`${time()} ${source(s)} ${message}`)
    return this
}

log.info = function (message, source) {
    return log(chalk.cyan(message), source)
}

log.warn = function (message, source) {
    return log(chalk.orange(message), source)
}

log.error = function (message, source) {
    return log(chalk.red.bold(message), source)
}

log.success = function (message, source) {
    return log(chalk.green(message), source)
}

log.title = function (message) {
    console.log(chalk.bgCyan.bold.black(` ${message} `))
    console.log('\n')
    return this
}

module.exports = log

[davestewart]

@bdsoha - that looks really nice! I got inspired and expanded on yours.

I added the following functionality:

• the module now exports a factory function, so you can create multiple loggers
• each logger has name, fg and bg colors for "tags" (see next line)
• the log output function renders visually-obvious "tags" when a different logger logs
• after a tag, the logger outputs as normal, until the other logger has its turn (and so on)
• logging functions can take multiple args
• multiline output is indented by 4 spaces
• new trace() method which inspects objects using util.inspect

This is what it looks like:

Here's the above screenshot in code:

const logger = require('../../../src/common/utils/logger')
const chalk = require('chalk')

const ren = logger('Renderer', 'red', 'white')
const main = logger('Main', 'green', 'black')
const special = logger('Special', null, '#1791ff')

main('this is a normal log')
main('note that loggers output tags, indicating what is currently logging')

main.success('this is success')
main.info('this is info')
main.warn('this is a warning')
main.error('this is an error')

ren('this is a new logger!')
ren('it made a new tag')

main('this is the old logger again')

const values = ['Note that loggers', 'will log multiple', 'arguments to new lines']
main(...values)

main(`Multiline output
is output as expected
but also indented
`)

main('the main log function also prints objects:')
const obj = { a: 1, b: 2, c: 3 }
main({ obj, chalk })

main.trace('you can also trace with a label', obj)
main('or without:')
main.trace(obj)

special('this is now a new logger!')
special('it has custom hex colors')
special.trace({ yay: 'yay!' })

What does everyone think? (I can post the code of course)

@SimulatedGREG - this could certainly work as the default logger; you could have 3 loggers:

• Electron - setup, build, etc
• Main - the main process
• Renderer - the renderer process

@gabrielstuff - yeah, this is obviously common in other languages too.

Do you need a dedicated log viewer for these?

[bdsoha]

@davestewart I love it. You should share the code and make a PR

[davestewart]

I'm wondering if there's a case for it being an NPM module or whether I just PR it.

Thoughts?

[bdsoha]

PR it, because you want to change the .electron-vue config files

[gabrielstuff]

really nice work.

[davestewart]

@gabrielstuff - thanks! I've switched projects for the last few weeks, but maybe I'll find time this week to do a PR.

I think I might release the logger as a new package. Maybe tagged-logger or something. Unless anyone has any better naming ideas?

[kevinelliott]

I would love this to be included! How can we log right now even without that? When I do console.log in my components I get an error from eslint Unexpected console statement.