fix(performance): Bring back DB queries info

Fixes #422 by fixing the DB span regex.
getsentry · Nov 4, 2024 · 3a45e1c · 3a45e1c
1 parent 51ff0ea
commit 3a45e1c
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 21 deletions.
diff --git a/packages/overlay/src/integrations/sentry/components/performance/Queries.tsx b/packages/overlay/src/integrations/sentry/components/performance/Queries.tsx
@@ -8,13 +8,7 @@ import { useSentrySpans } from '../../data/useSentrySpans';
 import type { Span } from '../../types';
 import { getFormattedDuration } from '../../utils/duration';
 
-const filterDBSpans = (spans: Span[], regex?: RegExp) => {
-  if (regex) {
-    const _regex = new RegExp(regex);
-    return spans.filter((span: Span) => _regex.test(span.op || ''));
-  }
-  return [];
-};
+const DB_SPAN_REGEX = /^db(\.[A-Za-z]+)?$/;
 
 type QueryInfo = {
   avgDuration: number;
@@ -69,8 +63,8 @@ const Queries = ({ showAll }: { showAll: boolean }) => {
 
   const queriesData: QueryInfo[] = useMemo(() => {
     const compareQueryInfo = COMPARATORS[sort.active] || COMPARATORS[QUERIES_SORT_KEYS.timeSpent];
-
-    const onlyDBSpans = filterDBSpans(showAll ? allSpans : localSpans, /db\.[A-Za-z]+/);
+    const spans = showAll ? allSpans : localSpans;
+    const onlyDBSpans = spans.filter((span: Span) => DB_SPAN_REGEX.test(span.op || ''));
     const uniqueSpansSet = new Set(onlyDBSpans.map(span => String(span?.description).trim()));
     // CLear out empty ones (they collapse as a single empty string since this is a set)
     uniqueSpansSet.delete('');

diff --git a/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx b/packages/overlay/src/integrations/sentry/components/performance/QuerySummary.tsx
@@ -9,14 +9,6 @@ import { useSentrySpans } from '../../data/useSentrySpans';
 import type { Span } from '../../types';
 import { getFormattedDuration } from '../../utils/duration';
 
-const filterDBSpans = (spans: Span[], type?: string) => {
-  if (type) {
-    return spans.filter((span: Span) => span.description === type);
-  }
-
-  return [];
-};
-
 type SpanInfoComparator = (a: Span, b: Span) => number;
 type QuerySummarySortTypes = (typeof QUERY_SUMMARY_SORT_KEYS)[keyof typeof QUERY_SUMMARY_SORT_KEYS];
 const COMPARATORS: Record<QuerySummarySortTypes, SpanInfoComparator> = {
@@ -55,16 +47,21 @@ const QuerySummary = ({ showAll }: { showAll: boolean }) => {
     );
 
   const filteredDBSpans: Span[] = useMemo(() => {
+    if (!type) {
+      return [];
+    }
+    const spans = showAll ? allSpans : localSpans;
     const compareSpanInfo = COMPARATORS[sort.active] || COMPARATORS[QUERY_SUMMARY_SORT_KEYS.timeSpent];
 
-    return filterDBSpans(showAll ? allSpans : localSpans, type).sort((a, b) =>
-      sort.asc ? compareSpanInfo(a, b) : compareSpanInfo(b, a),
-    );
+    return spans
+      .filter(span => span.description === type)
+      .sort((a, b) => (sort.asc ? compareSpanInfo(a, b) : compareSpanInfo(b, a)));
   }, [allSpans, localSpans, showAll, sort, type]);
 
-  if (!type || !filteredDBSpans || !filteredDBSpans.length) {
+  if (!filteredDBSpans || !filteredDBSpans.length) {
     return <p className="text-primary-300 px-6 py-4">Query not found.</p>;
   }
+
   return (
     <>
       <Breadcrumbs