send logs from client to ext channel

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

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':

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)
     }

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}>

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

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) {

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 () => {