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

Author: JoshuaKGoldberg

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,
@@ -57,6 +59,18 @@ export function AttributesTreeValue<RendererExtra extends RenderFunctionBaggage>
       );
     }
   }
+  const parsedJson = tryParseJson(content.value);
+  if (typeof parsedJson === 'object' && parsedJson !== null) {
+    return (
+      <AttributeStructuredData
+        data={parsedJson}
+        maxDefaultDepth={2}
+        withAnnotatedText={false}
+        className={String(content.value).length <= 48 ? 'compact' : undefined}
+      />
+    );
+  }
+
   return isUrl(String(content.value)) ? (
     <AttributeLinkText>
       <ExternalLink
@@ -86,3 +100,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;
+    }
+  }
+`;