From 4cd23906266a6b7a3ff96185ef4d2de2516efe2b Mon Sep 17 00:00:00 2001
From: Zac Bergquist <zac.bergquist@goteleport.com>
Date: Mon, 24 Jun 2024 14:48:19 -0600
Subject: [PATCH] Display websocket errors in the UI

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 aaf33765d10c1..4d75a708ef07c 100644
--- a/lib/web/apiserver.go
+++ b/lib/web/apiserver.go
@@ -4131,6 +4131,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;