send logs from client to ext channel

ShMcK · ShMcK · commit b1d4e3b0ab4c · 2022-01-02T11:18:36.000-08:00
Signed-off-by: shmck &lt;shawn.j.mckay@gmail.com&gt;
diff --git a/src/channel.ts b/src/channel.ts
@@ -28,7 +28,14 @@ class Channel implements Channel {
     // action may be an object.type or plain string
     const actionType: string = typeof action === 'string' ? action : action.type
 
-    logger(`EXT RECEIVED: "${actionType}"`)
+    if (actionType === 'CLIENT_LOG') {
+      // logs in web client are not easily visible
+      // it's simpler to log to the "CodeRoad (Logs)" channel
+      logger(action.payload)
+      return
+    }
+
+    logger(actionType)
 
     switch (actionType) {
       case 'EDITOR_STARTUP':
diff --git a/src/services/logger/index.ts b/src/services/logger/index.ts
@@ -9,7 +9,7 @@ const logger = (...messages: Log[]): void => {
   // to get around it, we can log with multiple log statements
   for (const message of messages) {
     if (typeof message === 'object') {
-      logChannel.appendLine(JSON.stringify(message))
+      logChannel.appendLine(message)
     } else {
       logChannel.appendLine(message)
     }
diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
@@ -20,8 +20,11 @@ const Routes = () => {
     return <ErrorView send={send} error={context.error} />
   }
 
-  logger(`ROUTE: ${route}`)
-  logger(`POSITION: ${JSON.stringify(context.position)}`)
+  logger(
+    `ROUTE: "${route}": ${context.position?.complete ? 'Completed' : 'On'} level ${
+      context.position?.levelId || 'unknown'
+    }, step ${context.position?.stepId || 'unknown'}`,
+  )
 
   return (
     <Router route={route}>
diff --git a/web-app/src/environment.ts b/web-app/src/environment.ts
@@ -9,7 +9,6 @@
 export const DEBUG: boolean = (process.env.REACT_APP_DEBUG || '').toLowerCase() === 'true'
 export const VERSION: string = process.env.VERSION || 'unknown'
 export const NODE_ENV: string = process.env.NODE_ENV || 'development'
-export const LOG: boolean = (process.env.REACT_APP_LOG || '').toLowerCase() === 'true'
 export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL || ''
 
 // config variables
diff --git a/web-app/src/services/logger/index.ts b/web-app/src/services/logger/index.ts
@@ -1,11 +1,16 @@
-import { LOG } from '../../environment'
+import { editor } from '../state/useStateMachine'
 
 export type Log = string | object | number | null
 
 const logger = (...messages: Log[]): void => {
-  if (!LOG) {
-    return
-  }
+  // logs are difficult to view in the web client.
+  // for debugging purposes it's easier to collect logs in the "CodeRoad (Logs)" output channel
+  editor.postMessage({
+    type: 'CLIENT_LOG',
+    payload: messages,
+    source: 'coderoad', // filter events by source on editor side
+  })
+
   // Inside vscode, you console.log does not allow more than 1 param
   // to get around it, we can log with multiple log statements
   for (const message of messages) {
diff --git a/web-app/src/services/state/useStateMachine.tsx b/web-app/src/services/state/useStateMachine.tsx
@@ -13,21 +13,20 @@ interface Output {
 
 declare let acquireVsCodeApi: any
 
-const editor = acquireVsCodeApi()
-const editorSend = (action: T.Action) => {
-  logger(`TO EXT: "${action.type}"`)
-  return editor.postMessage({
+export const editor = acquireVsCodeApi()
+
+const editorSend = (action: T.Action) =>
+  editor.postMessage({
     ...action,
     source: 'coderoad', // filter events by source on editor side
   })
-}
 
 // router finds first state match of <Route path='' />
 const useStateMachine = (): Output => {
   const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend }))
 
   const sendWithLog = (action: T.Action): void => {
-    logger(`SEND: ${action.type}`, action)
+    logger(action)
     send(action)
   }
 
@@ -43,7 +42,7 @@ const useStateMachine = (): Output => {
         // filter out events from other extensions
         return
       }
-      sendWithLog(action)
+      send(action)
     }
     window.addEventListener(listener, handler)
     return () => {

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ const logger = (...messages: Log[]): void => {`
`9`	`9`	`// to get around it, we can log with multiple log statements`
`10`	`10`	`for (const message of messages) {`
`11`	`11`	`if (typeof message === 'object') {`
`12`		`- logChannel.appendLine(JSON.stringify(message))`
	`12`	`+ logChannel.appendLine(message)`
`13`	`13`	`} else {`
`14`	`14`	`logChannel.appendLine(message)`
`15`	`15`	`}`