add error handling to web app

Author: ShMcK

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

@@ -2,6 +2,7 @@ import { ApolloError } from 'apollo-boost'
 import { GraphQLError } from 'graphql'
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
+import onError from 'services/sentry/onError'
 
 const styles = {
   container: {
@@ -16,7 +17,12 @@ interface Props {
 }
 
 const ErrorView = ({ error }: Props) => {
-  console.log(error)
+  // log error
+  React.useEffect(() => {
+    console.log(error)
+    onError(error)
+  }, [])
+
   return (
     <div css={styles.container}>
       <h1>Error</h1>

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

@@ -1,20 +1,22 @@
 import * as React from 'react'
+import onError from '../../services/sentry/onError'
 
 class ErrorBoundary extends React.Component {
-  public state = { hasError: false }
+  public state = { errorMessage: null }
 
   public componentDidCatch(error: Error, info: any) {
+    onError(error)
     // Display fallback UI
-    this.setState({ hasError: true })
+    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))
   }
 
   public render() {
-    if (this.state.hasError) {
+    if (this.state.errorMessage) {
       // You can render any custom fallback UI
-      return <h1>Something went wrong.</h1>
+      return <h1>{this.state.errorMessage}</h1>
     }
     return this.props.children
   }

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

@@ -4,6 +4,7 @@ import markdownEmoji from 'markdown-it-emoji'
 // @ts-ignore no types for package
 import prism from 'markdown-it-prism'
 import * as React from 'react'
+import onError from '../../services/sentry/onError'
 // load prism styles & language support
 import './prism'
 
@@ -56,7 +57,9 @@ const Markdown = (props: Props) => {
   try {
     html = md.render(props.children)
   } catch (error) {
-    console.log(`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;'>
 			<strong style='padding-bottom: 0.5rem;'>ERROR: Failed to parse markdown</strong>
 			<p>${props.children}</p>

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

@@ -6,6 +6,7 @@ import machine from '../../services/state/machine'
 import { useMachine } from '../../services/xstate-react'
 import debuggerWrapper from '../Debugger/debuggerWrapper'
 import Route from './Route'
+import onError from 'services/sentry/onError'
 
 interface Props {
   children: any
@@ -45,7 +46,9 @@ const Router = ({ children }: Props): React.ReactElement<CloneElementProps> | nu
       return debuggerWrapper(element, state)
     }
   }
-  console.warn(`No Route matches for ${JSON.stringify(state)}`)
+  const message = `No Route matches for ${JSON.stringify(state)}`
+  onError(new Error(message))
+  console.warn(message)
   return null
 }
 

web-app/src/services/selectors/tutorial.ts

@@ -1,17 +1,22 @@
 import { createSelector } from 'reselect'
 import { MachineContext } from 'typings'
 import * as G from 'typings/graphql'
+import onError from 'services/sentry/onError'
 
 export const currentTutorial = ({ tutorial }: MachineContext): G.Tutorial => {
   if (!tutorial) {
-    throw new Error('Tutorial not found')
+    const error = new Error('Tutorial not found')
+    onError(error)
+    throw error
   }
   return tutorial
 }
 
 export const currentVersion = createSelector(currentTutorial, (tutorial: G.Tutorial) => {
   if (!tutorial.version) {
-    throw new Error('Tutorial version not found')
+    const error = new Error('Tutorial version not found')
+    onError(error)
+    throw error
   }
   return tutorial.version
 })
@@ -26,7 +31,9 @@ export const currentLevel = (context: MachineContext): G.Level =>
 
       const levelIndex = levels.findIndex((l: G.Level) => l.id === context.position.levelId)
       if (levelIndex < 0) {
-        throw new Error('Level not found when selecting level')
+        const error = new Error(`Level not found when selecting level for ${version}`)
+        onError(error)
+        throw error
       }
       const level: G.Level = levels[levelIndex]
 
@@ -41,7 +48,9 @@ export const currentStep = (context: MachineContext): G.Step =>
       const steps: G.Step[] = level.steps
       const step: G.Step | undefined = steps.find((s: G.Step) => s.id === context.position.stepId)
       if (!step) {
-        throw new Error('No Step found')
+        const error = new Error(`No Step found for Level ${level.id}. Expected step ${context.position.stepId}`)
+        onError(error)
+        throw error
       }
       return step
     },

web-app/src/services/state/actions/api.ts

@@ -4,6 +4,7 @@ import client from '../../apollo'
 import { setAuthToken } from '../../apollo/auth'
 import authenticateMutation from '../../apollo/mutations/authenticate'
 import channel from '../../channel'
+import onError from 'services/sentry/onError'
 
 interface AuthenticateData {
   editorLogin: {
@@ -30,6 +31,7 @@ export default {
         },
       })
       .catch(error => {
+        onError(error)
         console.error('ERROR: Authentication failed')
         console.error(error)
       })

web-app/src/services/state/actions/context.ts

@@ -2,6 +2,7 @@ import * as CR from 'typings'
 import * as G from 'typings/graphql'
 import { assign, send } from 'xstate'
 import * as selectors from '../../selectors'
+import onError from 'services/sentry/onError'
 
 export default {
   setEnv: assign({
@@ -147,7 +148,9 @@ export default {
       // has next level?
 
       if (!context.tutorial) {
-        throw new Error('Tutorial not found')
+        const error = new Error('Tutorial not found')
+        onError(error)
+        throw error
       }
 
       const levels = context.tutorial.version.data.levels || []

web-app/src/services/state/actions/editor.ts

@@ -4,6 +4,7 @@ import client from '../../apollo'
 import tutorialQuery from '../../apollo/queries/tutorial'
 import channel from '../../channel'
 import * as selectors from '../../selectors'
+import onError from 'services/sentry/onError'
 
 interface TutorialData {
   tutorial: G.Tutorial
@@ -30,7 +31,9 @@ export default {
   initializeTutorial(context: CR.MachineContext, event: CR.MachineEvent) {
     // setup test runner and git
     if (!context.tutorial) {
-      throw new Error('Tutorial not available to load')
+      const error = new Error('Tutorial not available to load')
+      onError(error)
+      throw error
     }
 
     client
@@ -43,7 +46,9 @@ export default {
       })
       .then(result => {
         if (!result || !result.data || !result.data.tutorial) {
-          return Promise.reject('No tutorial returned from tutorial config query')
+          const message = 'No tutorial returned from tutorial config query'
+          onError(new Error(message))
+          return Promise.reject(message)
         }
 
         channel.editorSend({
@@ -52,7 +57,9 @@ export default {
         })
       })
       .catch((error: Error) => {
-        return Promise.reject(`Failed to load tutorial config ${error.message}`)
+        const message = `Failed to load tutorial config ${error.message}`
+        onError(new Error(message))
+        return Promise.reject(message)
       })
   },
   continueConfig(context: CR.MachineContext) {