Implement error help text

WATonomous · Jul 15, 2024 · b6e0e48 · b6e0e48
1 parent 5f8596c
commit b6e0e48
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/healthchecksio.tsx b/src/healthchecksio.tsx
@@ -83,10 +83,12 @@ export function HealthchecksioStatus({ showInternal, initialGroupKey = "" }: { s
   const checks = (processHCData(dataRaw) || []).filter(check => check.tags_dict.public !== 'False' || showInternal).sort((a, b) => a.name.localeCompare(b.name));
   const groupedChecks = groupBy(checks, c => c.tags_dict[groupKey]);
 
+  const errorHelp = "Please see the console for more information.";
+
   return (
     <div className="my-4">
       {isLoading && <p className='text-gray-500'>Loading...</p>}
-      {error && <p className='text-red-500'>Error: {error.message}</p>}
+      {error && <p className='text-red-500'>Error: {error.message}. {errorHelp}</p>}
       {checks && checks.length > 0 && (
         <>
           <StatusSummary statuses={checks.map(check => getStatus(check.status))} symbolClassName="text-xl" className="mb-4" />

diff --git a/src/sentry.tsx b/src/sentry.tsx
@@ -29,10 +29,12 @@ export function SentryStatus() {
     monitors.sort((a: any, b: any) => a.name.localeCompare(b.name));
   }
 
+  const errorHelp = error?.toString() == "TypeError: Failed to fetch" ? "Is the request blocked by an adblocker?" : "Please see the console for more information.";
+
   return (
     <div className="my-4">
       {isLoading && <p className='text-gray-500'>Loading...</p>}
-      {error && <p className='text-red-500'>Error: {error.message}</p>}
+      {error && <p className='text-red-500'>Error: {error.message}. {errorHelp}</p>}
       {monitors && monitors.length > 0 && (
         <>
           <StatusSummary statuses={monitors.flatMap((monitor: any) => monitor.environments?.map((environment: any) => getStatus(environment.status)))} symbolClassName="text-xl" className="mb-4" />