Logger improvements (#7729)

* Remove enablement

* Refactor context and filtering

* Fix imports, simplify transports config

* Migrate usages of debug context

* Re-org, add colors and grouping to console logging

* Remove temp default context

* Remove manual prefix

* Move colorizing out of console transport body

* Reduce reuse

* Pass through context

* Ensure bitdrift is enabled in dev

* Enable Sentry on web only

* Clean up types

* Docs

* Format

* Update tests

* Clean up tests

* No positional args

* Revert Sentry changes

* Clean up context, use it, pass metadata through to Bitdrift

* Fix up debugging

* Clean up metadata before passing to Bitdrift

* Correct transports

* Reserve context prop on metadata and include in transports

* Update tests

1 files changed, 90 insertions, 0 deletions

diff --git a/src/logger/transports/console.ts b/src/logger/transports/console.ts
new file mode 100644
index 000000000..6a687c69b
--- /dev/null
+++ b/src/logger/transports/console.ts
@@ -0,0 +1,90 @@
+import format from 'date-fns/format'
+
+import {LogLevel, Transport} from '#/logger/types'
+import {prepareMetadata} from '#/logger/util'
+import {isWeb} from '#/platform/detection'
+
+/**
+ * Used in dev mode to nicely log to the console
+ */
+export const consoleTransport: Transport = (
+  level,
+  context,
+  message,
+  metadata,
+  timestamp,
+) => {
+  const hasMetadata = Object.keys(metadata).length
+  const colorize = withColor(
+    {
+      [LogLevel.Debug]: colors.magenta,
+      [LogLevel.Info]: colors.blue,
+      [LogLevel.Log]: colors.green,
+      [LogLevel.Warn]: colors.yellow,
+      [LogLevel.Error]: colors.red,
+    }[level],
+  )
+
+  let msg = `${colorize(format(timestamp, 'HH:mm:ss'))}`
+  if (context) {
+    msg += ` ${colorize(`(${context})`)}`
+  }
+  if (message) {
+    msg += ` ${message.toString()}`
+  }
+
+  if (isWeb) {
+    if (hasMetadata) {
+      console.groupCollapsed(msg)
+      console.log(metadata)
+      console.groupEnd()
+    } else {
+      console.log(msg)
+    }
+    if (message instanceof Error) {
+      // for stacktrace
+      console.error(message)
+    }
+  } else {
+    if (hasMetadata) {
+      msg += ` ${JSON.stringify(prepareMetadata(metadata), null, 2)}`
+    }
+    console.log(msg)
+    if (message instanceof Error) {
+      // for stacktrace
+      console.error(message)
+    }
+  }
+}
+
+/**
+ * Color handling copied from Kleur
+ *
+ * @see https://github.com/lukeed/kleur/blob/fa3454483899ddab550d08c18c028e6db1aab0e5/colors.mjs#L13
+ */
+const colors: {
+  [key: string]: [number, number]
+} = {
+  default: [0, 0],
+  blue: [36, 39],
+  green: [32, 39],
+  magenta: [35, 39],
+  red: [31, 39],
+  yellow: [33, 39],
+}
+
+function withColor([x, y]: [number, number]) {
+  const rgx = new RegExp(`\\x1b\\[${y}m`, 'g')
+  const open = `\x1b[${x}m`,
+    close = `\x1b[${y}m`
+
+  return function (txt: string) {
+    if (txt == null) return txt
+
+    return (
+      open +
+      (~('' + txt).indexOf(close) ? txt.replace(rgx, close + open) : txt) +
+      close
+    )
+  }
+}