Commit a49619c
feat(logs): add inline JSON syntax highlighting for log attributes (#111730)
Add inline syntax highlighting for JSON embedded within log attribute
values in the expanded attribute tree view.
Previously (LOGS-400), only attribute values that were *entirely* valid
JSON got pretty-printed with `StructuredEventData`. Values like `This is
my JSON: {"it": "would be", "nice": ["to", "highlight"], "this": true}`
rendered as plain text. Now, the JSON portion gets Prism-based syntax
colorizing inline — keys, strings, numbers, booleans, and punctuation
each get their own color — without adding newlines or changing the
layout.
<img width="838" height="245" alt="Screenshot of a log with a myData
field showing syntax-highlighted JSON object"
src="https://github.com/user-attachments/assets/7b78bb01-5be9-494e-9010-2008fde3b59c"
/>
The JSON extraction logic lives in a standalone utility
(`extractJsonFromText`) that uses string-aware bracket matching to
correctly handle braces inside quoted strings and escape sequences —
unlike existing npm packages (`balanced-match`,
`extract-json-from-string`) which break on these cases. I intentionally
set this up so that it acts like a standalone importable utility. It'd
be nifty if we could publish this as its own package...
Fixes LOGS-636
Made with [Cursor](https://cursor.com)
Co-authored-by: Claude Sonnet 4 <noreply@anthropic.com>1 parent 7c910a9 commit a49619c
File tree
6 files changed
+778
-14
lines changed- static/app
- utils
- views/explore/components/traceItemAttributes
6 files changed
+778
-14
lines changed
0 commit comments