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

Detect string attribute values that contain valid JSON and render them
using StructuredEventData instead of plain text. This provides a
collapsible, syntax-highlighted tree view for JSON objects and arrays.

Simple JSON (all primitive values) renders compactly inline, while
nested structures get the full expandable tree treatment.

Refs LOGS-400
Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>

Made-with: Cursor

Author: JoshuaKGoldberg

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

@@ -129,4 +129,94 @@ 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 nested JSON without compact class', () => {
+    const jsonContent = {
+      ...defaultProps.content,
+      value: '{"nested": {"inner": "deep"}}',
+    };
+
+    render(<AttributesTreeValue {...defaultProps} content={jsonContent} />);
+
+    const pre = screen.getByText('inner').closest('pre');
+    expect(pre).not.toHaveClass('compact');
+  });
 });

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

@@ -3,6 +3,7 @@ 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';
@@ -15,6 +16,32 @@ import type {
   AttributesTreeRowConfig,
 } from './attributesTree';
 
+function tryParseJson(
+  value: unknown
+): Record<PropertyKey, unknown> | unknown[] | undefined {
+  const str = String(value);
+  if (!str.includes('{') && !str.includes('[')) {
+    return undefined;
+  }
+  try {
+    const parsed = JSON.parse(str);
+    if (typeof parsed === 'object' && parsed !== null) {
+      return parsed;
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Returns true when all values in the object/array are primitives (no nesting).
+ */
+function isSimpleJson(value: Record<PropertyKey, unknown> | unknown[]): boolean {
+  const values = Array.isArray(value) ? value : Object.values(value);
+  return values.every(v => typeof v !== 'object' || v === null);
+}
+
 export function AttributesTreeValue<RendererExtra extends RenderFunctionBaggage>({
   config,
   content,
@@ -57,6 +84,18 @@ export function AttributesTreeValue<RendererExtra extends RenderFunctionBaggage>
       );
     }
   }
+  const parsedJson = tryParseJson(content.value);
+  if (parsedJson !== undefined) {
+    return (
+      <AttributeStructuredData
+        data={parsedJson}
+        maxDefaultDepth={2}
+        withAnnotatedText={false}
+        className={isSimpleJson(parsedJson) ? 'compact' : undefined}
+      />
+    );
+  }
+
   return isUrl(String(content.value)) ? (
     <AttributeLinkText>
       <ExternalLink
@@ -86,3 +125,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;
+    }
+  }
+`;