diff --git a/src/api/base.ts b/src/api/base.ts
index 15cc9e783..d2c45fbb1 100644
--- a/src/api/base.ts
+++ b/src/api/base.ts
@@ -21,6 +21,10 @@ interface ErrorData {
   error: string
 }
 
+export class NetworkError extends Error {
+  name = 'NetworkError'
+}
+
 export const request = <Expected>(
   method: HTTPMethod,
   endpoint: string,
@@ -33,12 +37,17 @@ export const request = <Expected>(
 
     onCancel(() => controller.abort())
     const jwt = await getWorkingJWT()
-    const resp = await fetch(apiUrl + endpoint + qs(params), {
-      method,
-      body: JSON.stringify(body),
-      headers: jwt ? { Authorization: `Bearer ${jwt.raw}` } : {},
-      signal,
-    })
+    let resp: Response
+    try {
+      resp = await fetch(apiUrl + endpoint + qs(params), {
+        method,
+        body: JSON.stringify(body),
+        headers: jwt ? { Authorization: `Bearer ${jwt.raw}` } : {},
+        signal,
+      })
+    } catch (error_) {
+      throw new NetworkError(error_.message)
+    }
 
     const text = await resp.text()
 
diff --git a/src/components/analysis-table.tsx b/src/components/analysis-table.tsx
index 388b545b2..2057f936b 100644
--- a/src/components/analysis-table.tsx
+++ b/src/components/analysis-table.tsx
@@ -25,6 +25,7 @@ import { usePromise } from '@/utils/use-promise'
 import { getEventTeams } from '@/api/event-team-info/get-event-teams'
 import { eventTeamUrl } from '@/utils/urls/event-team'
 import { EventTeamInfo } from '@/api/event-team-info'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   eventKey: string
@@ -224,7 +225,10 @@ const AnalysisTable = ({
   const rankColumn: Column<EventTeamInfo | undefined, RowType> = {
     title: 'Rank',
     key: 'Rank',
-    getCell: (row) => rankingInfo?.find((r) => r.team === 'frc' + row.team),
+    getCell: (row) =>
+      isData(rankingInfo)
+        ? rankingInfo.find((r) => r.team === 'frc' + row.team)
+        : undefined,
     getCellValue: (cell) => cell?.rank ?? Infinity,
     renderCell: (cell) => (
       <td class={rankCellStyle}>
diff --git a/src/components/chart.tsx b/src/components/chart.tsx
index aec5d3311..83a7c9a3c 100644
--- a/src/components/chart.tsx
+++ b/src/components/chart.tsx
@@ -24,6 +24,7 @@ import { cleanFieldName } from '@/utils/clean-field-name'
 import { getFieldKey } from '@/utils/get-field-key'
 import { getReports } from '@/api/report/get-reports'
 import { GetReport } from '@/api/report'
+import { isData } from '@/utils/is-data'
 
 const commentsDisplayStyle = css`
   grid-column: 1 / -1;
@@ -106,7 +107,7 @@ export const ChartCard = ({
     return matchesAutoFieldName || matchesTeleopFieldName
   })?.name
 
-  const matchesWithSelectedStat = (matchesStats || [])
+  const matchesWithSelectedStat = (isData(matchesStats) ? matchesStats : [])
     .map(({ matchKey, stats }) => {
       const matchingStat = stats.find((f) => f.name === fullFieldName)
       if (matchingStat) return { matchKey, matchingStat }
@@ -190,7 +191,11 @@ export const ChartCard = ({
         </div>
         {selectedMatchKey && (
           <CommentsDisplay
-            reports={allReports.filter((r) => r.matchKey === selectedMatchKey)}
+            reports={
+              isData(allReports)
+                ? allReports.filter((r) => r.matchKey === selectedMatchKey)
+                : []
+            }
           />
         )}
       </div>
diff --git a/src/components/comment-card.tsx b/src/components/comment-card.tsx
index 26ef25a3c..3e0872835 100644
--- a/src/components/comment-card.tsx
+++ b/src/components/comment-card.tsx
@@ -6,6 +6,7 @@ import Icon from './icon'
 import { mdiMessageReplyText } from '@mdi/js'
 import { formatUserName } from '@/utils/format-user-name'
 import { getFastestUser } from '@/cache/users/get-fastest'
+import { isData } from '@/utils/is-data'
 
 const commentCardStyle = css`
   display: grid;
@@ -52,7 +53,11 @@ export const CommentCard = ({
       class={commentCardStyle}
     >
       <Icon icon={mdiMessageReplyText} />
-      {showReporter && <span>{formatUserName(reporter, reporterId)}</span>}
+      {showReporter && (
+        <span>
+          {formatUserName(isData(reporter) ? reporter : undefined, reporterId)}
+        </span>
+      )}
       <p>{report.comment}</p>
     </Card>
   )
diff --git a/src/components/dialog.tsx b/src/components/dialog.tsx
index b4497f451..2fdf33982 100644
--- a/src/components/dialog.tsx
+++ b/src/components/dialog.tsx
@@ -100,7 +100,13 @@ export const DialogDisplayer = () => {
       <div tabIndex={0} class={dialogStyle} aria-modal="true" role="dialog">
         {dialog.title && <h1>{dialog.title}</h1>}
         {typeof dialog.description === 'string' ? (
-          <p>{dialog.description}</p>
+          <p
+            class={css`
+              font-weight: 500;
+            `}
+          >
+            {dialog.description}
+          </p>
         ) : (
           dialog.description
         )}
diff --git a/src/components/profile-link.tsx b/src/components/profile-link.tsx
index b5648476a..dad873970 100644
--- a/src/components/profile-link.tsx
+++ b/src/components/profile-link.tsx
@@ -5,6 +5,7 @@ import { css } from 'linaria'
 import { mdiAccountCircle } from '@mdi/js'
 import { pigmicePurple } from '@/colors'
 import { getFastestUser } from '@/cache/users/get-fastest'
+import { isData } from '@/utils/is-data'
 
 export const ProfileLink = ({
   reporterId,
@@ -26,7 +27,7 @@ export const ProfileLink = ({
       class={reporterStyle}
     >
       <Icon icon={mdiAccountCircle} />
-      {formatUserName(reporter, reporterId)}
+      {formatUserName(isData(reporter) ? reporter : undefined, reporterId)}
     </El>
   )
 }
diff --git a/src/components/report-editor.tsx b/src/components/report-editor.tsx
index 098d175c7..cd546d7f6 100644
--- a/src/components/report-editor.tsx
+++ b/src/components/report-editor.tsx
@@ -26,12 +26,11 @@ import { mdiAccountCircle } from '@mdi/js'
 import { useEventMatches } from '@/cache/event-matches/use'
 import { formatMatchKeyShort } from '@/utils/format-match-key-short'
 import { matchHasTeam } from '@/utils/match-has-team'
-import { request } from '@/api/base'
 import { createDialog } from './dialog'
-import { createAlert } from '@/router'
-import { AlertType } from './alert'
 import Loader from './loader'
 import Card from './card'
+import { isData } from '@/utils/is-data'
+import { getReports } from '@/api/report/get-reports'
 
 const reportEditorStyle = css`
   padding: 1.5rem 2rem;
@@ -71,6 +70,7 @@ const userDropdownStyle = css`
   align-items: center;
 `
 
+// eslint-disable-next-line complexity
 export const ReportEditor = ({
   initialReport,
   onMatchSelect,
@@ -84,10 +84,16 @@ export const ReportEditor = ({
   const [isDeleting, setIsDeleting] = useState<boolean>(false)
   const [matchKey, setMatchKey] = useState(initialReport.matchKey)
   const [comment, setComment] = useState(initialReport.comment || '')
-  const schemaId = useEventInfo(eventKey)?.schemaId
-  const schema = useSchema(schemaId)?.schema
+
+  const eventInfo = useEventInfo(eventKey)
+  const schemaId = isData(eventInfo) ? eventInfo.schemaId : undefined
+  const testSchema = useSchema(schemaId)
+  const schema = isData(testSchema) ? testSchema.schema : undefined
+
   const eventMatches = useEventMatches(eventKey)
-  const match = eventMatches?.find((match) => matchKey === match.key)
+  const match = isData(eventMatches)
+    ? eventMatches.find((match) => matchKey === match.key)
+    : undefined
   const { jwt } = useJWT()
   const isAdmin = jwt?.peregrineRoles.isAdmin
   const users = usePromise(() => getUsers(), [])
@@ -161,66 +167,67 @@ export const ReportEditor = ({
   }
   const report = getReportIfValid()
 
-  const submit = (e: Event) => {
+  const submit = async (e: Event) => {
     e.preventDefault()
     if (!report) return
     setIsSaving(true)
-    uploadReport(report)
-      .then((id) => {
-        onSaveSuccess({ ...report, id })
-      })
-      .catch(async (error: { error?: string; id?: number }) => {
-        if (error.error === 'conflicts' && error.id !== undefined) {
-          const conflictingId = error.id
-          const shouldOverride = await createDialog({
-            confirm: `Override Report ${conflictingId}`,
-            dismiss: 'Cancel',
-            description: `There is already a report with the same reporter, team, and match.`,
-            title: `This report conflicts with report ${conflictingId}`,
-          })
-          if (shouldOverride) {
-            await request<null>(
-              'PUT',
-              `reports/${report.id}`,
-              { replace: true },
-              report,
-            )
-            createAlert({
-              type: AlertType.Success,
-              message: `Report ${conflictingId} was overridden`,
-            })
-            onSaveSuccess(report as GetReport)
-          }
-          if (report.key) {
-            deleteReportLocally(report.key)
-            onDelete?.()
-          }
-        } else {
+    const matchReports = await getReports({
+      event: report.eventKey,
+      match: report.matchKey,
+    })
+    let shouldOverride = true
+    for (const conflictReport of matchReports) {
+      if (
+        conflictReport.id !== report.id &&
+        conflictReport.teamKey === report.teamKey &&
+        conflictReport.reporterId === report.reporterId
+      ) {
+        const conflictingId = conflictReport.id
+        shouldOverride = await createDialog({
+          confirm: `Override Report ${conflictingId}`,
+          dismiss: 'Cancel',
+          description: `There is already a report with the same reporter, team, and match.`,
+          title: `This report conflicts with report ${conflictingId}.`,
+        })
+      }
+    }
+    if (shouldOverride) {
+      uploadReport(report)
+        .then((id) => {
+          onSaveSuccess({ ...report, id })
+        })
+        .catch(() => {
           const reportWithKey = {
             ...report,
             key: initialReport.key || generateReportKey(),
           }
           saveReportLocally(reportWithKey)
           if (onSaveLocally) onSaveLocally(reportWithKey)
-        }
-      })
-      .finally(() => {
-        setIsSaving(false)
-      })
+        })
+    }
+    setIsSaving(false)
   }
   const handleDelete = async (e: Event) => {
-    e.preventDefault()
-    if (initialReport.key) {
-      deleteReportLocally(initialReport.key)
-    } else {
-      const reportId = initialReport.id
-      if (reportId !== undefined) {
-        setIsDeleting(true)
-        await deleteReport(reportId)
-        setIsDeleting(false)
+    const confirmDelete = await createDialog({
+      confirm: 'Delete Report',
+      dismiss: 'Cancel',
+      description: '',
+      title: 'Confirm Delete',
+    })
+    if (confirmDelete) {
+      e.preventDefault()
+      if (initialReport.key) {
+        deleteReportLocally(initialReport.key)
+      } else {
+        const reportId = initialReport.id
+        if (reportId !== undefined) {
+          setIsDeleting(true)
+          await deleteReport(reportId)
+          setIsDeleting(false)
+        }
       }
+      onDelete?.()
     }
-    onDelete?.()
   }
   const reportAlreadyExists =
     initialReport.key !== undefined || initialReport.id !== undefined
@@ -228,14 +235,18 @@ export const ReportEditor = ({
   return eventMatches && match && visibleFields ? (
     <Card as="form" class={reportEditorStyle} onSubmit={submit}>
       <Dropdown
-        options={eventMatches}
+        options={isData(eventMatches) ? eventMatches : []}
         onChange={(match) => {
           onMatchSelect?.(match.key)
           setMatchKey(match.key)
         }}
         getKey={(match) => match.key}
         getText={(match) => formatMatchKeyShort(match.key)}
-        value={eventMatches.find((match) => match.key === matchKey)}
+        value={
+          isData(eventMatches)
+            ? eventMatches.find((match) => match.key === matchKey)
+            : undefined
+        }
       />
       <TeamPicker
         onChange={setTeam}
@@ -271,9 +282,15 @@ export const ReportEditor = ({
         <div class={userDropdownStyle}>
           <Icon icon={mdiAccountCircle} />
           <Dropdown
-            options={users.sort((a, b) =>
-              a.firstName.toLowerCase() > b.firstName.toLowerCase() ? 1 : -1,
-            )}
+            options={
+              isData(users)
+                ? users.sort((a, b) =>
+                    a.firstName.toLowerCase() > b.firstName.toLowerCase()
+                      ? 1
+                      : -1,
+                  )
+                : []
+            }
             onChange={(user) => {
               setReporterId(user.id)
               setRealmId(user.realmId)
@@ -281,10 +298,16 @@ export const ReportEditor = ({
             getKey={(user) => user.id}
             getText={(user) => `${user.firstName} ${user.lastName}`}
             getGroup={(user) =>
-              realms?.find((realm) => realm.id === user.realmId)?.name ||
-              String(user.realmId)
+              isData(realms)
+                ? realms.find((realm) => realm.id === user.realmId)?.name ||
+                  String(user.realmId)
+                : null
+            }
+            value={
+              isData(users)
+                ? users.find((user) => user.id === reporterId)
+                : undefined
             }
-            value={users.find((user) => user.id === reporterId)}
           />
         </div>
       )}
diff --git a/src/components/report-viewer.tsx b/src/components/report-viewer.tsx
index 5a8e9dcd3..84f9b497e 100644
--- a/src/components/report-viewer.tsx
+++ b/src/components/report-viewer.tsx
@@ -12,6 +12,7 @@ import { CommentCard } from './comment-card'
 import { css } from 'linaria'
 import { cleanFieldName } from '@/utils/clean-field-name'
 import { ProfileLink } from './profile-link'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   report: Report
@@ -66,10 +67,10 @@ export const ReportViewer = ({ report, onEditClick }: Props) => {
   const reporterId = report.reporterId
   const eventInfo = useEventInfo(report.eventKey)
   const matchInfo = useMatchInfo(report.eventKey, report.matchKey)
-  const schema = useSchema(eventInfo?.schemaId)
-  const displayableFields = schema?.schema.filter(
-    (field) => field.reportReference !== undefined,
-  )
+  const schema = useSchema(isData(eventInfo) ? eventInfo.schemaId : undefined)
+  const displayableFields = isData(schema)
+    ? schema.schema.filter((field) => field.reportReference !== undefined)
+    : undefined
   const autoFields = displayableFields?.filter(
     (field) => field.period === 'auto',
   )
@@ -99,8 +100,8 @@ export const ReportViewer = ({ report, onEditClick }: Props) => {
       <div>
         {matchInfo && (
           <TeamPicker
-            redAlliance={matchInfo.redAlliance}
-            blueAlliance={matchInfo.blueAlliance}
+            redAlliance={isData(matchInfo) ? matchInfo.redAlliance : []}
+            blueAlliance={isData(matchInfo) ? matchInfo.blueAlliance : []}
             value={report.teamKey}
             editable={false}
           />
diff --git a/src/routes/event-analysis.tsx b/src/routes/event-analysis.tsx
index 94ba5454e..db3a0898b 100644
--- a/src/routes/event-analysis.tsx
+++ b/src/routes/event-analysis.tsx
@@ -13,6 +13,7 @@ import {
   tablePageTableStyle,
 } from '@/utils/table-page-style'
 import Card from '@/components/card'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   eventKey: string
@@ -26,7 +27,7 @@ const EventAnalysis: FunctionComponent<Props> = ({ eventKey }) => {
   const eventStats = usePromise(() => getEventStats(eventKey), [eventKey])
   const eventInfo = useEventInfo(eventKey)
 
-  const schema = useSchema(eventInfo?.schemaId)
+  const schema = useSchema(isData(eventInfo) ? eventInfo.schemaId : undefined)
 
   return (
     <Page
@@ -35,7 +36,7 @@ const EventAnalysis: FunctionComponent<Props> = ({ eventKey }) => {
       class={tablePageStyle}
       wrapperClass={tablePageWrapperStyle}
     >
-      {eventStats && schema ? (
+      {isData(eventStats) && schema ? (
         eventStats.length === 0 ? (
           'No Event Data'
         ) : (
@@ -43,7 +44,7 @@ const EventAnalysis: FunctionComponent<Props> = ({ eventKey }) => {
             <AnalysisTable
               eventKey={eventKey}
               teams={eventStats}
-              schema={schema}
+              schema={isData(schema) ? schema : { id: -1, schema: [] }}
               renderTeam={(team, link) => (
                 <a class={teamStyle} href={link}>
                   {team}
diff --git a/src/routes/event-match.tsx b/src/routes/event-match.tsx
index 1da8ca0b3..f3fbb0918 100644
--- a/src/routes/event-match.tsx
+++ b/src/routes/event-match.tsx
@@ -20,6 +20,7 @@ import { BooleanDisplay } from '@/components/boolean-display'
 import { matchHasTeam } from '@/utils/match-has-team'
 import { VideoCard } from '@/components/video-card'
 import { cleanYoutubeUrl } from '@/utils/clean-youtube-url'
+import { isData } from '@/utils/is-data'
 import { MatchReports } from '@/components/match-reports'
 import { getReports } from '@/api/report/get-reports'
 import Icon from '@/components/icon'
@@ -126,12 +127,15 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
   const m = formatMatchKey(matchKey)
   const event = useEventInfo(eventKey)
   const match = useMatchInfo(eventKey, matchKey)
+  const matchRedAlliance = isData(match) ? match.redAlliance : undefined
   const reports = usePromise(() => {
     if (isOnline) {
       return getReports({ event: eventKey, match: matchKey })
     }
   }, [eventKey, matchKey, isOnline])
-  const schema = useSchema(isOnline ? event?.schemaId : undefined)
+  const schema = useSchema(
+    isOnline && isData(event) ? event.schemaId : undefined,
+  )
   const eventTeamsStats = usePromise(() => {
     if (isOnline) {
       return getEventStats(eventKey)
@@ -142,8 +146,9 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
     showEventResults,
   )
 
-  const matchHasBeenPlayed =
-    match?.blueScore !== undefined && match.redScore !== undefined
+  const matchHasBeenPlayed = isData(match)
+    ? match.blueScore !== undefined && match.redScore !== undefined
+    : undefined
 
   // When the match loads (or changes),
   useEffect(() => {
@@ -151,7 +156,7 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
   }, [matchHasBeenPlayed])
 
   const teamsStats = usePromise(() => {
-    if (match && isOnline) {
+    if (isData(match) && isOnline) {
       return Promise.all(
         [...match.redAlliance, ...match.blueAlliance].map((t) =>
           getMatchTeamStats(eventKey, match.key, t).then(processTeamStats),
@@ -173,7 +178,8 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
       class={clsx(
         matchStyle,
         match && loadedMatchStyle,
-        match?.videos &&
+        isData(match) &&
+          match.videos &&
           match.videos.length > 0 &&
           isOnline &&
           matchWithVideoStyle,
@@ -211,10 +217,21 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
                 </div>
               </Card>
             )}
-            <MatchDetailsCard match={match} eventKey={eventKey} />
-            {reports && reports.length > 0 ? (
+            <MatchDetailsCard
+              match={
+                isData(match)
+                  ? match
+                  : { key: '', redAlliance: [], blueAlliance: [] }
+              }
+              eventKey={eventKey}
+            />
+            {isData(reports) && reports.length > 0 ? (
               <MatchReports
-                match={match}
+                match={
+                  isData(match)
+                    ? match
+                    : { key: '', redAlliance: [], blueAlliance: [] }
+                }
                 reports={reports}
                 eventKey={eventKey}
               />
@@ -226,8 +243,12 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
             )}
             {matchHasBeenPlayed /* final score if the match is over */ && (
               <Card class={clsx(matchScoreStyle)}>
-                <div class={redScoreStyle}>{match.redScore}</div>
-                <div class={blueScoreStyle}>{match.blueScore}</div>
+                <div class={redScoreStyle}>
+                  {isData(match) && match.redScore}
+                </div>
+                <div class={blueScoreStyle}>
+                  {isData(match) && match.blueScore}
+                </div>
               </Card>
             )}
           </div>
@@ -265,17 +286,25 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
                 eventKey={eventKey}
                 teams={
                   selectedDisplay === showEventResults
-                    ? eventTeamsStats?.filter((t) =>
-                        matchHasTeam('frc' + t.team)(match),
-                      )
-                    : teamsStats
+                    ? isData(eventTeamsStats)
+                      ? eventTeamsStats.filter((t) =>
+                          matchHasTeam('frc' + t.team)(
+                            isData(match)
+                              ? match
+                              : { key: '', redAlliance: [], blueAlliance: [] },
+                          ),
+                        )
+                      : undefined
+                    : isData(teamsStats)
+                    ? teamsStats
+                    : undefined
                 }
-                schema={schema}
+                schema={isData(schema) ? schema : { id: -1, schema: [] }}
                 renderTeam={(team, link) => (
                   <a
                     class={clsx(
                       tableTeamStyle,
-                      match.redAlliance.includes('frc' + team)
+                      matchRedAlliance?.includes('frc' + team)
                         ? redStyle
                         : blueStyle,
                     )}
@@ -294,9 +323,10 @@ const EventMatch = ({ eventKey, matchKey }: Props) => {
             </Card>
           )}
           {/* shows videos if the match has them and online */}
-          {isOnline && match.videos && match.videos.length > 0 && (
-            <VideoList videos={match.videos} />
-          )}
+          {isOnline &&
+            isData(match) &&
+            match.videos &&
+            match.videos.length > 0 && <VideoList videos={match.videos} />}
         </>
       ) : (
         <Loader />
diff --git a/src/routes/event-team-comments.tsx b/src/routes/event-team-comments.tsx
index b9d4341d2..8b1ece34b 100644
--- a/src/routes/event-team-comments.tsx
+++ b/src/routes/event-team-comments.tsx
@@ -10,6 +10,7 @@ import { formatMatchKeyShort } from '@/utils/format-match-key-short'
 import { compareMatchKeys } from '@/utils/compare-matches'
 import { GetReport } from '@/api/report'
 import { getReports } from '@/api/report/get-reports'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   eventKey: string
@@ -33,16 +34,15 @@ const EventTeamComments = ({ eventKey, teamNum }: Props) => {
     team,
     eventKey,
   ])
-  const commentsByMatch = reports?.reduce<{ [matchKey: string]: GetReport[] }>(
-    (acc, report) => {
-      if (report.comment) {
-        // eslint-disable-next-line caleb/@typescript-eslint/no-unnecessary-condition
-        ;(acc[report.matchKey] || (acc[report.matchKey] = [])).push(report)
-      }
-      return acc
-    },
-    {},
-  )
+  const commentsByMatch = isData(reports)
+    ? reports.reduce<{ [matchKey: string]: GetReport[] }>((acc, report) => {
+        if (report.comment) {
+          // eslint-disable-next-line caleb/@typescript-eslint/no-unnecessary-condition
+          ;(acc[report.matchKey] || (acc[report.matchKey] = [])).push(report)
+        }
+        return acc
+      }, {})
+    : undefined
 
   return (
     <Page
diff --git a/src/routes/event-team-matches.tsx b/src/routes/event-team-matches.tsx
index 629d83bf2..2521a6f3f 100644
--- a/src/routes/event-team-matches.tsx
+++ b/src/routes/event-team-matches.tsx
@@ -4,6 +4,7 @@ import { useEventMatches } from '@/cache/event-matches/use'
 import { EventMatches } from '@/components/event-matches'
 import Loader from '@/components/loader'
 import { css } from 'linaria'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   eventKey: string
@@ -30,7 +31,10 @@ const EventTeamMatches = ({ eventKey, teamNum }: Props) => {
       class={eventTeamMatchesStyle}
     >
       {matches ? (
-        <EventMatches matches={matches} eventKey={eventKey} />
+        <EventMatches
+          matches={isData(matches) ? matches : []}
+          eventKey={eventKey}
+        />
       ) : (
         <Loader />
       )}
diff --git a/src/routes/event-team.tsx b/src/routes/event-team.tsx
index 510af1d07..818a4371e 100644
--- a/src/routes/event-team.tsx
+++ b/src/routes/event-team.tsx
@@ -27,6 +27,7 @@ import { useCurrentTime } from '@/utils/use-current-time'
 import { saveTeam, useSavedTeams, removeTeam } from '@/api/save-teams'
 import IconButton from '@/components/icon-button'
 import { EventTeamInfo } from '@/api/event-team-info'
+import { isData } from '@/utils/is-data'
 
 const sectionStyle = css`
   font-weight: normal;
@@ -162,10 +163,11 @@ const EventTeam = ({ eventKey, teamNum }: Props) => {
     () => getEventTeamInfo(eventKey, 'frc' + teamNum).catch(() => undefined),
     [eventKey, teamNum],
   )
-  const schema = useSchema(eventInfo?.schemaId)
-  const teamMatches = useEventMatches(eventKey, 'frc' + teamNum)?.sort(
-    compareMatches,
-  )
+  const schema = useSchema(isData(eventInfo) ? eventInfo.schemaId : undefined)
+  let teamMatches = useEventMatches(eventKey, 'frc' + teamNum)
+  teamMatches = isData(teamMatches)
+    ? teamMatches.sort(compareMatches)
+    : undefined
 
   const nextMatch = teamMatches && nextIncompleteMatch(teamMatches)
 
@@ -203,7 +205,7 @@ const EventTeam = ({ eventKey, teamNum }: Props) => {
       )}
       <EventTeamInfoCard
         eventKey={eventKey}
-        eventTeamInfo={eventTeamInfo}
+        eventTeamInfo={isData(eventTeamInfo) ? eventTeamInfo : undefined}
         teamMatches={teamMatches}
       />
       <Button href={`/events/${eventKey}/teams/${teamNum}/comments`}>
@@ -216,7 +218,7 @@ const EventTeam = ({ eventKey, teamNum }: Props) => {
         <ChartCard
           team={'frc' + teamNum}
           eventKey={eventKey}
-          schema={schema}
+          schema={isData(schema) ? schema : { id: -1, schema: [] }}
           teamMatches={teamMatches}
         />
       )}
diff --git a/src/routes/event.tsx b/src/routes/event.tsx
index 6a8168cd7..66e7136af 100644
--- a/src/routes/event.tsx
+++ b/src/routes/event.tsx
@@ -9,6 +9,7 @@ import { Heading } from '@/components/heading'
 import { EventMatches } from '@/components/event-matches'
 import Loader from '@/components/loader'
 import { useEventMatches } from '@/cache/event-matches/use'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   eventKey: string
@@ -51,7 +52,7 @@ const noMatchesStyle = css`
 const Event = ({ eventKey }: Props) => {
   const matches = useEventMatches(eventKey)
   const eventInfo = useEventInfo(eventKey)
-  const newestIncompleteMatch = matches && nextIncompleteMatch(matches)
+  const newestIncompleteMatch = isData(matches) && nextIncompleteMatch(matches)
 
   return (
     <Page
@@ -63,7 +64,7 @@ const Event = ({ eventKey }: Props) => {
         <Heading level={2} class={headingStyle}>
           Information
         </Heading>
-        {eventInfo && <EventInfoCard event={eventInfo} />}
+        {isData(eventInfo) && <EventInfoCard event={eventInfo} />}
         <Button href={`/events/${eventKey}/analysis`}>Analysis</Button>
       </div>
 
@@ -79,7 +80,7 @@ const Event = ({ eventKey }: Props) => {
             link
           />
         )}
-        {matches ? (
+        {isData(matches) ? (
           matches.length > 0 ? (
             <EventMatches matches={matches} eventKey={eventKey} />
           ) : (
diff --git a/src/routes/home.tsx b/src/routes/home.tsx
index 194f3a4e7..280f35ea6 100644
--- a/src/routes/home.tsx
+++ b/src/routes/home.tsx
@@ -13,6 +13,7 @@ import { UnstyledList } from '@/components/unstyled-list'
 import { useYears } from '@/utils/use-years'
 import IconButton from '@/components/icon-button'
 import { mdiCrosshairsGps } from '@mdi/js'
+import { isData } from '@/utils/is-data'
 
 const homeStyle = css`
   display: grid;
@@ -46,7 +47,8 @@ const Home = () => {
   const [location, prompt] = useGeoLocation()
   const [query, setQuery] = useState('')
   const lowerCaseQuery = query.toLowerCase()
-  const years = useYears().sort().reverse()
+  let years = useYears()
+  years = isData(years) ? years.sort().reverse() : []
   const [yearVal, setYear] = useQueryState('year', years[0])
   const year = Number(yearVal)
   const events = useEvents(year)
@@ -65,7 +67,7 @@ const Home = () => {
         )}
       </div>
 
-      {events ? (
+      {isData(events) ? (
         <>
           <UnstyledList class={matchListStyle}>
             {events
diff --git a/src/routes/leaderboard.tsx b/src/routes/leaderboard.tsx
index a9744839c..6e527ec08 100644
--- a/src/routes/leaderboard.tsx
+++ b/src/routes/leaderboard.tsx
@@ -10,6 +10,7 @@ import { useYears } from '@/utils/use-years'
 import { Dropdown } from '@/components/dropdown'
 import { getFastestUser } from '@/cache/users/get-fastest'
 import { UserInfo } from '@/api/user'
+import { isData } from '@/utils/is-data'
 
 const leaderboardCardTitleStyle = css`
   font-weight: 500;
@@ -58,10 +59,16 @@ const LeaderboardList = () => {
 
   return (
     <div class={leaderboardListStyle}>
-      <Dropdown options={years} onChange={setYear} value={year} />
-      {leaderboard?.map((user) => (
-        <LeaderboardCard key={user.id} user={user} />
-      )) || <Loader />}
+      <Dropdown
+        options={isData(years) ? years : []}
+        onChange={setYear}
+        value={year}
+      />
+      {isData(leaderboard) ? (
+        leaderboard.map((user) => <LeaderboardCard key={user.id} user={user} />)
+      ) : (
+        <Loader />
+      )}
     </div>
   )
 }
diff --git a/src/routes/signup.tsx b/src/routes/signup.tsx
index 66f49899b..5a8a051f5 100644
--- a/src/routes/signup.tsx
+++ b/src/routes/signup.tsx
@@ -19,6 +19,7 @@ import { ErrorBoundary, useErrorEmitter } from '@/components/error-boundary'
 import { authenticate } from '@/api/authenticate'
 import { route } from '@/router'
 import { Realm } from '@/api/realm'
+import { isData } from '@/utils/is-data'
 
 const signUpStyle = css`
   padding: 1.5rem;
@@ -91,10 +92,12 @@ const SignUpForm = () => {
             maxLength={maxPasswordLength}
           />
           <Dropdown<Realm>
-            value={realms.find((r) => r.id === realmId)}
+            value={
+              isData(realms) ? realms.find((r) => r.id === realmId) : undefined
+            }
             emptyLabel="Select a realm"
             class={dropdownClass}
-            options={realms}
+            options={isData(realms) ? realms : []}
             required
             onChange={(v) => setRealmId(v.id)}
             getKey={(v) => v.id}
diff --git a/src/routes/user-reports.tsx b/src/routes/user-reports.tsx
index c2558a250..8ff5cfda7 100644
--- a/src/routes/user-reports.tsx
+++ b/src/routes/user-reports.tsx
@@ -9,6 +9,7 @@ import { GetReport } from '@/api/report'
 import { useEventInfo } from '@/cache/event-info/use'
 import { formatTeamNumber } from '@/utils/format-team-number'
 import { getFastestUser } from '@/cache/users/get-fastest'
+import { isData } from '@/utils/is-data'
 
 interface Props {
   userId: string
@@ -36,12 +37,15 @@ const UserReports = ({ userId }: Props) => {
   return (
     <Page
       name={`${
-        user ? `${user.firstName} ${user.lastName}` : `User ${userId}`
+        isData(user)
+          ? // eslint-disable-next-line caleb/@typescript-eslint/prefer-optional-chain
+            `${user && user.firstName} ${user && user.lastName}`
+          : `User ${userId}`
       }: Reports`}
       back={`/users/${userId}`}
       class={userReportsStyle}
     >
-      {reports ? (
+      {isData(reports) ? (
         reports.map((report) => {
           return <ReportCard key={report.id} report={report} />
         })
diff --git a/src/routes/user.tsx b/src/routes/user.tsx
index 86e05bbf7..8bcc23089 100644
--- a/src/routes/user.tsx
+++ b/src/routes/user.tsx
@@ -34,6 +34,7 @@ import clsx from 'clsx'
 import { getReports } from '@/api/report/get-reports'
 import { noop } from '@/utils/empty-promise'
 import { getFastestUser } from '@/cache/users/get-fastest'
+import { isData } from '@/utils/is-data'
 
 const RoleInfo = ({
   save,
@@ -336,7 +337,7 @@ const UserProfileCard = ({
             </h2>
           )}
         </EditableText>
-        {reports && (
+        {isData(reports) && (
           <Button flat href={`/users/${user.id}/reports`}>
             <Icon
               class={iconInButtonStyle}
@@ -396,7 +397,7 @@ const AnonymousProfileCard = ({ userId }: { userId: number }) => {
       <Alert type={AlertType.Warning}>
         {"You do not have access to this user's profile."}
       </Alert>
-      {reports && (
+      {isData(reports) && (
         <Button flat href={`/users/${userId}/reports`}>
           <Icon
             class={iconInButtonStyle}
diff --git a/src/routes/users.tsx b/src/routes/users.tsx
index f27c1d9a0..2a1f7a796 100644
--- a/src/routes/users.tsx
+++ b/src/routes/users.tsx
@@ -23,6 +23,7 @@ import {
   tablePageWrapperStyle,
   tablePageTableStyle,
 } from '@/utils/table-page-style'
+import { isData } from '@/utils/is-data'
 
 const userLinkStyle = css`
   display: block;
@@ -88,7 +89,7 @@ const InnerUsersPage = () => {
   useEffect(updateUsers, [emitError])
 
   return users && realms ? (
-    <UsersTable users={users} realms={realms} />
+    <UsersTable users={users} realms={isData(realms) ? realms : []} />
   ) : (
     <Loader />
   )
diff --git a/src/utils/is-data.ts b/src/utils/is-data.ts
new file mode 100644
index 000000000..98317ec9f
--- /dev/null
+++ b/src/utils/is-data.ts
@@ -0,0 +1,6 @@
+/**
+ * Returns whether the given input is not an error and is also not undefined
+ */
+export const isData = <T extends unknown>(
+  input: T,
+): input is Exclude<T, Error | undefined> => input && !(input instanceof Error)
diff --git a/src/utils/use-network-cache.ts b/src/utils/use-network-cache.ts
index 1dc89cfd2..d32b7e08d 100644
--- a/src/utils/use-network-cache.ts
+++ b/src/utils/use-network-cache.ts
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'preact/hooks'
 import { CancellablePromise } from './cancellable-promise'
+import { NetworkError } from '@/api/base'
 
 /**
  * Returns a hook that executes a network promise and a cache promise.
@@ -14,37 +15,46 @@ export const useNetworkCache = <DataType, ArgsType extends any[]>(
   cacheGetter: (...args: ArgsType) => Promise<DataType>,
 ) => {
   interface ResultingFunction {
-    (...args: ArgsType): DataType | undefined
+    (...args: ArgsType): DataType | undefined | NetworkError | Error
     (
       ...args: {
         // Pass the first parameter as `undefined` to skip fetching
         [K in keyof ArgsType]: ArgsType[K] | undefined
       }
-    ): DataType | undefined
+    ): DataType | undefined | NetworkError | Error
   }
   /* eslint-disable caleb/react-hooks/rules-of-hooks, caleb/react-hooks/exhaustive-deps */
   const resultingFunction: ResultingFunction = (...args: any[]) => {
-    const [data, setData] = useState<DataType | undefined>(undefined)
+    const [networkData, setNetworkData] = useState<
+      DataType | undefined | NetworkError | Error
+    >(undefined)
+    const [cacheData, setCacheData] = useState<DataType | undefined>(undefined)
 
     useEffect(() => {
       // When the args change, reset the data
-      setData(undefined)
+      setNetworkData(undefined)
 
       // Allow us to pass a single parameter of undefined to skip getting the data
       if (args.length >= 1 && args[0] === undefined) return
       cacheGetter(...(args as ArgsType)).then((cachedData) =>
-        // don't update state using the cached data if network has already returned
-        setData((data) => data || cachedData),
+        setCacheData(cachedData),
       )
 
-      const p = networkGetter(...(args as ArgsType)).then((networkData) =>
-        setData(networkData),
-      )
+      const p = networkGetter(...(args as ArgsType))
+        .then((networkData) => setNetworkData(networkData))
+        .catch((error) => {
+          if (error instanceof Error) {
+            setNetworkData(error)
+          }
+        })
 
       return () => p.cancel()
     }, args)
 
-    return data
+    if (networkData && !(networkData instanceof NetworkError)) {
+      return networkData
+    }
+    return cacheData
   }
   return resultingFunction
   /* eslint-enable caleb/react-hooks/rules-of-hooks, caleb/react-hooks/exhaustive-deps */
diff --git a/src/utils/use-promise.tsx b/src/utils/use-promise.tsx
index 816b31a7b..b402c6bfe 100644
--- a/src/utils/use-promise.tsx
+++ b/src/utils/use-promise.tsx
@@ -1,17 +1,27 @@
 import { useState, useEffect } from 'preact/hooks'
 import { useErrorEmitter } from '@/components/error-boundary'
 import { CancellablePromise } from '@/utils/cancellable-promise'
+import { NetworkError } from '@/api/base'
 
 export const usePromise = <T extends any>(
   promiseCreator: () => Promise<T> | T,
   dependencies: any[] = [promiseCreator],
 ) => {
   const emitError = useErrorEmitter()
-  const [val, setVal] = useState<T | undefined>(undefined)
+  const [val, setVal] = useState<T | undefined | Error | NetworkError>(
+    undefined,
+  )
   useEffect(() => {
     const cbResult = promiseCreator()
     if (!(cbResult instanceof Promise)) return setVal(cbResult)
-    cbResult.then((v) => setVal(v)).catch(emitError)
+    cbResult
+      .then((v) => setVal(v))
+      .catch((error) => {
+        console.log('caught an error')
+        emitError(error)
+        // if (error instanceof Error) setVal(error)
+        // else emitError(error)
+      })
     return () => {
       if (cbResult instanceof CancellablePromise) cbResult.cancel()
       setVal(undefined)
diff --git a/src/utils/use-years.ts b/src/utils/use-years.ts
index 0246f4331..9cfb8310c 100644
--- a/src/utils/use-years.ts
+++ b/src/utils/use-years.ts
@@ -1,13 +1,14 @@
 import { usePromise } from './use-promise'
 import { getYears } from '@/api/get-years'
 import { getCachedEvents } from '@/cache/events/get-cached'
+import { isData } from './is-data'
 
 export const useYears = () => {
   const cachedEventsFromAllYears = usePromise(getCachedEvents)
   const currentYear = new Date().getFullYear()
   return (
     usePromise(getYears) ||
-    (cachedEventsFromAllYears
+    (isData(cachedEventsFromAllYears)
       ? [
           ...cachedEventsFromAllYears.reduce((years, e) => {
             years.add(e.endDate.getFullYear())