Feature Request: Isomorphic logging (browser support)

[flybayer]

Description / Use Case for a Feature

As I've said before, I'm really loving tslog in Blitz apps! But there's one thing I really wish tslog supported, and that is logging in the browser.

Currently I have to be constantly making a cognitive choice between using tslog or console.log based on if I'm in a server or browser context. And this is often since Blitz is a fullstack monolith.

Possible implementation

Provide a separate browser bundle (via package.json browser field) that has a minimal logger without any node.js dependencies. Should be a small as possible for bundle size concerns. Ideally it would accept all the same options, but some of the options would be no-op in the browser.

[terehov]

Thank you very much. It is on my mind for quite some time and you make quite a good suggestion. That is definitely something I would like to add to a 4.0 release. The problem I've been stumbling on is how to provide the same API and access all the meta-information without having V8 in place. That would basically mean, either leaving them undefined, or using some weird hacks like throwing an error and evaluating the string that came out of it.

[flybayer]

I'd personally be fine to have minimal features in the browser (undefined)

[aellerton]

+1!

Here's how I make logging work in the browser in the meantime, in case it's useful for anyone else...

Context: We migrated our code from a different logger that imported a pre-built log instance. I prefer the tslog way -- import then create an instance -- but we've taken the simplest path initially, which was to create a single instance and use that everywhere.

Usage:

import { log } from './log'

and then log.ts is:

import { Logger } from 'tslog'

const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined'

class CheesyBrowserLogger {
  log(level: string, ...elements: any[]) {
    let s = ' '
    if (elements.length && typeof elements[0] === 'string') {
      // special case for the first arg, which is probably a string
      s += elements.shift()
    }
    console.log(`${new Date().toISOString()} ${level}${s}`, elements)
  }
  debug(...elements: any[]) {
    this.log('DEBUG', ...elements)
  }
  info(...elements: any[]) {
    this.log('INFO', ...elements)
  }
  warn(...elements: any[]) {
    this.log('WARN', ...elements)
  }
  error(...elements: any[]) {
    this.log('ERROR', ...elements)
  }
}
export const log = isBrowser ? new CheesyBrowserLogger() : new Logger()

The CheesyBrowserLogger is somewhat embarrassingly over-simplified, but it's almost everything we need. The main thing it misses is a way to set the log level.

I'll put it here in case anyone else finds it useful.

[m5r]

Hey, any update here? I'd love to see this working in the browser

[terehov]

@m5r I am working on it atm. 👍

[terehov]

Good news. V4 @next is out and is isomorphic! It is also completely rewritten, faster and more flexible. Give it a go and let me know what you think. As soon as I have enough feedback, I am going to finish it up as well as the documentation and release it.

• npm i tslog@next

• and run it with node --enable-source-maps or for TypeScript node --enable-source-maps --experimental-specifier-resolution=node --no-warnings --loader ts-node/esm

[aellerton]

Oooohh that's excellent news! Looking forward to checking they out soon!

On Fri., 30 Sep. 2022, 20:52 Eugene Terehov, @.***> wrote:

Good news. V4 @next https://github.com/next is out and is isomorphic! It is also completely rewritten, faster and more flexible. Give it a go and let me know what you think. As soon as I have enough feedback, I am going to finish it up as well as the documentation and release it.

npm i @.***

and run it with node --enable-source-maps or for TypeScript node --enable-source-maps --experimental-specifier-resolution=node --no-warnings --loader ts-node/esm

— Reply to this email directly, view it on GitHub https://github.com/fullstack-build/tslog/issues/88#issuecomment-1263535943, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHMJIXKYBCGGAWAJZLZPGDWA3PALANCNFSM4XRIJZXA . You are receiving this because you commented.Message ID: @.***>

[terehov]

V4 is released now, so I'm going to close this issue. Feel free to open a new one if V4 didn't solve it for you.

Here are the docs: tslog.js.org