Error page fix (#188)

* fix(error pages): add sentry breadcrumbs and error handling for activity link * chore(release): 0.0.77 * fix(errors): improve error messages
awell-health · Nov 27, 2023 · a28ca1c · a28ca1c
1 parent 7a84f2a
commit a28ca1c
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hosted-pages",
-  "version": "0.0.76",
+  "version": "0.0.77",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -70,4 +70,4 @@
     "typescript": "4.7.4",
     "vitest": "^0.34.6"
   }
-}
+}
diff --git a/pages/api/startHostedActivitySessionViaHostedPagesLink/[hostedPagesLinkId].ts b/pages/api/startHostedActivitySessionViaHostedPagesLink/[hostedPagesLinkId].ts
@@ -6,6 +6,7 @@ import {
   StartHostedActivitySessionParams,
   StartHostedActivitySessionPayload,
 } from '../../../types'
+import { isNil } from 'lodash'
 
 type Data =
   | StartHostedActivitySessionPayload
@@ -31,37 +32,39 @@ export default async function handler(
     }
   )
 
-  try {
-    const session = await fetch(environment.orchestrationApiUrl, {
-      method: 'POST',
-      headers: {
-        authorization: `Bearer ${token}`,
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        query: `
+  const response = await fetch(environment.orchestrationApiUrl, {
+    method: 'POST',
+    headers: {
+      authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      query: `
           mutation StartHostedActivitySessionViaHostedPagesLink($input: StartHostedActivitySessionViaHostedPagesLinkInput!) {
             startHostedActivitySessionViaHostedPagesLink(input: $input) {
               session_id
               session_url
             }
           }
           `,
-        variables: {
-          input: {
-            hosted_pages_link_id: hostedPagesLinkId,
-          },
+      variables: {
+        input: {
+          hosted_pages_link_id: hostedPagesLinkId,
         },
-      }),
-    })
+      },
+    }),
+  })
 
-    const session_response = await session.json()
+  const { data, errors } = await response.json()
+  if (!isNil(errors) && errors.length > 0) {
+    res
+      .status(200)
+      .json({ error: errors[0].extensions?.data?.message ?? errors[0].message })
+    return
+  }
 
-    const { session_id, session_url } =
-      session_response?.data?.startHostedActivitySessionViaHostedPagesLink
+  const { session_id, session_url } =
+    data?.startHostedActivitySessionViaHostedPagesLink
 
-    res.status(200).json({ sessionId: session_id, sessionUrl: session_url })
-  } catch (error) {
-    res.status(500).json({ error })
-  }
+  res.status(200).json({ sessionId: session_id, sessionUrl: session_url })
 }
diff --git a/pages/api/startHostedPathwaySessionFromLink/[hostedPagesLinkId].ts b/pages/api/startHostedPathwaySessionFromLink/[hostedPagesLinkId].ts
@@ -60,7 +60,10 @@ export default async function handler(
   })
   const { data, errors } = await response.json()
   if (!isNil(errors) && errors.length > 0) {
-    res.status(200).json({ error: errors[0].extensions?.data.message })
+    res
+      .status(200)
+      .json({ error: errors[0].extensions?.data?.message ?? errors[0].message })
+    return
   }
 
   const sessionUrl = data?.startHostedPathwaySessionFromLink.session_url

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -74,7 +74,7 @@ const Home: NextPageWithLayout = () => {
       category: BreadcrumbCategory.SESSION_CANCEL,
       data: session,
     })
-    router.push(session?.cancel_url || 'https://awell.health')
+    router.push(session?.cancel_url ?? 'https://awell.health')
   }
 
   const shouldRedirect =
@@ -84,7 +84,18 @@ const Home: NextPageWithLayout = () => {
       !isNil(session?.cancel_url))
 
   useEffect(() => {
-    if (isNil(session?.status) || typeof window === 'undefined') {
+    if (isNil(session?.status)) {
+      addSentryBreadcrumb({
+        category: BreadcrumbCategory.GENERIC,
+        data: { session, message: 'Session status is null' },
+      })
+      return
+    }
+    if (typeof window === 'undefined') {
+      addSentryBreadcrumb({
+        category: BreadcrumbCategory.GENERIC,
+        data: { session, message: 'Window is undefined' },
+      })
       return
     }
 

diff --git a/src/components/StartHostedActivitySessionFlow/StartHostedActivitySessionFlow.tsx b/src/components/StartHostedActivitySessionFlow/StartHostedActivitySessionFlow.tsx
@@ -10,6 +10,8 @@ import { ErrorPage } from '../ErrorPage'
 import { LoadingPage } from '../LoadingPage'
 import { useTranslation } from 'next-i18next'
 import classes from './startHostedActivitySessionFlow.module.css'
+import { addSentryBreadcrumb } from '../../services/ErrorReporter'
+import { BreadcrumbCategory } from '../../services/ErrorReporter/addSentryBreadcrumb'
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
@@ -21,7 +23,7 @@ export const StartHostedActivitySessionFlow: FC<
   const router = useRouter()
   const { t } = useTranslation()
 
-  const { data, error } = useSWR<StartHostedActivitySessionPayload>(
+  const { data } = useSWR<StartHostedActivitySessionPayload>(
     `/api/startHostedActivitySessionViaHostedPagesLink/${hostedPagesLinkId}`,
     fetcher
   )
@@ -32,15 +34,31 @@ export const StartHostedActivitySessionFlow: FC<
 
   useEffect(() => {
     if (!isNil(data) && !isNil(data?.sessionUrl)) {
+      addSentryBreadcrumb({
+        category: BreadcrumbCategory.NAVIGATION,
+        data: {
+          hostedPagesLinkId,
+          sessionUrl: data?.sessionUrl,
+          message: 'Redirecting to hosted session',
+        },
+      })
       const { sessionUrl } = data
       window.location.href = sessionUrl
     }
   }, [data, router])
 
-  if (error) {
+  if (data?.error) {
+    addSentryBreadcrumb({
+      category: BreadcrumbCategory.HOSTED_ACTIVITY_ERROR,
+      data: { hostedPagesLinkId },
+    })
+
     return (
       <div className={classes.container}>
-        <ErrorPage title={t('link_page.loading_error')} onRetry={retry} />
+        <ErrorPage
+          title={`${t('link_page.loading_error')} ${data.error}`}
+          onRetry={retry}
+        />
       </div>
     )
   }

diff --git a/src/components/StartHostedPathwaySessionFlow/StartHostedPathwaySessionFlow.tsx b/src/components/StartHostedPathwaySessionFlow/StartHostedPathwaySessionFlow.tsx
@@ -1,6 +1,6 @@
 import { isNil } from 'lodash'
 import { useRouter } from 'next/router'
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect } from 'react'
 import useSWR from 'swr'
 import { ErrorPage } from '../ErrorPage'
 import { LoadingPage } from '../LoadingPage'
@@ -10,6 +10,8 @@ import {
   StartHostedCareflowSessionParams,
   StartHostedCareflowSessionPayload,
 } from '../../../pages/api/startHostedPathwaySessionFromLink/[hostedPagesLinkId]'
+import { addSentryBreadcrumb } from '../../services/ErrorReporter'
+import { BreadcrumbCategory } from '../../services/ErrorReporter/addSentryBreadcrumb'
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
@@ -28,15 +30,27 @@ export const StartHostedCareflowSessionFlow: FC<
 
   useEffect(() => {
     if (!isNil(data) && !isNil(data?.sessionUrl)) {
+      addSentryBreadcrumb({
+        category: BreadcrumbCategory.NAVIGATION,
+        data: {
+          hostedPagesLinkId,
+          sessionUrl: data?.sessionUrl,
+          message: 'Redirecting to hosted session',
+        },
+      })
       const { sessionUrl } = data
       window.location.href = sessionUrl
     }
   }, [data, router])
 
   if (data?.error) {
+    addSentryBreadcrumb({
+      category: BreadcrumbCategory.HOSTED_PAGES_LINK_ERROR,
+      data: { hostedPagesLinkId, message: data.error },
+    })
     return (
       <div className={classes.container}>
-        <ErrorPage title={data.error} />
+        <ErrorPage title={`${t('link_page.loading_error')} ${data.error}`} />
       </div>
     )
   }

diff --git a/src/services/ErrorReporter/addSentryBreadcrumb.ts b/src/services/ErrorReporter/addSentryBreadcrumb.ts
@@ -12,6 +12,8 @@ export enum BreadcrumbCategory {
   GENERIC = 'GENERIC',
   NAVIGATION = 'NAVIGATION',
   SLOW_REDIRECT = 'SLOW_REDIRECT',
+  HOSTED_PAGES_LINK_ERROR = 'HOSTED_PAGES_LINK_ERROR',
+  HOSTED_ACTIVITY_ERROR = 'HOSTED_ACTIVITY_ERROR',
 }
 
 const SentryBreadcrumbMessageDictionary = {
@@ -25,6 +27,8 @@ const SentryBreadcrumbMessageDictionary = {
   [BreadcrumbCategory.GENERIC]: 'Generic event',
   [BreadcrumbCategory.NAVIGATION]: 'Navigation',
   [BreadcrumbCategory.SLOW_REDIRECT]: 'Slow redirect at session end',
+  [BreadcrumbCategory.HOSTED_PAGES_LINK_ERROR]: 'Error with hosted pages link',
+  [BreadcrumbCategory.HOSTED_ACTIVITY_ERROR]: 'Error with hosted activity link',
 }
 
 export const addSentryBreadcrumb = ({

diff --git a/types/StartHostedActivitySessionPayload.ts b/types/StartHostedActivitySessionPayload.ts
@@ -1,4 +1,5 @@
 export type StartHostedActivitySessionPayload = {
   sessionId: string
   sessionUrl: string
+  error?: string
 }