From 0fd1da7c33a045c43cd91b51569040d150295214 Mon Sep 17 00:00:00 2001
From: Zac Bergquist <zac.bergquist@goteleport.com>
Date: Tue, 25 Jun 2024 08:32:23 -0600
Subject: [PATCH] Display websocket errors in the UI (#43433)

We never implemented UI support for the websocket error message,
so errors were never surfaced to users.

This also uncovered one case where we were sending invalid data
(due to a missing version number).

Closes #42626
---
 lib/web/apiserver.go                           | 1 +
 web/packages/teleport/src/lib/term/protobuf.js | 2 ++
 web/packages/teleport/src/lib/term/tty.ts      | 3 +++
 3 files changed, 6 insertions(+)

diff --git a/lib/web/apiserver.go b/lib/web/apiserver.go
index e03f2fa47fb40..55a981e01a986 100644
--- a/lib/web/apiserver.go
+++ b/lib/web/apiserver.go
@@ -4157,6 +4157,7 @@ func (h *Handler) writeErrToWebSocket(ws *websocket.Conn, err error) {
 		return
 	}
 	errEnvelope := terminal.Envelope{
+		Version: defaults.WebsocketVersion,
 		Type:    defaults.WebsocketError,
 		Payload: trace.UserMessage(err),
 	}
diff --git a/web/packages/teleport/src/lib/term/protobuf.js b/web/packages/teleport/src/lib/term/protobuf.js
index ee79b76cd5e3b..d2526f3cd0538 100644
--- a/web/packages/teleport/src/lib/term/protobuf.js
+++ b/web/packages/teleport/src/lib/term/protobuf.js
@@ -32,6 +32,7 @@ export const MessageTypeEnum = {
   FILE_TRANSFER_REQUEST: 'f',
   FILE_TRANSFER_DECISION: 't',
   WEBAUTHN_CHALLENGE: 'n',
+  ERROR: 'e',
   LATENCY: 'l',
   KUBE_EXEC: 'k',
 };
@@ -62,6 +63,7 @@ export const messageFields = {
       close: MessageTypeEnum.SESSION_END.charCodeAt(0),
       challengeResponse: MessageTypeEnum.WEBAUTHN_CHALLENGE.charCodeAt(0),
       kubeExec: MessageTypeEnum.KUBE_EXEC.charCodeAt(0),
+      error: MessageTypeEnum.ERROR.charCodeAt(0),
     },
   },
 };
diff --git a/web/packages/teleport/src/lib/term/tty.ts b/web/packages/teleport/src/lib/term/tty.ts
index e6913183d3848..6bd9014234323 100644
--- a/web/packages/teleport/src/lib/term/tty.ts
+++ b/web/packages/teleport/src/lib/term/tty.ts
@@ -209,6 +209,9 @@ class Tty extends EventEmitterWebAuthnSender {
             this.emit(TermEvent.DATA, msg.payload);
           }
           break;
+        case MessageTypeEnum.ERROR:
+          this.emit(TermEvent.DATA, msg.payload + '\n');
+          break;
         case MessageTypeEnum.LATENCY:
           this.emit(TermEvent.LATENCY, msg.payload);
           break;