fix: Not all console.error shows up in session replay play bar annotations (#765)

Author: ernestii

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>
     </>
   );

packages/app/src/Playbar.tsx

@@ -75,8 +75,11 @@ export default function Playbar({
           const isError =
             event.severity_text?.toLowerCase() === 'error' ||
             event.component === 'error' ||
+            event.component === 'console' ||
             statusCode >= 399;
 
+          const isSuccess = !isError && statusCode < 400 && statusCode > 99;
+
           return {
             id: event.id,
             ts: event.startOffset,
@@ -93,6 +96,7 @@ export default function Playbar({
                     ? 'Intercom Chat Opened'
                     : event.body,
             isError,
+            isSuccess,
           };
         }) ?? [],
       'percentage',

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)}

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}"
@@ -363,7 +364,7 @@ export default function SessionSubpanel({
         offset: 0,
       },
       filters: [
-        filteredEventsFilter,
+        tab === 'highlighted' ? highlightedEventsFilter : allEventsFilter,
         ...(where ? [{ type: whereLanguage, condition: where }] : []),
       ],
     }),
@@ -377,7 +378,9 @@ export default function SessionSubpanel({
       end,
       whereLanguage,
       searchedQuery,
-      filteredEventsFilter,
+      tab,
+      highlightedEventsFilter,
+      allEventsFilter,
       where,
     ],
   );
@@ -410,7 +413,7 @@ export default function SessionSubpanel({
         offset: 0,
       },
       filters: [
-        tab === 'highlighted' ? filteredEventsFilter : allEventsFilter,
+        tab === 'highlighted' ? highlightedEventsFilter : allEventsFilter,
         ...(where ? [{ type: whereLanguage, condition: where }] : []),
       ],
     }),
@@ -425,7 +428,7 @@ export default function SessionSubpanel({
       whereLanguage,
       searchedQuery,
       tab,
-      filteredEventsFilter,
+      highlightedEventsFilter,
       allEventsFilter,
       where,
     ],

packages/app/styles/PlaybarSlider.module.scss

@@ -25,10 +25,11 @@
   position: absolute;
   top: 0;
   margin-left: -1px;
-  width: 3px;
+  width: 2px;
   height: 8px;
   background-color: #333;
   border-radius: 1px;
+  opacity: 0.5;
 
   &:hover {
     opacity: 1 !important;