Don't colorize logs on mobile since logcat and the xcode console can'…

…t display ansi strings properly (#2532)

* Don't colorize logs on mobile since logcat and the xcode console can't display ansi strings properly

* Make these tests deterministic

packages/desktop/package.json

@@ -117,8 +117,8 @@
  "postBuild": "node scripts/postBuild.js",
  "prestart": "npm run build:main",
  "start": "cross-env DEBUG='backend*,quiet*,state-manager*,desktop*,utils*,identity*,common*,libp2p:websockets:listener:backend,libp2p:connection-manager:auto-dialler' npm run start:renderer",
- "start:main": "cross-env NODE_ENV=development electron .",
- "start:renderer": "cross-env NODE_ENV=development webpack-dev-server --config webpack/webpack.config.renderer.dev.js",
+ "start:main": "cross-env COLORIZE=true NODE_ENV=development electron .",
+ "start:renderer": "cross-env COLORIZE=true NODE_ENV=development webpack-dev-server --config webpack/webpack.config.renderer.dev.js",
  "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6006",
  "build-storybook": "export NODE_OPTIONS=--openssl-legacy-provider && build-storybook",
  "chromatic": "npx chromatic --exit-zero-on-changes=false",

packages/desktop/scripts/setMainEnvs.js

@@ -2,7 +2,8 @@ const fs = require('fs')
 const path = require('path')
 
 const envs = JSON.stringify({
- TEST_MODE: process.env.TEST_MODE
+ TEST_MODE: process.env.TEST_MODE,
+ COLORIZE: true
 })
 console.log('Saving extra envs for main process:', envs)
 fs.writeFileSync(path.join('mainEnvs.json'), envs)

packages/desktop/webpack/webpack.config.renderer.prod.js

@@ -59,7 +59,8 @@ module.exports = {
  filename: 'splash.html'
  }),
  new webpack.EnvironmentPlugin({
- TEST_MODE: process.env.TEST_MODE
+ TEST_MODE: process.env.TEST_MODE,
+ COLORIZE: true
  }),
  new WebpackOnBuildPlugin(async () => {
  await new Promise((resolve, reject) => {

packages/logger/src/index.ts

@@ -4,6 +4,8 @@ import { DateTime } from 'luxon'
 
 const colors = require('ansi-colors')
 
+const COLORIZE = process.env['COLORIZE'] === 'true'
+
 /**
  * Available log levels
  */
@@ -214,8 +216,8 @@ export class QuietLogger {
  */
  private formatLog(level: LogLevel, message: any, ...optionalParams: any[]): string[] {
  const formattedMessage = this.formatMessage(message, level)
- const colorizedOptionalParams = optionalParams.map((param: any) => this.formatObject(param))
- return [formattedMessage, ...colorizedOptionalParams]
+ const formattedOptionalParams = optionalParams.map((param: any) => this.formatObject(param))
+ return [formattedMessage, ...formattedOptionalParams]
  }
 
  /**
@@ -226,12 +228,30 @@ export class QuietLogger {
  * @returns A colorized log string
  */
  private formatMessage(message: any, level: string): string {
- const colorizedLevel = colors[level](level.toUpperCase())
- const colorizedScope = colors['scope'](this.name)
- const colorizedDate = colors['date'](DateTime.utc().toISO())
- const colorizedMessageText =
- typeof message === 'string' ? colors[`${level}_text`](message) : this.formatObject(message)
- return `${colorizedDate} ${colorizedLevel} ${colorizedScope} ${colorizedMessageText}`
+ let formattedLevel = level.toUpperCase()
+ let scope = this.name
+ let date = DateTime.utc().toISO()
+ const formattedMessage = this.formatMessageText(message, level)
+
+ if (COLORIZE) {
+ formattedLevel = colors[level](formattedLevel)
+ scope = colors['scope'](scope)
+ date = colors['date'](date)
+ }
+
+ return `${date} ${formattedLevel} ${scope} ${formattedMessage}`
+ }
+
+ private formatMessageText(message: any, level: string): string {
+ if (['string', 'number', 'boolean', 'bigint'].includes(typeof message)) {
+ let formattedMessageText = message
+ if (COLORIZE) {
+ formattedMessageText = colors[`${level}_text`](message)
+ }
+ return formattedMessageText
+ }
+
+ return this.formatObject(message, level)
  }
 
  /**
@@ -243,13 +263,22 @@ export class QuietLogger {
  * @param param Object to format
  * @returns Colorized string
  */
- private formatObject(param: any): string {
+ private formatObject(param: any, overrideColorKey: string | undefined = undefined): string {
  if (param instanceof Error) {
- return colors['object_error'](param.stack || `${param.name}: ${param.message}`)
+ let formattedError = param.stack || `${param.name}: ${param.message}`
+ if (COLORIZE) {
+ formattedError = colors[overrideColorKey || 'object_error'](formattedError)
+ }
+ return formattedError
  } else if (['string', 'number', 'boolean', 'bigint'].includes(typeof param)) {
- return colors['object'](param)
+ return COLORIZE ? colors[overrideColorKey || 'object'](param) : param
+ }
+
+ let formattedObject = JSON.stringify(param, null, 2)
+ if (COLORIZE) {
+ formattedObject = colors[overrideColorKey || 'object'](formattedObject)
  }
- return colors['object'](JSON.stringify(param, null, 2))
+ return formattedObject
  }
 }
 

packages/mobile/.env.development

@@ -1,3 +1,4 @@
 # Node environment
 NODE_ENV=development
 SHOULD_RUN_BACKEND_WORKER=true
+COLORIZE=false

packages/mobile/.env.e2e

@@ -1,3 +1,4 @@
 # Node environment
 NODE_ENV=e2e
 SHOULD_RUN_BACKEND_WORKER=true
+COLORIZE=false

packages/mobile/.env.production

@@ -1,3 +1,4 @@
 # Node environment
 NODE_ENV=production
 SHOULD_RUN_BACKEND_WORKER=true
+COLORIZE=false

packages/mobile/.env.staging

@@ -1,3 +1,4 @@
 # Node environment
 NODE_ENV=staging
 SHOULD_RUN_BACKEND_WORKER=true
+COLORIZE=false

packages/mobile/.env.storybook

@@ -1,3 +1,4 @@
 # Node environment
 NODE_ENV=storybook
 SHOULD_RUN_BACKEND_WORKER=false
+COLORIZE=false

packages/mobile/package.json

@@ -8,7 +8,7 @@
  "android": "ENVFILE=.env.development react-native run-android --mode=standardDebug --appIdSuffix=debug",
  "ios": "ENVFILE=.env.development react-native run-ios",
  "start": "react-native start",
- "test": "jest --testPathIgnorePatterns=\"./e2e\"",
+ "test": "jest --testPathIgnorePatterns=\"./e2e\" --",
  "lint:no-fix": "eslint --ext .jsx,.js,.ts,.tsx ./src/",
  "lint": "npm run lint:no-fix -- --fix",
  "lint-ci": "npm run lint:no-fix",

packages/mobile/src/utils/functions/formatMessageDisplayDate/formatMessageDisplayDate.test.ts

@@ -4,17 +4,17 @@ import { formatMessageDisplayDate } from './formatMessageDisplayDate'
 
 describe('Channel List Message date display', () => {
  it('timestamp in the current day is rendered as a localized time', () => {
- const messageDateTime = Date.now() / 1000 - 21600 // Minus 6 hours
+ const messageDateTime = DateTime.now().toSeconds() - 1
  const formattedMessageDate = formatMessageDisplayDate(messageDateTime)
  expect(formattedMessageDate).toEqual(DateTime.fromSeconds(messageDateTime).toLocaleString(DateTime.TIME_SIMPLE))
  })
- it('timestamp in the previous day is rendered as Yeseterday', () => {
- const messageDateTime = Date.now() / 1000 - 108000 // Minus 30 hours
+ it('timestamp in the previous day is rendered as Yesterday', () => {
+ const messageDateTime = DateTime.now().minus({ days: 1 }).toSeconds()
  const formattedMessageDate = formatMessageDisplayDate(messageDateTime)
  expect(formattedMessageDate).toEqual('Yesterday')
  })
  it('timestamp before the previous day is rendered as a localized date and time', () => {
- const messageDateTime = Date.now() / 1000 - 194400 // Minus 54 hours
+ const messageDateTime = DateTime.now().minus({ days: 2 }).toSeconds()
  const formattedMessageDate = formatMessageDisplayDate(messageDateTime)
  expect(formattedMessageDate).toEqual(DateTime.fromSeconds(messageDateTime).toLocaleString())
  })