diff --git a/static/app/utils/replays/hydrateBreadcrumbs.tsx b/static/app/utils/replays/hydrateBreadcrumbs.tsx index 88399d7a16059f..00612137650dff 100644 --- a/static/app/utils/replays/hydrateBreadcrumbs.tsx +++ b/static/app/utils/replays/hydrateBreadcrumbs.tsx @@ -27,8 +27,12 @@ export default function hydrateBreadcrumbs( } return { ...frame, + // Logcat and Timber are used for mobile replays and are considered a console frame instead of a custom breadcrumb frame // custom frames might not have a defined category, so we need to set one - category: frame.category || defaultTitle(frame) || 'custom', + category: + frame.category === 'Logcat' || frame.category === 'Timber' + ? 'console' + : frame.category || defaultTitle(frame) || 'custom', offsetMs: Math.abs(time.getTime() - startTimestampMs), timestamp: time, timestampMs: time.getTime(), diff --git a/static/app/utils/replays/replayReader.tsx b/static/app/utils/replays/replayReader.tsx index 796500c52f8b2b..fa08f69d7a14bd 100644 --- a/static/app/utils/replays/replayReader.tsx +++ b/static/app/utils/replays/replayReader.tsx @@ -41,6 +41,7 @@ import { getNodeIds, IncrementalSource, isCLSFrame, + isConsoleFrame, isDeadClick, isDeadRageClick, isPaintFrame, @@ -507,7 +508,7 @@ export default class ReplayReader { getErrorFrames = () => this._errors; getConsoleFrames = memoize(() => - this._sortedBreadcrumbFrames.filter(frame => frame.category === 'console') + this._sortedBreadcrumbFrames.filter(frame => isConsoleFrame(frame)) ); getNavigationFrames = memoize(() => diff --git a/static/app/views/replays/detail/console/useConsoleFilters.tsx b/static/app/views/replays/detail/console/useConsoleFilters.tsx index fffde1d8a3992d..99d580650900c0 100644 --- a/static/app/views/replays/detail/console/useConsoleFilters.tsx +++ b/static/app/views/replays/detail/console/useConsoleFilters.tsx @@ -5,7 +5,11 @@ import type {SelectOption} from 'sentry/components/compactSelect'; import {defined} from 'sentry/utils'; import {decodeList, decodeScalar} from 'sentry/utils/queryString'; import useFiltersInLocationQuery from 'sentry/utils/replays/hooks/useFiltersInLocationQuery'; -import type {BreadcrumbFrame, ConsoleFrame} from 'sentry/utils/replays/types'; +import { + type BreadcrumbFrame, + type ConsoleFrame, + isConsoleFrame, +} from 'sentry/utils/replays/types'; import {filterItems} from 'sentry/views/replays/detail/utils'; export interface ConsoleSelectOption extends SelectOption { @@ -32,7 +36,7 @@ type Return = { }; function getFilterableField(frame: BreadcrumbFrame) { - if (frame.category === 'console') { + if (isConsoleFrame(frame)) { const consoleFrame = frame as ConsoleFrame; return consoleFrame.level; }