Use polyfill for streaming

coder · BrunoQuaresma · Jun 3, 2022 · Jun 2, 2022 · Jun 2, 2022 · Jun 2, 2022
commit 54784117c63f9d5286d0c5116c86e708e6e52c98
diff --git a/site/can-ndjson-stream.d.ts b/site/can-ndjson-stream.d.ts
@@ -0,0 +1,4 @@
+declare module "can-ndjson-stream" {
+  function ndjsonStream<TValueType>(body: ReadableStream<Uint8Array> | null): Promise<ReadableStream<TValueType>>
+  export default ndjsonStream
+}
diff --git a/site/package.json b/site/package.json
@@ -35,6 +35,7 @@
     "@xstate/inspect": "0.6.5",
     "@xstate/react": "3.0.0",
     "axios": "0.26.1",
+    "can-ndjson-stream": "1.0.2",
     "cronstrue": "2.5.0",
     "dayjs": "1.11.2",
     "formik": "2.2.9",

diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1,4 +1,5 @@
 import axios, { AxiosRequestHeaders } from "axios"
+import ndjsonStream from "can-ndjson-stream"
 import * as Types from "./types"
 import { WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"
@@ -271,18 +272,16 @@ export const getWorkspaceBuildLogs = async (buildname: string): Promise<TypesGen
   return response.data
 }
 
-export const streamWorkspaceBuildLogs = async (buildname: string): Promise<ReadableStreamDefaultReader<string>> => {
+export const streamWorkspaceBuildLogs = async (
+  buildname: string,
+): Promise<ReadableStreamDefaultReader<TypesGen.ProvisionerJobLog>> => {
   // Axios does not support HTTP stream in the browser
   // https://github.com/axios/axios/issues/1474
   // So we are going to use window.fetch and return a "stream" reader
-  const reader = await window.fetch(`/api/v2/workspacebuilds/${buildname}/logs?follow=true`).then((res) => {
-    if (!res.body) {
-      throw new Error("No body returned from the response")
-    }
-
-    // eslint-disable-next-line compat/compat
-    return res.body.pipeThrough(new TextDecoderStream()).getReader()
-  })
+  const reader = await window
+    .fetch(`/api/v2/workspacebuilds/${buildname}/logs?follow=true`)
+    .then((res) => ndjsonStream<TypesGen.ProvisionerJobLog>(res.body))
+    .then((stream) => stream.getReader())
 
   return reader
 }
diff --git a/site/src/xServices/workspaceBuild/workspaceBuildXService.ts b/site/src/xServices/workspaceBuild/workspaceBuildXService.ts
@@ -13,8 +13,8 @@ type LogsContext = {
 
 type LogsEvent =
   | {
-      type: "ADD_LOGS"
-      logs: ProvisionerJobLog[]
+      type: "ADD_LOG"
+      log: ProvisionerJobLog
     }
   | {
       type: "NO_MORE_LOGS"
@@ -80,8 +80,8 @@ export const workspaceBuildMachine = createMachine(
           },
         },
         on: {
-          ADD_LOGS: {
-            actions: "addNewLogs",
+          ADD_LOG: {
+            actions: "addLog",
           },
           NO_MORE_LOGS: {
             target: "loaded",
@@ -109,10 +109,10 @@ export const workspaceBuildMachine = createMachine(
       assignLogs: assign({
         logs: (_, event) => event.data,
       }),
-      addNewLogs: assign({
+      addLog: assign({
         logs: (context, event) => {
           const previousLogs = context.logs ?? []
-          return [...previousLogs, ...event.logs]
+          return [...previousLogs, event.log]
         },
       }),
     },
@@ -132,10 +132,7 @@ export const workspaceBuildMachine = createMachine(
             break
           }
 
-          if (value) {
-            const logs = value.split("\n").map((jsonString) => JSON.parse(jsonString) as ProvisionerJobLog)
-            callback({ type: "ADD_LOGS", logs })
-          }
+          callback({ type: "ADD_LOG", log: value })
         }
       },
     },

diff --git a/site/yarn.lock b/site/yarn.lock
@@ -4731,6 +4731,18 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
 
+can-namespace@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/can-namespace/-/can-namespace-1.0.0.tgz#0b8fafafbb11352b9ead4222ffe3822405b43e99"
+  integrity sha512-1sBY/SLwwcmxz3NhyVhLjt2uD/dZ7V1mII82/MIXSDn5QXnslnosJnjlP8+yTx2uTCRvw1jlFDElRs4pX7AG5w==
+
+can-ndjson-stream@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/can-ndjson-stream/-/can-ndjson-stream-1.0.2.tgz#6a8131f9c8c697215163b3fe49a0c02e4439cb47"
+  integrity sha512-//tM8wcTV42SyD1JGua7WMVftZEeTwapcHJTTe3vJwuVywXD01CJbdEkgwRYjy2evIByVJV21ZKBdSv5ygIw1w==
+  dependencies:
+    can-namespace "^1.0.0"
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"