fix(evlog): use CSS formatting for browser DevTools instead of ANSI escape codes#164
Conversation
|
@oritwoen is attempting to deploy a commit to the HRCD Projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for following the naming conventions! 🙏 |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 6d359382fc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
packages/evlog/src/logger.ts
Outdated
| const levelColor = getCssLevelColor(level) | ||
| const timestamp = new Date().toISOString().slice(11, 23) | ||
| console.log( | ||
| `%c${timestamp}%c %c[${tag}]%c ${message}`, |
There was a problem hiding this comment.
Interpolating tag/message directly into a %c format string means any user or app text containing browser console tokens like %s, %d, or %c is treated as formatting directives instead of literal text, which can consume style args and corrupt the rendered log line. This is a regression from the ANSI path (which treated % literally), so logs become inaccurate for inputs like percent-heavy messages or paths; dynamic segments should be escaped (e.g. % → %%) or passed as separate console arguments.
Useful? React with 👍 / 👎.
commit: |
2 participants
🔗 Linked issue
Resolves #160
📚 Description
prettyPrintWideEvent()andemitTaggedLog()use ANSI escape codes (\x1B[...]) unconditionally whenprettymode is enabled. Chrome DevTools has partial ANSI support, so colored output works there. Firefox DevTools does not support ANSI at all, rendering raw sequences like[2m,[36m,[0minline with the log text.The client-side logger (
src/runtime/client/log.ts) already handles this correctly by using%cCSS formatting for browsers. This PR brings the same approach to the standalonelogger.tspretty printer.What changed in
logger.ts:cssColorsconstant mapping ANSI color names to their CSS%cequivalentsgetCssLevelColor()for level-based CSS colors (mirrors the existinggetLevelColor())prettyPrintWideEventBrowser()that formats wide events with%cCSS directives instead of ANSI codesprettyPrintWideEvent()now checksisClient()and delegates to the browser variantemitTaggedLog()now checksisClient()and uses CSS formatting for tagged logsThe
isClient()utility already existed inutils.tsbut wasn't used inlogger.ts.Tests: Added
test/logger-browser.test.tswith 5 test cases covering tagged logs, wide events, tree branches, status colors, and duration formatting. Usesvi.mockto overrideisClient()and verifies that output contains%cdirectives with no ANSI escape sequences.📝 Checklist