Bug 1594096 - Display exceptions in the Replay timeline r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D51949

--HG--
extra : moz-landing-system : lando

devtools/client/themes/webconsole.css

@@ -179,12 +179,12 @@ a {
 }
 
 .message.paused:not(.paused-before) {
-  border-bottom-color: var(--purple-50);
+  border-top-color: var(--purple-50);
   /* always show the border, even for the last child */
-  border-bottom-width: 1px;
+  border-top-width: 1px;
 }
 
-.message.paused ~ .message:not(.command):not(.result) .message-body-wrapper,
+.message.paused ~ .message .message-body-wrapper,
 .message.paused.paused-before .message-body-wrapper {
   opacity: 0.5;
 }

devtools/client/webconsole/components/Output/message-types/PageError.js

@@ -44,6 +44,7 @@ function PageError(props) {
     isPaused,
     maybeScrollToBottom,
     inWarningGroup,
+    pausedExecutionPoint,
   } = props;
   const {
     id: messageId,
@@ -92,6 +93,7 @@ function PageError(props) {
     timestampsVisible,
     maybeScrollToBottom,
     message,
+    pausedExecutionPoint,
   });
 }
 

devtools/client/webreplay/components/WebReplayPlayer.js

@@ -44,6 +44,10 @@ function log(message) {
   }
 }
 
+function isError(message) {
+  return message.source === "javascript" && message.level === "error";
+}
+
 function CommandButton({ img, className, onClick, active }) {
   const images = {
     rewind: "replay-resume",
@@ -185,6 +189,9 @@ class WebReplayPlayer extends Component {
   }
 
   isCached(message) {
+    if (!message.executionPoint) {
+      return false;
+    }
     return this.state.cachedPoints.includes(message.executionPoint.progress);
   }
 
@@ -243,9 +250,9 @@ class WebReplayPlayer extends Component {
       const { executionPoint, recordingEndpoint } = packet;
       const closestMessage = this.getClosestMessage(executionPoint);
 
-      const pausedMessage = this.state.messages.find(message =>
-        pointEquals(message.executionPoint, executionPoint)
-      );
+      const pausedMessage = this.state.messages
+        .filter(message => message.executionPoint)
+        .find(message => pointEquals(message.executionPoint, executionPoint));
 
       this.setState({
         executionPoint,
@@ -304,7 +311,7 @@ class WebReplayPlayer extends Component {
     if (visibleMessages != this.state.visibleMessages) {
       let messages = visibleMessages
         .map(id => messagesById.get(id))
-        .filter(message => message.source == "console-api");
+        .filter(message => message.source == "console-api" || isError(message));
 
       messages = sortBy(messages, message => getMessageProgress(message));