ANSI Colors in Logs

Get Help and Help Others
1

I’m standing up observability for our app and running into a problem with the colorization and logging. The pino logs msg values have ansi color values like \u001b[35m at the beginning and end of the log message. This would likewise be a problem with any log aggregator that doesn’t support unicode colors and emojis.

Steps to reproduce:

  1. Create a new redwood app yarn create redwood-app --ts ./redwoodblog (per redwoodjs tutorial)
  2. add pino-loki yarn add api pino-loki
  3. Update the logging configuration redwoodblog/api/src/lib/logger.ts 
export const logger = pino(pino.transport({
  target: 'pino-loki',
  options: {
    replaceTimestamp: true,
    batching: true,
    interval: 4,
    host: process.env.LOKI_HOST,
    basicAuth: {
      username: process.env.LOKI_USERNAME,
      password: process.env.LOKI_PASSWORD,
    },
  },
}))
  1. Run the app yarn rw dev. This will open a browser and open the website and log traffic to your grafana instance.

Logs in your grafana instance will have JSON encoding like this:

{"level":30,"time":1674519479307,"pid":23480,"msg":"\u001b[35m/utils\u001b[39m"} 
{"level":30,"time":1674519479307,"pid":23480,"msg":"\u001b[35m/healthz\u001b[39m"} 
{"level":30,"time":1674519479306,"pid":23480,"msg":"\u001b[35m/graphql\u001b[39m"} 
{"level":30,"time":1674519439757,"pid":23303,"msg":"GraphQL endpoint at \u001b[35m/graphql\u001b[39m"} 
{"level":30,"time":1674519439757,"pid":23303,"msg":"API listening on \u001b[35mhttp://localhost:8911/\u001b[39m"}
2

Hey @aubs - I am not familiar with Loki or Grafana (or really pino for that matter), but I am willing to ask questions or search for answers. Hopefully this isn’t a real problem, just a minor config issue, and someone with more knowledge will swoop in and save the day.

It is strange that this has not come up before across the interweb… the only reference I can find is from this SO post and it mentions that Grafana does not support ANSI (which I think is incorrect?) therefore it is suggested to disabling colorizing.

Then, there is this GitHub issue that discusses this in relation to promtail (which I realize you are not using) and cyril offers this note:

I think the problem is that we’re sending JSON to Loki which has to escape those characters.

You’ll need to configure promtail to send the log line instead by unwrapping the json payload.

Change this line helm-charts/charts/promtail/values.yaml at main · grafana/helm-charts · GitHub in your config and replace cri with docker.

So - as far as research, that is basically all I could find. This leads me to hope it is a simple config issue. But - I wonder if you can set colorize: false in the RedwoodLogger options to see if you can disable ANSI colors.

Otherwise - I’m lost on the second idea of sending the long line by unwrapping the json payload. Again, if this is even something we should be trying to do.

If you have any other ideas or thoughts please post back with them.

3

Thanks @PantheRedEye for your help! Your feedback aligns with my understanding as well, that there might be some configuration that I haven’t found. However in my research through the redwoodjs code base, I think this is something that’s missing, but desirable.

I found the colors being handled in @redwoodjs/cli-helpers which delegates to a library called chalk without any configuration flag. It seems like the unicode colors are being added without a config conditional.

I could add the unicode characters to a pino redaction list, but this is a performance overhead that I’d prefer to avoid.

4

Hey - one thing @dthyresson mentioned is that production logging should not output color codes. So, this may not be an issue in production. Try building and running yarn rw serve to test locally. Does that help?

5

Interesting. This is what I see from my production instance. Sorry the steps to repro are misleading (newish to rw). We are running yarn rw deploy render api. Is this equivalent to yarn rw serve?

6

Hey Audrey,

Yes - these two commands should essentially serve the same purpose for testing production logging. Pushing to render should put your api in production mode - and running serve would mimic production locally. It might be worth testing out serve to see if the ansi codes are gone - that may point to an issue with our render deploy settings.

Either way, since you are seeing ansi codes in production - this may be a bug - will you please post it as an issue in github?

-b

7

Thanks it seems like I misinterpreted the logs and it was not logging colors. There was dev instance data in the logs. However it would help to note that there were some logs that were not captured by the default redwoodjs logger, notably the Fastify unhandled route logging was not handled. I handled this with…

console.log = logger.info.bind(logger)
Fastify({ logger: logger })