fix: trace panel crashes/missing spans due to misconfig/missing data (#847)

HDX-1772
- if `implicitColumnExpression` had a `Map` column type in it, we'd try to render objects that crashed the trace panel, switching logs to always render off of body expression first. Just to be defensive, we also try to stringify the Body before displaying

HDX-1769
- If root/parent spans were missing, their children spans did not render properly, we were incorrectly assuming logs with a spanId were a valid parent span which meant we did not properly render orphaned spans.

bonus: Fixes NX cache misconfiguration which should stop Vercel deployment errors due to cache

Author: MikeShi42

packages/app/package.json

@@ -150,5 +150,14 @@
     "react": "^18.2.0",
     "@types/react-dom": "^18.2.18",
     "@types/react": "18.2.23"
+  },
+  "nx": {
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/.next"
+        ]
+      }
+    }
   }
 }

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -56,7 +56,9 @@ function getTableBody(tableModel: TSource) {
   if (tableModel?.kind === SourceKind.Trace) {
     return getSpanEventBody(tableModel) ?? '';
   } else if (tableModel?.kind === SourceKind.Log) {
-    return tableModel.implicitColumnExpression ?? '';
+    return (
+      (tableModel.bodyExpression || tableModel.implicitColumnExpression) ?? ''
+    );
   } else {
     return '';
   }
@@ -223,6 +225,7 @@ export function useEventsAroundFocus({
       const { SpanAttributes, ...rowData } = cd;
       return {
         ...cd, // Keep all fields available for display
+        SpanId: cd?.SpanId, // for typing
         id: rowWhere(rowData), // But only use fields except SpanAttributes for identification
         type,
       };
@@ -321,11 +324,11 @@ export function DBTraceWaterfallChartContainer({
   type Node = SpanRow & { id: string; parentId: string; children: SpanRow[] };
   const validSpanID = useMemo(() => {
     return new Set(
-      rows
+      traceRowsData // only spans in traces can define valid span ids
         ?.filter(row => _.isString(row.SpanId) && row.SpanId.length > 0)
         .map(row => row.SpanId) ?? [],
     );
-  }, [rows]);
+  }, [traceRowsData]);
   const rootNodes: Node[] = [];
   const nodesMap = new Map();
 
@@ -429,7 +432,13 @@ export function DBTraceWaterfallChartContainer({
     const start = startOffset - minOffset;
     const end = start + tookMs;
 
-    const { Body: body, ServiceName: serviceName, id, type } = result;
+    const { Body: _body, ServiceName: serviceName, id, type } = result;
+    let body = `${_body}`;
+    try {
+      body = typeof _body === 'string' ? _body : JSON.stringify(_body);
+    } catch (e) {
+      console.warn("DBTraceWaterfallChart: Couldn't JSON stringify Body", e);
+    }
 
     // Extract HTTP-related logic
     const eventAttributes = result.SpanAttributes || {};