fix(webapp): prevent dashboard crash when span accessory text is not a string (#3400)

Author: ericallam

.server-changes/span-accessory-text-guard.md

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: fix
+---
+
+Prevent dashboard crash (React error #31) when span accessory item text is not a string. Filters out malformed accessory items in SpanCodePathAccessory instead of passing objects to React as children.

apps/webapp/app/components/runs/v3/SpanTitle.tsx

@@ -55,20 +55,24 @@ function SpanAccessory({
     case "pills": {
       return (
         <span className="flex items-center gap-1">
-          {accessory.items.map((item, index) => (
-            <SpanPill key={index} text={item.text} icon={item.icon} />
-          ))}
+          {accessory.items
+            .filter((item) => typeof item.text === "string")
+            .map((item, index) => (
+              <SpanPill key={index} text={item.text} icon={item.icon} />
+            ))}
         </span>
       );
     }
     default: {
       return (
         <span className={cn("flex gap-1")}>
-          {accessory.items.map((item, index) => (
-            <span key={index} className={cn("inline-flex items-center gap-1")}>
-              {item.text}
-            </span>
-          ))}
+          {accessory.items
+            .filter((item) => typeof item.text === "string")
+            .map((item, index) => (
+              <span key={index} className={cn("inline-flex items-center gap-1")}>
+                {item.text}
+              </span>
+            ))}
         </span>
       );
     }
@@ -104,16 +108,18 @@ export function SpanCodePathAccessory({
         className
       )}
     >
-      {accessory.items.map((item, index) => (
-        <Fragment key={index}>
-          <span className={cn("truncate", "text-text-dimmed")}>{item.text}</span>
-          {index < accessory.items.length - 1 && (
-            <span className="text-text-dimmed">
-              <ChevronRightIcon className="size-4" />
-            </span>
-          )}
-        </Fragment>
-      ))}
+      {accessory.items
+        .filter((item) => typeof item.text === "string")
+        .map((item, index, filtered) => (
+          <Fragment key={index}>
+            <span className={cn("truncate", "text-text-dimmed")}>{item.text}</span>
+            {index < filtered.length - 1 && (
+              <span className="text-text-dimmed">
+                <ChevronRightIcon className="size-4" />
+              </span>
+            )}
+          </Fragment>
+        ))}
     </code>
   );
 }