Browse Source

fix(replays): search is more robust now that we look inside of breadcrumb data. (#34823)

Closes #34805 

<img width="986" alt="image" src="https://user-images.githubusercontent.com/7014871/169409873-7ce69a99-0dfb-4a48-be4c-106f7886ad59.png">
<img width="493" alt="image" src="https://user-images.githubusercontent.com/7014871/169409893-a0938150-2859-400a-a947-bf9b9e43f890.png">
<img width="986" alt="image" src="https://user-images.githubusercontent.com/7014871/169409941-5bc83d8a-04a5-4b4f-8d6d-3b77f454cfee.png">

Created a more robust search function that accounts for all of what's shown within the console window.
Dublin Anondson 2 years ago
parent
commit
319693acf2

+ 2 - 8
static/app/views/replays/detail/console/index.tsx

@@ -11,6 +11,7 @@ import {BreadcrumbLevelType, BreadcrumbTypeDefault} from 'sentry/types/breadcrum
 import EmptyMessage from 'sentry/views/settings/components/emptyMessage';
 
 import ConsoleMessage from './consoleMessage';
+import {filterBreadcrumbs} from './utils';
 
 interface Props {
   breadcrumbs: BreadcrumbTypeDefault[];
@@ -26,14 +27,7 @@ function Console({breadcrumbs, startTimestamp = 0}: Props) {
   const handleSearch = debounce(query => setSearchTerm(query), 150);
 
   const filteredBreadcrumbs = useMemo(
-    () =>
-      !searchTerm && logLevel.length === 0
-        ? breadcrumbs
-        : breadcrumbs.filter(
-            breadcrumb =>
-              breadcrumb.message?.toLowerCase().includes(searchTerm) &&
-              logLevel.includes(breadcrumb.level)
-          ),
+    () => filterBreadcrumbs(breadcrumbs, searchTerm, logLevel),
     [logLevel, searchTerm, breadcrumbs]
   );
 

+ 21 - 0
static/app/views/replays/detail/console/utils.tsx

@@ -0,0 +1,21 @@
+import {BreadcrumbTypeDefault} from 'sentry/types/breadcrumbs';
+
+export const filterBreadcrumbs = (
+  breadcrumbs: BreadcrumbTypeDefault[],
+  searchTerm: string,
+  logLevel: Array<string>
+) => {
+  if (!searchTerm && logLevel.length === 0) {
+    return breadcrumbs;
+  }
+  return breadcrumbs.filter(breadcrumb => {
+    const normalizedSearchTerm = searchTerm.toLowerCase();
+    const doesMatch = JSON.stringify(breadcrumb.data)
+      .toLowerCase()
+      .includes(normalizedSearchTerm);
+    if (logLevel.length > 0) {
+      return doesMatch && logLevel.includes(breadcrumb.level);
+    }
+    return doesMatch;
+  });
+};

File diff suppressed because it is too large
+ 52 - 0
tests/js/spec/views/replays/detail/console/utils.spec.jsx


Some files were not shown because too many files changed in this diff