feat(logs): Add JSON pretty-printing for log attributes

Author: JoshuaKGoldberg

package.json

@@ -264,8 +264,8 @@
     "eslint-plugin-no-relative-import-paths": "^1.6.1",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "6.1.0",
-    "eslint-plugin-regexp": "^3.0.0",
     "eslint-plugin-react-you-might-not-need-an-effect": "0.5.3",
+    "eslint-plugin-regexp": "^3.0.0",
     "eslint-plugin-sentry": "^2.10.0",
     "eslint-plugin-testing-library": "^7.16.0",
     "eslint-plugin-typescript-sort-keys": "^3.3.0",

static/app/views/explore/components/traceItemAttributes/attributesTreeValue.spec.tsx

@@ -129,4 +129,96 @@ describe('AttributesTreeValue', () => {
 
     expect(screen.getByText('null')).toBeInTheDocument();
   });
+
+  it('renders JSON object values as structured data', () => {
+    const jsonContent = {
+      ...defaultProps.content,
+      value: '{"key": "value", "number": 42}',
+    };
+
+    render(<AttributesTreeValue {...defaultProps} content={jsonContent} />);
+
+    expect(screen.getByText('key')).toBeInTheDocument();
+    expect(screen.getByText('value')).toBeInTheDocument();
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('renders JSON array values as structured data', () => {
+    const jsonContent = {
+      ...defaultProps.content,
+      value: '[1, 2, 3]',
+    };
+
+    render(<AttributesTreeValue {...defaultProps} content={jsonContent} />);
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+  });
+
+  it('renders invalid JSON containing braces as plain text', () => {
+    const invalidJsonContent = {
+      ...defaultProps.content,
+      value: 'not {json',
+    };
+
+    render(<AttributesTreeValue {...defaultProps} content={invalidJsonContent} />);
+
+    expect(screen.getByText('not {json')).toBeInTheDocument();
+  });
+
+  it('renders plain strings without braces as plain text', () => {
+    const plainContent = {
+      ...defaultProps.content,
+      value: 'hello world',
+    };
+
+    render(<AttributesTreeValue {...defaultProps} content={plainContent} />);
+
+    expect(screen.getByText('hello world')).toBeInTheDocument();
+  });
+
+  it('does not render JSON as structured data when disableRichValue is true', () => {
+    const jsonContent = {
+      ...defaultProps.content,
+      value: '{"key": "value"}',
+    };
+
+    render(
+      <AttributesTreeValue
+        {...defaultProps}
+        content={jsonContent}
+        config={{disableRichValue: true}}
+      />
+    );
+
+    expect(screen.getByText('{"key": "value"}')).toBeInTheDocument();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+
+  it('renders simple JSON with compact class', () => {
+    const jsonContent = {
+      ...defaultProps.content,
+      value: '{"boop": "bop"}',
+    };
+
+    render(<AttributesTreeValue {...defaultProps} content={jsonContent} />);
+
+    const pre = screen.getByText('bop').closest('pre');
+    expect(pre).toHaveClass('compact');
+  });
+
+  it('renders long JSON without compact class', () => {
+    const jsonContent = {
+      ...defaultProps.content,
+      value: '{"k": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}',
+    };
+
+    render(<AttributesTreeValue {...defaultProps} content={jsonContent} />);
+
+    const pre = screen
+      .getByText('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa')
+      .closest('pre');
+    expect(pre).not.toHaveClass('compact');
+  });
 });

static/app/views/explore/components/traceItemAttributes/attributesTreeValue.tsx

@@ -3,11 +3,13 @@ import styled from '@emotion/styled';
 
 import {openNavigateToExternalLinkModal} from 'sentry/actionCreators/modal';
 import {ExternalLink} from 'sentry/components/links/externalLink';
+import {StructuredEventData} from 'sentry/components/structuredEventData';
 import {type RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
 import {isUrl} from 'sentry/utils/string/isUrl';
 import {AnnotatedAttributeTooltip} from 'sentry/views/explore/components/annotatedAttributeTooltip';
 import {getAttributeItem} from 'sentry/views/explore/components/traceItemAttributes/utils';
 import {TraceItemMetaInfo} from 'sentry/views/explore/utils';
+import {tryParseJson} from 'sentry/views/performance/newTraceDetails/traceDrawer/details/utils';
 
 import type {
   AttributesFieldRender,
@@ -32,11 +34,12 @@ export function AttributesTreeValue<RendererExtra extends RenderFunctionBaggage>
   // Check if we have a custom renderer for this attribute
   const attributeKey = originalAttribute.original_attribute_key;
   const renderer = renderers[attributeKey];
+  const value = String(content.value);
 
-  const defaultValue = <span>{String(content.value)}</span>;
+  const defaultValue = <span>{value}</span>;
 
   if (config?.disableRichValue) {
-    return String(content.value);
+    return value;
   }
 
   if (renderer) {
@@ -57,12 +60,24 @@ export function AttributesTreeValue<RendererExtra extends RenderFunctionBaggage>
       );
     }
   }
-  return isUrl(String(content.value)) ? (
+  const parsedJson = tryParseJson(content.value);
+  if (typeof parsedJson === 'object') {
+    return (
+      <AttributeStructuredData
+        data={parsedJson}
+        maxDefaultDepth={2}
+        withAnnotatedText={false}
+        className={value.length <= 48 ? 'compact' : undefined}
+      />
+    );
+  }
+
+  return isUrl(value) ? (
     <AttributeLinkText>
       <ExternalLink
         onClick={e => {
           e.preventDefault();
-          openNavigateToExternalLinkModal({linkText: String(content.value)});
+          openNavigateToExternalLinkModal({linkText: value});
         }}
       >
         {defaultValue}
@@ -86,3 +101,29 @@ const AttributeLinkText = styled('span')`
     white-space: normal;
   }
 `;
+
+const AttributeStructuredData = styled(StructuredEventData)`
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  &.compact {
+    display: inline;
+
+    span[data-base-with-toggle='true'] {
+      display: inline;
+      padding-left: 0;
+    }
+
+    button {
+      display: none;
+    }
+
+    div {
+      display: inline;
+      padding-left: 0;
+    }
+  }
+`;