next-analyze: improve network error visuals

Author: wbinnssmith

apps/bundle-analyzer/app/page.tsx

@@ -4,6 +4,7 @@ import type React from 'react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import useSWR from 'swr'
 import { ImportChain } from '@/components/import-chain'
+import { ErrorState } from '@/components/error-state'
 import {
   RouteTypeahead,
   type RouteTypeaheadRef,
@@ -15,7 +16,7 @@ import { Skeleton, TreemapSkeleton } from '@/components/ui/skeleton'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { AnalyzeData, ModulesData } from '@/lib/analyze-data'
 import { SpecialModule } from '@/lib/types'
-import { getSpecialModuleType } from '@/lib/utils'
+import { getSpecialModuleType, fetchStrict } from '@/lib/utils'
 
 function formatBytes(bytes: number): string {
   if (bytes === 0) return '0 B'
@@ -164,12 +165,6 @@ export default function Home() {
         </div>
 
         <div className="basis-2/3 flex justify-end">
-          {error && (
-            <div className="text-sm text-red-600 font-medium">
-              Error: {error?.message}
-            </div>
-          )}
-
           {analyzeData && (
             <>
               <ToggleGroup
@@ -227,7 +222,9 @@ export default function Home() {
       </div>
 
       <div className="flex-1 flex min-h-0">
-        {isAnyLoading ? (
+        {error && !analyzeData ? (
+          <ErrorState error={error} />
+        ) : isAnyLoading ? (
           <>
             <div className="flex-1 min-w-0 p-4 bg-background">
               <TreemapSkeleton />
@@ -321,8 +318,8 @@ export default function Home() {
                               {specialModuleType ===
                               SpecialModule.POLYFILL_NOMODULE ? (
                                 <>
-                                  . <code>polyfill-nomodule.js</code> is only sent
-                                  to legacy browsers.
+                                  . <code>polyfill-nomodule.js</code> is only
+                                  sent to legacy browsers.
                                 </>
                               ) : null}
                             </dd>
@@ -414,12 +411,3 @@ async function fetchModulesData(url: string): Promise<ModulesData> {
   const resp = await fetchStrict(url)
   return new ModulesData(await resp.arrayBuffer())
 }
-
-function fetchStrict(url: string): Promise<Response> {
-  return fetch(url).then((res) => {
-    if (!res.ok) {
-      throw new Error(`Failed to fetch ${url}: ${res.status} ${res.statusText}`)
-    }
-    return res
-  })
-}

apps/bundle-analyzer/components/error-state.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { RefreshCw, AlertTriangle } from 'lucide-react'
+import { NetworkError } from '@/lib/errors'
+
+interface ErrorStateProps {
+  error: unknown
+  onRetry?: () => void
+}
+
+export function ErrorState({ error }: ErrorStateProps) {
+  const isNetwork = error instanceof NetworkError
+  const title = isNetwork ? 'Server Connection Lost' : 'Error'
+  const message = isNetwork
+    ? 'Unable to connect to the bundle analyzer server. Please ensure the server is running and try again.'
+    : ((error as any)?.message ?? 'An unexpected error occurred.')
+
+  return (
+    <div className="flex-1 flex items-center justify-center">
+      <div className="text-center space-y-4 max-w-md px-6">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-destructive/10 text-destructive mb-2">
+          <AlertTriangle className="w-8 h-8" />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold text-foreground mb-2">
+            {title}
+          </h3>
+          <p className="text-sm text-muted-foreground mb-4">{message}</p>
+          <button
+            onClick={() => {
+              window.location.reload()
+            }}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors text-sm font-medium"
+          >
+            <RefreshCw className="w-4 h-4" />
+            Retry Connection
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/bundle-analyzer/components/index.ts

@@ -1,3 +1,4 @@
 export { ImportChain } from './import-chain'
 export { RouteTypeahead } from './route-typeahead'
 export { TreemapVisualizer } from './treemap-visualizer'
+export { ErrorState } from './error-state'

apps/bundle-analyzer/components/route-typeahead.tsx

@@ -18,6 +18,7 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover'
 import { cn, jsonFetcher } from '@/lib/utils'
+import { NetworkError } from '@/lib/errors'
 
 interface RouteTypeaheadProps {
   selectedRoute: string | null
@@ -55,8 +56,13 @@ export const RouteTypeahead = forwardRef<
 
   if (error) {
     return (
-      <div className="flex max-w-full text-red-600">
-        Failed to load routes manifest: {error.message}
+      <div className="flex items-center gap-2 px-3 py-2 rounded-md bg-destructive/10 border border-destructive/20 text-destructive text-sm max-w-full">
+        <span className="font-medium">⚠</span>
+        <span className="truncate">
+          {error instanceof NetworkError
+            ? 'Unable to connect to server'
+            : error.message}
+        </span>
       </div>
     )
   }

apps/bundle-analyzer/lib/errors.ts

@@ -0,0 +1,10 @@
+export class NetworkError extends Error {
+  constructor(message: string, options?: { cause?: unknown }) {
+    super(message)
+    this.name = 'NetworkError'
+    // Preserve error cause when supported
+    if (options && 'cause' in options) {
+      ;(this as any).cause = options.cause
+    }
+  }
+}

apps/bundle-analyzer/lib/utils.ts

@@ -1,14 +1,30 @@
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 import { SpecialModule } from './types'
+import { NetworkError } from './errors'
 import { AnalyzeData } from './analyze-data'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
 
-export function jsonFetcher<T>(url: string): Promise<T> {
-  return fetch(url).then((res) => res.json())
+export async function fetchStrict(url: string): Promise<Response> {
+  let res: Response
+  try {
+    res = await fetch(url)
+  } catch (err) {
+    throw new NetworkError(`Failed to fetch ${url}`, { cause: err })
+  }
+
+  if (!res.ok) {
+    throw new Error(`Failed to fetch ${url}: ${res.status} ${res.statusText}`)
+  }
+  return res
+}
+
+export async function jsonFetcher<T>(url: string): Promise<T> {
+  const res = await fetchStrict(url)
+  return res.json() as Promise<T>
 }
 
 export function getSpecialModuleType(