feat(span): Use JsonViewer for JSON-like queries such as MongoDB

.changeset/quick-foxes-invent.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+Add support for JSON-like queries (MongoDB) while improving span details page a bit

packages/overlay/src/integrations/sentry/components/performance/Queries.tsx

@@ -3,13 +3,11 @@ import { Link } from 'react-router-dom';
 import { ReactComponent as Sort } from '~/assets/sort.svg';
 import { ReactComponent as SortDown } from '~/assets/sortDown.svg';
 import classNames from '~/lib/classNames';
-import { QUERIES_HEADERS, QUERIES_SORT_KEYS } from '../../constants';
+import { DB_SPAN_REGEX, QUERIES_HEADERS, QUERIES_SORT_KEYS } from '../../constants';
 import { useSentrySpans } from '../../data/useSentrySpans';
 import type { Span } from '../../types';
 import { getFormattedDuration } from '../../utils/duration';
 
-const DB_SPAN_REGEX = /^db(\.[A-Za-z]+)?$/;
-
 type QueryInfo = {
   avgDuration: number;
   timeSpent: number;

packages/overlay/src/integrations/sentry/components/traces/spans/SpanDetails.tsx

@@ -9,16 +9,29 @@
 import DateTime from '../../DateTime';
 import { ErrorTitle } from '../../events/error/Error';
 import SpanTree from './SpanTree';
+import JsonViewer from '../../../../../components/JsonViewer';
+import { DB_SPAN_REGEX } from '../../../constants';
 
-function formatSpanDescription(desc: string) {
+function DBSpanDescription({ desc, dbType }: { desc: string; dbType?: string }) {
+  if (desc.startsWith('{') || dbType === 'mongodb') {
+    // looks like JSON?
+    try {
+      return <JsonViewer data={JSON.parse(desc)} />;
+    } catch (_err) {
+      // pass
+    }
+  }
+
+  let description = desc;
   if (desc.match(/^(SELECT|INSERT|UPDATE|DELETE|TRUNCATE|ALTER) /i)) {
     try {
-      return formatSQL(desc.replace(/([\s,(])(%[a-z])([\s,)])/gim, '$1?$3'));
+      description = formatSQL(desc.replace(/([\s,(])(%[a-z])([\s,)])/gim, '$1?$3'), { language: dbType || 'sql' });
     } catch (err) {
       console.error(err);
     }
   }
-  return desc;
+
+  return <pre className="text-primary-300 whitespace-pre-wrap break-words font-mono text-sm">{description}</pre>;
 }
 
 function formatValue(name: string, value: unknown): ReactNode {
@@ -29,6 +42,36 @@
   return `${value}` as ReactNode;
 }
 
+function SpanDescription({ span }: { span: Span }) {
+  let body = null;
+  let headerText = null;
+  if (span.op && DB_SPAN_REGEX.test(span.op) && span.description) {
+    headerText = 'Query';
+    body = <DBSpanDescription desc={span.description} dbType={span.data?.['db.system'] as string} />;
+  } else if (span.op === 'resource.img' && span.description?.indexOf('/') === 0) {
+    headerText = 'Preview';
+    body = (
+      <a
+        href={span.description}
+        className="border-primary-950 hover:border-primary-700 -m-2 inline-block max-w-sm cursor-pointer rounded border p-1"
+      >
+        <img src={span.description} alt="preview" style={{ maxHeight: 300 }} />
+      </a>
+    );
+  } else if (span.description) {
+    headerText = 'Description';
+    body = <pre className="text-primary-300 whitespace-pre-wrap break-words font-mono text-sm">{span.description}</pre>;
+  } else {
+    body = <div className="text-primary-300">No description recorded for this span.</div>;
+  }
+  return (
+    <div>
+      {headerText && <h2 className="mb-2 font-bold uppercase">{headerText}</h2>}
+      {body}
+    </div>
+  );
+}
+
 export default function SpanDetails({
   traceContext,
   span,
@@ -102,28 +145,7 @@
           </div>
         )}
 
-        <div>
-          <h2 className="mb-2 font-bold uppercase">Description</h2>
-          {span.description ? (
-            <pre className="text-primary-300 whitespace-pre-wrap break-words font-mono text-sm">
-              {formatSpanDescription(span.description)}
-            </pre>
-          ) : (
-            <div className="text-primary-300">No description recorded for this span.</div>
-          )}
-        </div>
-
-        {span.op === 'resource.img' && span.description?.indexOf('/') === 0 && (
-          <div>
-            <h2 className="mb-2 font-bold uppercase">Preview</h2>
-            <a
-              href={span.description}
-              className="border-primary-950 hover:border-primary-700 -m-2 inline-block max-w-sm cursor-pointer rounded border p-1"
-            >
-              <img src={span.description} alt="preview" style={{ maxHeight: 300 }} />
-            </a>
-          </div>
-        )}
+        <SpanDescription span={span} />
 
         <div>
           <h2 className="mb-2 font-bold uppercase">Tags</h2>

packages/overlay/src/integrations/sentry/constants.ts

@@ -1,3 +1,5 @@
+export const DB_SPAN_REGEX = /^db(\.[A-Za-z]+)?$/;
+
 export const RESOURCES_SORT_KEYS = {
   avgDuration: 'AVG_DURATION',
   timeSpent: 'TIME_SPENT',