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.
- ) : null}
-
0,
- [styles.domPlayerWrapperPaused]: playerState === 'paused',
- })}
- >
-
-
+ ) : (
+ 0,
+ [styles.domPlayerWrapperPaused]: playerState === 'paused',
+ })}
+ >
+
+
+ )}
>
);
diff --git a/packages/app/src/Playbar.tsx b/packages/app/src/Playbar.tsx
index 7225e853f..3413acf08 100644
--- a/packages/app/src/Playbar.tsx
+++ b/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',
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 = ({
onChange(mark.ts)}
diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx
index c38de50ea..1c320203a 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}"
@@ -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,
],
diff --git a/packages/app/styles/PlaybarSlider.module.scss b/packages/app/styles/PlaybarSlider.module.scss
index 947b09740..35e18555a 100644
--- a/packages/app/styles/PlaybarSlider.module.scss
+++ b/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;