DEV Community

Cover image for Lessons from open-source: Have you ever used console object like this `console[consoleMethod](‘’)`?
Ramu Narasinga
Ramu Narasinga

Posted on

Lessons from open-source: Have you ever used console object like this `console[consoleMethod](‘’)`?

#javascript #react #opensource #nextjs

This lesson is picked from Next.js source code. In this article, you will learn how to create generic, resuable console methods, how Next.js leverages this way of using console object.

Console

In javascript, console is object that provides access to the debugging console. The following image shows instance methods of console object.

You can find out more about these instance methods in the MDN Docs.

Generic, reusable log.ts file in Next.js source code

build/output/log.ts has the following code:

Practice the exercises based on documentation to become an expert in Next.js

import { bold, green, magenta, red, yellow, white } from '../../lib/picocolors'

export const prefixes = {
  wait: white(bold('○')),
  error: red(bold('⨯')),
  warn: yellow(bold('⚠')),
  ready: '▲', // no color
  info: white(bold(' ')),
  event: green(bold('✓')),
  trace: magenta(bold('»')),
} as const

const LOGGING\_METHOD = {
  log: 'log',
  warn: 'warn',
  error: 'error',
} as const

function prefixedLog(prefixType: keyof typeof prefixes, ...message: any\[\]) {
  if ((message\[0\] === '' || message\[0\] === undefined) && message.length === 1) {
    message.shift()
  }

  const consoleMethod: keyof typeof LOGGING\_METHOD =
    prefixType in LOGGING\_METHOD
      ? LOGGING\_METHOD\[prefixType as keyof typeof LOGGING\_METHOD\]
      : 'log'

  const prefix = prefixes\[prefixType\]
  // If there's no message, don't print the prefix but a new line
  if (message.length === 0) {
    console\[consoleMethod\]('')
  } else {
    console\[consoleMethod\](' ' + prefix, ...message)
  }
}

export function bootstrap(...message: any\[\]) {
  console.log(' ', ...message)
}

export function wait(...message: any\[\]) {
  prefixedLog('wait', ...message)
}

export function error(...message: any\[\]) {
  prefixedLog('error', ...message)
}

export function warn(...message: any\[\]) {
  prefixedLog('warn', ...message)
}

export function ready(...message: any\[\]) {
  prefixedLog('ready', ...message)
}

export function info(...message: any\[\]) {
  prefixedLog('info', ...message)
}

export function event(...message: any\[\]) {
  prefixedLog('event', ...message)
}

export function trace(...message: any\[\]) {
  prefixedLog('trace', ...message)
}

const warnOnceMessages = new Set()
export function warnOnce(...message: any\[\]) {
  if (!warnOnceMessages.has(message\[0\])) {
    warnOnceMessages.add(message.join(' '))

    warn(...message)
  }
}
Enter fullscreen mode Exit fullscreen mode

The important question here is why bother to create such a file when you could just do console.log or console.warn, it is only few letters difference , right?

Look closer. wait, error, warn, ready, info, event, trace call a function named prefixedLog.

prefixedLog 

function prefixedLog(prefixType: keyof typeof prefixes, ...message: any\[\]) {
  if ((message\[0\] === '' || message\[0\] === undefined) && message.length === 1) {
    message.shift()
  }

  const consoleMethod: keyof typeof LOGGING\_METHOD =
    prefixType in LOGGING\_METHOD
      ? LOGGING\_METHOD\[prefixType as keyof typeof LOGGING\_METHOD\]
      : 'log'

  const prefix = prefixes\[prefixType\]
  // If there's no message, don't print the prefix but a new line
  if (message.length === 0) {
    console\[consoleMethod\]('')
  } else {
    console\[consoleMethod\](' ' + prefix, ...message)
  }
}
Enter fullscreen mode Exit fullscreen mode

This function has console object instance method name as the first parameter but the catch here is the “prefix”.

export const prefixes = {
  wait: white(bold('○')),
  error: red(bold('⨯')),
  warn: yellow(bold('⚠')),
  ready: '▲', // no color
  info: white(bold(' ')),
  event: green(bold('✓')),
  trace: magenta(bold('»')),
} as const

const prefix = prefixes\[prefixType\]
Enter fullscreen mode Exit fullscreen mode

prefixes object has some picocolors applied symbol that show up as part of the logs in your terminal.

Because Next.js codebase is large, this is a standard set to follow to stay consistent with the symbols shown when console instance methods such as warn,, error, wait etc., are called.

This file is imported in 62 other files across the codebase.

used across files

Conclusion:

Have you ever used console object like this console[consoleMethod](‘ + prefix, …message’)? I haven’t yet. When I first looked at this log.ts file in next.js source code, my thoughts were “I wouldn’t mind writing console.log or console.warn”. The important question here is why bother to create such a file when you could just do console.log or console.warn, it is only few letters difference, right? the catch is symbols that are prefixed with the console instance methods in this resuable, generic log.ts file.

I found that these methods are reused in 62 files, just to stay consistent with the symbols shown when you call certain methods. These tiny details show the importance of staying consistent across your codebase especially since this is logged to the user terminal, I would be careful too.

Top comments (0)

Read next

prast profile image

Launching a website offline without the Internet using Service Worker (English version)

Ramzan -

borysshulyak profile image

Basic Testing Conventions on my prjects

Boris Shulyak -

prasetyomuhdwi profile image

Setup path aliases in React + Vite + TS Project 🤓

Muhammad_Dwi_Prasetyo -

antoineit profile image

Enhancing Accessibility in Next.js with useFocusOnNavigation Custom Hook

Antoine -