feat(otlp): Parse JSON-looking attributes in span attributes panel (#95544)

Until EAP supports array storage, we are storing array attributes as
JSON-encoded strings. Since we can't know all array attribute names
ahead of time, scan through the attributes and look for any value that
_seems_ like it'll be a JSON array, and render it using the JSON
renderer if appropriate.

Closes OPE-51.

**e.g.,**
<img width="849" height="214" alt="Screenshot 2025-07-15 at 10 11 53 AM"
src="https://github.com/user-attachments/assets/0cf9eae3-e7c5-4c96-873e-c0e8a074cf96"
/>

Author: gggritso

static/app/utils/string/looksLikeAJSONArray.spec.tsx

@@ -0,0 +1,20 @@
+import {looksLikeAJSONArray} from './looksLikeAJSONArray';
+
+describe('looksLikeAJSONArray', () => {
+  it.each([
+    ['[]', true],
+    ['[1, 2, 3]', true],
+    ['["hello", "world"]', true],
+    ['[{"key": "value"}]', true],
+    ['  []  ', true],
+    ['[Filtered]', false],
+    ['{}', false],
+    ['{"key": "value"}', false],
+    ['hello world', false],
+    ['[incomplete', false],
+    ['incomplete]', false],
+    ['', false],
+  ])('"%s" should return %s', (input, expected) => {
+    expect(looksLikeAJSONArray(input)).toBe(expected);
+  });
+});

static/app/utils/string/looksLikeAJSONArray.tsx

@@ -0,0 +1,16 @@
+/**
+ * Check if a string value looks like it could be a JSON-encoded array. This is
+ useful for situations where we used JSON strings to store array values because
+ array storage was not possible.
+ *
+ * This function does _not_ parse the string as JSON because in most cases we
+ have to decode the string anyway to render it, and we don't want to decode
+ twice. Instead, the renderer gracefully fails if the JSON is not valid.
+ */
+export function looksLikeAJSONArray(value: string) {
+  const trimmedValue = value.trim();
+
+  // The string '[Filtered]' looks array-like, but it's actually a Relay special string
+  if (trimmedValue === '[Filtered]') return false;
+  return trimmedValue.startsWith('[') && trimmedValue.endsWith(']');
+}

static/app/views/performance/newTraceDetails/traceDrawer/details/span/eapSections/attributes.tsx

@@ -14,6 +14,7 @@ import {trackAnalytics} from 'sentry/utils/analytics';
 import type {RenderFunctionBaggage} from 'sentry/utils/discover/fieldRenderers';
 import {FieldKey} from 'sentry/utils/fields';
 import {generateProfileFlamechartRoute} from 'sentry/utils/profiling/routes';
+import {looksLikeAJSONArray} from 'sentry/utils/string/looksLikeAJSONArray';
 import {useIsSentryEmployee} from 'sentry/utils/useIsSentryEmployee';
 import type {AttributesFieldRendererProps} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
 import {AttributesTree} from 'sentry/views/explore/components/traceItemAttributes/attributesTree';
@@ -187,10 +188,24 @@ export function Attributes({
     },
   };
 
+  // Some semantic attributes are known to contain JSON-encoded arrays or
+  // JSON-encoded objects. Add a JSON renderer for those attributes.
   for (const attribute of JSON_ATTRIBUTES) {
     customRenderers[attribute] = jsonRenderer;
   }
 
+  // Some attributes (semantic or otherwise) look like they contain JSON-encoded
+  // arrays. Use a JSON renderer for any value that looks suspiciously like it's
+  // a JSON-encoded array. NOTE: This happens a lot because EAP doesn't support
+  // array values, so SDKs often store array values as JSON-encoded strings.
+  sortedAndFilteredAttributes.forEach(attribute => {
+    if (Object.hasOwn(customRenderers, attribute.name)) return;
+    if (attribute.type !== 'str') return;
+    if (!looksLikeAJSONArray(attribute.value)) return;
+
+    customRenderers[attribute.name] = jsonRenderer;
+  });
+
   for (const attribute of TRUNCATED_TEXT_ATTRIBUTES) {
     customRenderers[attribute] = truncatedTextRenderer;
   }