forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix console logging in Firefox and other browsers (#9775)
Use CSS-based %c styling for browser consoles instead of ANSI escape codes, which don't render properly in Firefox. Keep ANSI codes for native/terminal environments.
Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
authored by
Samuel Newman
Claude Haiku 4.5
and committed by
GitHub
26605ee7
f1c50baa
+34
-19
+34
-19
src/logger/transports/console.ts
+34
-19
src/logger/transports/console.ts
···
15
15
timestamp,
16
16
) => {
17
17
const hasMetadata = Object.keys(metadata).length
18
-
const colorize = withColor(
19
-
{
20
-
[LogLevel.Debug]: colors.magenta,
21
-
[LogLevel.Info]: colors.blue,
22
-
[LogLevel.Log]: colors.green,
23
-
[LogLevel.Warn]: colors.yellow,
24
-
[LogLevel.Error]: colors.red,
25
-
}[level],
26
-
)
18
+
19
+
if (IS_WEB) {
20
+
const cssColor = {
21
+
[LogLevel.Debug]: 'magenta',
22
+
[LogLevel.Info]: 'dodgerblue',
23
+
[LogLevel.Log]: 'green',
24
+
[LogLevel.Warn]: 'orange',
25
+
[LogLevel.Error]: 'red',
26
+
}[level]
27
+
28
+
const timestampStr = format(timestamp, 'HH:mm:ss')
29
+
const contextStr = context ? ` (${context})` : ''
30
+
const messageStr = message ? ` ${message.toString()}` : ''
27
31
28
-
let msg = `${colorize(format(timestamp, 'HH:mm:ss'))}`
29
-
if (context) {
30
-
msg += ` ${colorize(`(${context})`)}`
31
-
}
32
-
if (message) {
33
-
msg += ` ${message.toString()}`
34
-
}
32
+
const styledPart = `%c${timestampStr}${contextStr}%c${messageStr}`
33
+
const styles = [`color: ${cssColor}; font-weight: bold`, 'color: inherit']
35
34
36
-
if (IS_WEB) {
37
35
if (hasMetadata) {
38
-
console.groupCollapsed(msg)
36
+
console.groupCollapsed(styledPart, ...styles)
39
37
console.log(prepareMetadata(metadata))
40
38
console.groupEnd()
41
39
} else {
42
-
console.log(msg)
40
+
console.log(styledPart, ...styles)
43
41
}
44
42
if (message instanceof Error) {
45
43
// for stacktrace
46
44
console.error(message)
47
45
}
48
46
} else {
47
+
const colorize = withColor(
48
+
{
49
+
[LogLevel.Debug]: colors.magenta,
50
+
[LogLevel.Info]: colors.blue,
51
+
[LogLevel.Log]: colors.green,
52
+
[LogLevel.Warn]: colors.yellow,
53
+
[LogLevel.Error]: colors.red,
54
+
}[level],
55
+
)
56
+
57
+
let msg = `${colorize(format(timestamp, 'HH:mm:ss'))}`
58
+
if (context) {
59
+
msg += ` ${colorize(`(${context})`)}`
60
+
}
61
+
if (message) {
62
+
msg += ` ${message.toString()}`
63
+
}
49
64
if (hasMetadata) {
50
65
msg += ` ${JSON.stringify(prepareMetadata(metadata), null, 2)}`
51
66
}