​

ErrorBanner component

​

Location

• User searches (404 user not found)
• API requests (403 rate limit exceeded)
• Network failures
• Repository or commit fetching errors

​

Props

​

Usage from App.jsx

const [error, setError] = useState(null)

{error && (
  <ErrorBanner message={error} onDismiss={() => setError(null)} />
)}

​

Error messages from useGitHub hook

// From src/hooks/useGitHub.js:34-42
if (res.status === 403) {
  const data = await res.json()
  throw new Error(data.message || 'Rate limit exceeded')
}
if (res.status === 404) throw new Error('Usuario no encontrado')
if (!res.ok) {
  const data = await res.json()
  throw new Error(data.message || `HTTP ${res.status}`)
}

• “Usuario no encontrado” - 404 user doesn’t exist
• “Rate limit exceeded” or GitHub’s rate limit message - 403 rate limited
• Generic HTTP errors with status code

​

Implementation details

<div className={`${styles.banner} fade-up`}>
  <AlertTriangle size={16} />
  <span>{message}</span>
  <button className={styles.dismiss} onClick={onDismiss}>
    <X size={14} />
  </button>
</div>

• AlertTriangle (16px) - Warning indicator
• X (14px) - Dismiss button

​

Styling

• Warning colors (typically orange/red background)
• Prominent positioning at the top of the content area
• Flexbox layout for icon, message, and dismiss button alignment
• Hover state on dismiss button

​

Error handling workflow

1. User performs an action (search, pagination, view commits)
2. API request fails with an error
3. Error is caught in try-catch and set to error state
4. ErrorBanner renders with the error message
5. User reads the error and clicks dismiss
6. Error state is cleared, banner disappears

try {
  const [userData, reposData] = await Promise.all([
    getUser(username),
    getRepos(username, 1, PER_PAGE),
  ])
  setUser(userData)
  setRepos(reposData)
} catch (e) {
  setError(e.message)  // ErrorBanner will display this
}

​

Related components