From e0b1b0b0b67fe24b06ded50bfeeca1785f2e598f Mon Sep 17 00:00:00 2001
From: Ernest Iliiasov <ernest@shorpo.com>
Date: Fri, 18 Apr 2025 20:26:46 -0600
Subject: [PATCH 1/3] fix: Not all console.error shows up in session replay
 play bar annotations

---
 packages/app/src/Playbar.tsx                  | 1 +
 packages/app/src/SessionSubpanel.tsx          | 4 ++--
 packages/app/styles/PlaybarSlider.module.scss | 1 +
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/Playbar.tsx b/packages/app/src/Playbar.tsx
index 7225e853f..eb104a411 100644
--- a/packages/app/src/Playbar.tsx
+++ b/packages/app/src/Playbar.tsx
@@ -75,6 +75,7 @@ export default function Playbar({
           const isError =
             event.severity_text?.toLowerCase() === 'error' ||
             event.component === 'error' ||
+            event.component === 'console' ||
             statusCode >= 399;
 
           return {
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index c38de50ea..39215c5d1 100644
--- a/packages/app/src/SessionSubpanel.tsx
+++ b/packages/app/src/SessionSubpanel.tsx
@@ -363,7 +363,7 @@ export default function SessionSubpanel({
         offset: 0,
       },
       filters: [
-        filteredEventsFilter,
+        allEventsFilter,
         ...(where ? [{ type: whereLanguage, condition: where }] : []),
       ],
     }),
@@ -377,7 +377,7 @@ export default function SessionSubpanel({
       end,
       whereLanguage,
       searchedQuery,
-      filteredEventsFilter,
+      allEventsFilter,
       where,
     ],
   );
diff --git a/packages/app/styles/PlaybarSlider.module.scss b/packages/app/styles/PlaybarSlider.module.scss
index 947b09740..40594b24d 100644
--- a/packages/app/styles/PlaybarSlider.module.scss
+++ b/packages/app/styles/PlaybarSlider.module.scss
@@ -29,6 +29,7 @@
   height: 8px;
   background-color: #333;
   border-radius: 1px;
+  opacity: 0.5;
 
   &:hover {
     opacity: 1 !important;

From 583203a8af6b5984764af36e96fa3a9b4183eabd Mon Sep 17 00:00:00 2001
From: Ernest Iliiasov <ernest@shorpo.com>
Date: Tue, 29 Apr 2025 19:40:27 -0600
Subject: [PATCH 2/3] comment: rename filteredEventsFilter -> highlightedEvents

---
 packages/app/src/SessionSubpanel.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index 39215c5d1..14605be0a 100644
--- a/packages/app/src/SessionSubpanel.tsx
+++ b/packages/app/src/SessionSubpanel.tsx
@@ -314,7 +314,8 @@ export default function SessionSubpanel({
     [traceSource],
   );
 
-  const filteredEventsFilter = useMemo(
+  // Events shown in the highlighted tab
+  const highlightedEventsFilter = useMemo(
     () => ({
       type: 'lucene' as const,
       condition: `${traceSource.resourceAttributesExpression}.rum.sessionId:"${rumSessionId}"
@@ -330,6 +331,7 @@ export default function SessionSubpanel({
     [traceSource, rumSessionId],
   );
 
+  // Events shown in the all events tab
   const allEventsFilter = useMemo(
     () => ({
       type: 'lucene' as const,
@@ -410,7 +412,7 @@ export default function SessionSubpanel({
         offset: 0,
       },
       filters: [
-        tab === 'highlighted' ? filteredEventsFilter : allEventsFilter,
+        tab === 'highlighted' ? highlightedEventsFilter : allEventsFilter,
         ...(where ? [{ type: whereLanguage, condition: where }] : []),
       ],
     }),
@@ -425,7 +427,7 @@ export default function SessionSubpanel({
       whereLanguage,
       searchedQuery,
       tab,
-      filteredEventsFilter,
+      highlightedEventsFilter,
       allEventsFilter,
       where,
     ],

From 69d9ceec940205b5b20ee822a859fc7d95d3263d Mon Sep 17 00:00:00 2001
From: Ernest Iliiasov <ernest@shorpo.com>
Date: Tue, 29 Apr 2025 19:47:20 -0600
Subject: [PATCH 3/3] feat: Improve Playbar - show same event marks as in the
 sidebar

---
 packages/app/src/DOMPlayer.tsx                | 23 ++++++++++---------
 packages/app/src/Playbar.tsx                  |  3 +++
 packages/app/src/PlaybarSlider.tsx            | 10 ++++----
 packages/app/src/SessionSubpanel.tsx          |  5 ++--
 packages/app/styles/PlaybarSlider.module.scss |  2 +-
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx
index d19c44ad2..89111842c 100644
--- a/packages/app/src/DOMPlayer.tsx
+++ b/packages/app/src/DOMPlayer.tsx
@@ -513,17 +513,18 @@ export default function DOMPlayer({
             No replay available for this session, most likely due to this
             session starting and ending in a background tab.
           </div>
-        ) : null}
-        <div
-          ref={wrapper}
-          className={cx(styles.domPlayerWrapper, 'overflow-hidden', {
-            'd-none': isLoading || isBuffering,
-            started: (replayer.current?.getCurrentTime() ?? 0) > 0,
-            [styles.domPlayerWrapperPaused]: playerState === 'paused',
-          })}
-        >
-          <div className="player rr-block" ref={playerContainer} />
-        </div>
+        ) : (
+          <div
+            ref={wrapper}
+            className={cx(styles.domPlayerWrapper, 'overflow-hidden', {
+              'd-none': isLoading || isBuffering,
+              started: (replayer.current?.getCurrentTime() ?? 0) > 0,
+              [styles.domPlayerWrapperPaused]: playerState === 'paused',
+            })}
+          >
+            <div className="player rr-block" ref={playerContainer} />
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/packages/app/src/Playbar.tsx b/packages/app/src/Playbar.tsx
index eb104a411..3413acf08 100644
--- a/packages/app/src/Playbar.tsx
+++ b/packages/app/src/Playbar.tsx
@@ -78,6 +78,8 @@ export default function Playbar({
             event.component === 'console' ||
             statusCode >= 399;
 
+          const isSuccess = !isError && statusCode < 400 && statusCode > 99;
+
           return {
             id: event.id,
             ts: event.startOffset,
@@ -94,6 +96,7 @@ export default function Playbar({
                     ? 'Intercom Chat Opened'
                     : event.body,
             isError,
+            isSuccess,
           };
         }) ?? [],
       'percentage',
diff --git a/packages/app/src/PlaybarSlider.tsx b/packages/app/src/PlaybarSlider.tsx
index 5627c5e7e..950324ad6 100644
--- a/packages/app/src/PlaybarSlider.tsx
+++ b/packages/app/src/PlaybarSlider.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { format } from 'date-fns';
 import { Slider, Tooltip } from '@mantine/core';
 
 import { useFormatTime } from './useFormatTime';
@@ -12,6 +11,7 @@ export type PlaybarMarker = {
   ts: number;
   description: string;
   isError: boolean;
+  isSuccess: boolean;
 };
 
 type PlaybarSliderProps = {
@@ -60,9 +60,11 @@ export const PlaybarSlider = ({
           <div
             className={styles.markerDot}
             style={{
-              backgroundColor: mark.isError
-                ? 'var(--mantine-color-red-6)'
-                : 'var(--mantine-color-gray-6)',
+              backgroundColor: mark.isSuccess
+                ? 'var(--mantine-color-green-6)'
+                : mark.isError
+                  ? 'var(--mantine-color-red-6)'
+                  : 'var(--mantine-color-gray-6)',
               left: `${((mark.ts - min) / (max - min)) * 100}%`,
             }}
             onClick={() => onChange(mark.ts)}
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index 14605be0a..1c320203a 100644
--- a/packages/app/src/SessionSubpanel.tsx
+++ b/packages/app/src/SessionSubpanel.tsx
@@ -331,7 +331,6 @@ export default function SessionSubpanel({
     [traceSource, rumSessionId],
   );
 
-  // Events shown in the all events tab
   const allEventsFilter = useMemo(
     () => ({
       type: 'lucene' as const,
@@ -365,7 +364,7 @@ export default function SessionSubpanel({
         offset: 0,
       },
       filters: [
-        allEventsFilter,
+        tab === 'highlighted' ? highlightedEventsFilter : allEventsFilter,
         ...(where ? [{ type: whereLanguage, condition: where }] : []),
       ],
     }),
@@ -379,6 +378,8 @@ export default function SessionSubpanel({
       end,
       whereLanguage,
       searchedQuery,
+      tab,
+      highlightedEventsFilter,
       allEventsFilter,
       where,
     ],
diff --git a/packages/app/styles/PlaybarSlider.module.scss b/packages/app/styles/PlaybarSlider.module.scss
index 40594b24d..35e18555a 100644
--- a/packages/app/styles/PlaybarSlider.module.scss
+++ b/packages/app/styles/PlaybarSlider.module.scss
@@ -25,7 +25,7 @@
   position: absolute;
   top: 0;
   margin-left: -1px;
-  width: 3px;
+  width: 2px;
   height: 8px;
   background-color: #333;
   border-radius: 1px;