NPM debugging package

[mxdvl]

In the commercial dev group, a lot of information we work with is invisible, so we rely heavily on the console to debug and test things.

I was wondering if there was any interest in making a debug mode package for accessible for all client-side projects at The Guardian. Initial thoughts would be to have a gu.debug object in localStorage, shaped like so:

{
  all: false, 
  commercial: true,
  contributions: true
  // …
}

And in the code you could console.log("commercial", "😲") → guDebug.commercial("😲").

There is a bit more work required to think about how this would work in practice, but it might also help tag Sentry errors per team, if calls to the console always start with a team identifier?

[mxdvl]

Some of the benefits would be:

• Easier to filter
• Easier to identify visually
• Easier to support via user help
• Could maybe help with Sentry?

[gtrufitt]

+1 though about this before for Dotcom too and I've seen epic or banner code that does some debug logging too. I think the ideal thing for us is to be able to only include debug code in a bundle when required (if it's for PROD debugging for example). We can dynamically import based on localstorage, we don't want to include debug code for users that don't need it

[JamieB-gu]

@alexduf did some work to create a universal logger for us on Apps-Rendering. Depending on where code is running (client/server/CODE/PROD etc.) it provides differing functionality, and prefixes each log message with extra information.

[alexduf]

Yes! I don't know how relevant that is for other projects, but the trick being:

• Having one interface where we define the features of a logger (info debug etc), and use that everywhere in the source code
• Having an implementation of that interface for each use case (running on a server, running in a browser)
• Having Webpack packaging the correct implementation of that interface depending on the context

[JamieB-gu]

@jacobwinch may also be interested in this.