improve logging

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

Author: ShMcK

src/actions/utils/openFiles.ts

@@ -20,7 +20,7 @@ const openFiles = async (files: string[]) => {
       // ensure the panel is redrawn on the right side first
       vscode.commands.executeCommand(COMMANDS.OPEN_WEBVIEW)
     } catch (error) {
-      console.log(`Failed to open file ${filePath}`, error)
+      console.log(`Failed to open file ${filePath}: ${error.message}`)
     }
   }
 }

src/actions/utils/runCommands.ts

@@ -15,7 +15,7 @@ const runCommands = async (commands: string[], send: (action: T.Action) => void)
     try {
       result = await exec(command)
     } catch (error) {
-      console.log(error)
+      console.log(`Test failed: ${error.message}`)
       send({ type: 'COMMAND_FAIL', payload: { process: { ...process, status: 'FAIL' } } })
       return
     }

src/channel/index.ts

@@ -45,7 +45,7 @@ class Channel implements Channel {
     const actionType: string = typeof action === 'string' ? action : action.type
     // const onError = (error: T.ErrorMessage) => this.send({ type: 'ERROR', payload: { error } })
 
-    // console.log(`ACTION: ${actionType}`)
+    logger(`EXT RECEIVED: "${actionType}"`)
 
     switch (actionType) {
       case 'EDITOR_STARTUP':
@@ -260,7 +260,7 @@ class Channel implements Channel {
       })
 
       // log error to console for safe keeping
-      console.log(`ERROR:\n ${errorMarkdown}`)
+      logger(`ERROR:\n ${errorMarkdown}`)
 
       if (errorMarkdown) {
         // add a clearer error message for the user
@@ -270,6 +270,9 @@ class Channel implements Channel {
 
     // action may be an object.type or plain string
     const actionType: string = typeof action === 'string' ? action : action.type
+
+    logger(`EXT TO CLIENT: "${actionType}"`)
+
     switch (actionType) {
       case 'TEST_PASS':
         const tutorial = this.context.tutorial.get()

src/environment.ts

@@ -2,7 +2,6 @@ require('dotenv').config({
   path: './web-app/.env',
 })
 
-import * as vscode from 'vscode'
 import { getWorkspaceRoot } from './services/workspace'
 
 interface Environment {
@@ -17,7 +16,7 @@ interface Environment {
 const environment: Environment = {
   VERSION: process.env.VERSION || 'unknown',
   NODE_ENV: process.env.NODE_ENV || 'production',
-  LOG: (process.env.LOG || '').toLowerCase() === 'true',
+  LOG: (process.env.REACT_APP_LOG || '').toLowerCase() === 'true' && process.env.NODE_ENV !== 'production',
   API_URL: process.env.REACT_APP_GQL_URI || '',
   SENTRY_DSN: process.env.SENTRY_DSN || null,
   WORKSPACE_ROOT: getWorkspaceRoot(),

web-app/.storybook/config.ts

@@ -5,7 +5,7 @@ import '../src/styles/index.css'
 // @ts-ignore
 global.acquireVsCodeApi = () => ({
   postMessage(event: string) {
-    console.log('postMessage', event)
+    console.log('ERROR: VSCode did not load properly in CodeRoad extension', event)
   },
 })
 

web-app/src/components/Error/index.tsx

@@ -40,7 +40,7 @@ const ErrorMarkdown = ({ error, send }: Props) => {
   React.useEffect(() => {
     if (error) {
       // log error
-      console.log(error)
+      console.log(`ERROR in markdown: ${error.message}`)
     }
   }, [error])
 

web-app/src/components/ErrorBoundary/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import onError from '../../services/sentry/onError'
+import logger from '../../services/logger'
 
 class ErrorBoundary extends React.Component {
   public state = { errorMessage: null }
@@ -9,8 +10,8 @@ class ErrorBoundary extends React.Component {
     // Display fallback UI
     this.setState({ errorMessage: error.message })
     // You can also log the error to an error reporting service
-    console.error(JSON.stringify(error))
-    console.log(JSON.stringify(info))
+    logger('ERROR in component:', JSON.stringify(error))
+    logger('ERROR info:', JSON.stringify(info))
   }
 
   public render() {

web-app/src/components/Markdown/index.tsx

@@ -67,7 +67,7 @@ const Markdown = (props: Props) => {
   try {
     html = md.render(props.children)
   } catch (error) {
-    const message = `failed to parse markdown for ${props.children}`
+    const message = `Failed to parse markdown for ${props.children}`
     onError(new Error(message))
     console.log(message)
     html = `<div style='background-color: #FFB81A; padding: 0.5rem;'>

web-app/src/components/Router/index.tsx

@@ -4,7 +4,7 @@ import { createMachine } from '../../services/state/machine'
 import { useMachine } from '../../services/xstate-react'
 import Route from './Route'
 import onError from '../../services/sentry/onError'
-import { LOG_STATE } from '../../environment'
+import logger from '../../services/logger'
 
 interface Output {
   context: T.MachineContext
@@ -16,27 +16,30 @@ interface Output {
 declare let acquireVsCodeApi: any
 
 const editor = acquireVsCodeApi()
+const editorSend = (action: T.Action) => {
+  logger(`CLIENT TO EXT: "${action.type}"`)
+  return editor.postMessage(action)
+}
 
 // router finds first state match of <Route path='' />
 const useRouter = (): Output => {
-  const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend: editor.postMessage }))
+  const [state, send] = useMachine<T.MachineContext, any>(createMachine({ editorSend }))
 
-  if (LOG_STATE) {
-    console.log(JSON.stringify(state.value))
-  }
+  logger(`STATE: ${JSON.stringify(state.value)}`)
 
   // event bus listener
   React.useEffect(() => {
     const listener = 'message'
     // propograte channel event to state machine
-    const handler = (action: any) => {
+    const handler = (event: any) => {
       // NOTE: must call event.data, cannot destructure. VSCode acts odd
-      const event = action.data
+      const action = event.data
       // ignore browser events from plugins
-      if (event.source) {
+      if (action.source) {
         return
       }
-      send(event)
+      logger(`CLIENT RECEIVED: "${action.type}"`)
+      send(action)
     }
     window.addEventListener(listener, handler)
     return () => {

web-app/src/containers/SelectTutorial/LoadTutorialSummary.tsx

@@ -14,7 +14,7 @@ const LoadTutorialSummary = (props: Props) => {
     return <Loading text="Loading tutorial summary..." />
   }
   if (error) {
-    console.log(error)
+    console.log(`Failed to load tutorial summary: ${error}`)
     return <div>Error loading summary</div>
   }
   if (!data) {