Add error boundary to docs page

example/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "react-error-boundary": "^4.0.12",
     "react-github-btn": "^1.4.0",
     "react-github-calendar": "link:..",
     "react-router-dom": "^6.21.2",

example/src/components/Docs.tsx

@@ -4,6 +4,7 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import GitHubButton from 'react-github-btn';
 import GitHubCalendar, { Props } from 'react-github-calendar';
 import { useSearchParams } from 'react-router-dom';
@@ -12,6 +13,8 @@ import '../styles.scss';
 import pkg from '../../package.json';
 
 import CodeBlock from './CodeBlock.tsx';
+
+import { errorRenderer } from './Error.tsx';
 import ForkMe from './ForkMe.tsx';
 
 const defaultUsername = 'grubersjoe';
@@ -73,7 +76,9 @@ const Docs: FunctionComponent = () => {
             on GitHub
           </h4>
 
-          <GitHubCalendar username={username} fontSize={16} />
+          <ErrorBoundary fallbackRender={errorRenderer} key={username}>
+            <GitHubCalendar username={username} fontSize={16} />
+          </ErrorBoundary>
 
           <p style={{ marginBottom: '1.25rem' }}>
             Made with love by <a href="https://jogruber.de">@grubersjoe</a>,
@@ -436,15 +441,17 @@ function transformData(data: Array<Activity>): Array<Activity>;`}
 
           <br />
 
-          <GitHubCalendar
-            username={username}
-            transformData={selectLastHalfYear}
-            hideColorLegend
-            fontSize={16}
-            labels={{
-              totalCount: '{{count}} contributions in the last half year',
-            }}
-          />
+          <ErrorBoundary fallbackRender={errorRenderer} key={username}>
+            <GitHubCalendar
+              username={username}
+              transformData={selectLastHalfYear}
+              hideColorLegend
+              fontSize={16}
+              labels={{
+                totalCount: '{{count}} contributions in the last half year',
+              }}
+            />
+          </ErrorBoundary>
 
           <p>
             The total count will be recalculated based on the transformed data.

example/src/components/Error.tsx

@@ -0,0 +1,9 @@
+import { FallbackProps } from 'react-error-boundary';
+
+export const errorRenderer = ({ error }: FallbackProps) => (
+  <div className="error">
+    <b>Error</b>
+    <br />
+    {error.message}
+  </div>
+);

example/src/styles.scss

@@ -293,6 +293,16 @@ button {
   }
 }
 
+.error {
+    display: inline-block;
+    margin: 0 0 1rem;
+    padding: 0.5rem 0.75rem;
+    background-color: #f8d7da;
+    border: 1px solid #f1aeb5;
+    border-radius: 4px;
+    font-size: 90%;
+}
+
 .react-activity-calendar {
   margin: 0 0 1.5rem;
 }

src/index.tsx

@@ -3,8 +3,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import Calendar, {
   Activity,
-  Skeleton,
   type Props as CalendarProps,
+  Skeleton,
 } from 'react-activity-calendar';
 
 import { API_URL, DEFAULT_THEME } from './constants';
@@ -27,7 +27,7 @@ async function fetchCalendarData(
 
   if (!response.ok) {
     throw Error(
-      `Unable to fetch GitHub contribution data for ${username}: HTTP ${response.status}}`,
+      `Fetching contribution data for '${username}' failed: ${(data as ApiErrorResponse).error}`,
     );
   }