Add throwOnError and errorMessage properties to improve error handling

grubersjoe · Jan 18, 2024 · 066eb3c · 066eb3c
1 parent e838636
commit 066eb3c
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 25 deletions.
diff --git a/example/src/components/Docs.tsx b/example/src/components/Docs.tsx
@@ -77,10 +77,10 @@ const Docs: FunctionComponent = () => {
           </h4>
 
           <ErrorBoundary fallbackRender={errorRenderer} key={username}>
-            <GitHubCalendar username={username} fontSize={16} />
+            <GitHubCalendar username={username} fontSize={16} throwOnError />
           </ErrorBoundary>
 
-          <p style={{ marginBottom: '1.25rem' }}>
+          <p style={{ marginTop: '1.25rem', marginBottom: '1.25rem' }}>
             Made with love by <a href="https://jogruber.de">@grubersjoe</a>,
             current version:{' '}
             <a href="https://www.npmjs.com/package/react-github-calendar">
@@ -117,11 +117,15 @@ const Docs: FunctionComponent = () => {
         <section>
           <h2>Component properties</h2>
           <p>
-            See{' '}
+            The component uses{' '}
+            <a href="https://github.com/grubersjoe/react-activity-calendar">
+              <code>react-activity-calendar</code>
+            </a>{' '}
+            internally, so all its properties are supported. See the{' '}
             <a href="https://grubersjoe.github.io/react-activity-calendar/?path=/docs/react-activity-calendar--docs">
               documentation
-            </a>{' '}
-            of <code>react-activity-calendar</code>
+            </a>
+            .
           </p>
           <div className="table-overflow">
             <table>
@@ -136,7 +140,7 @@ const Docs: FunctionComponent = () => {
               <tbody>
                 <tr>
                   <td>username</td>
-                  <td>string</td>
+                  <td>string!</td>
                   <td />
                   <td>
                     A GitHub username (<em>required, obviously</em>).
@@ -177,6 +181,16 @@ const Docs: FunctionComponent = () => {
                     Use a specific color scheme instead of the system one.
                   </td>
                 </tr>
+                <tr>
+                  <td>errorMessage</td>
+                  <td>string</td>
+                  <td />
+                  <td>
+                    Message to show if fetching GitHub contribution data fails.
+                    Only relevant if <code>throwOnError</code> is{' '}
+                    <code>false</code>.
+                  </td>
+                </tr>
                 <tr>
                   <td>eventHandlers</td>
                   <td>
@@ -233,7 +247,7 @@ const Docs: FunctionComponent = () => {
                   <td />
                   <td>
                     Localization strings for all calendar labels.{' '}
-                    <a href="https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--with-localized-labels">
+                    <a href="https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--localized-labels">
                       See here for details
                     </a>
                     .
@@ -309,12 +323,25 @@ const Docs: FunctionComponent = () => {
                       any valid CSS format.
                     </p>
                     <p>
-                      <a href="https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--with-theme">
+                      <a href="https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--color-themes">
                         See this example
                       </a>
                     </p>
                   </td>
                 </tr>
+                <tr>
+                  <td>throwOnError</td>
+                  <td>boolean</td>
+                  <td>false</td>
+                  <td>
+                    Whether to throw an <code>Error</code> if fetching GitHub
+                    contribution data fails. Use a React{' '}
+                    <a href="https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary">
+                      error boundary
+                    </a>{' '}
+                    to handle the error.
+                  </td>
+                </tr>
                 <tr>
                   <td>totalCount</td>
                   <td>number</td>
@@ -384,7 +411,7 @@ const Docs: FunctionComponent = () => {
           <h3 id="tooltips">How do I add tooltips?</h3>
           <p>
             See{' '}
-            <a href="https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--with-tooltips">
+            <a href="https://grubersjoe.github.io/react-activity-calendar/?path=/story/react-activity-calendar--tooltips">
               tooltip examples
             </a>{' '}
             how to use the <code>renderBlock</code> prop. .
@@ -450,10 +477,11 @@ function transformData(data: Array<Activity>): Array<Activity>;`}
               labels={{
                 totalCount: '{{count}} contributions in the last half year',
               }}
+              throwOnError
             />
           </ErrorBoundary>
 
-          <p>
+          <p style={{ marginTop: '1.25rem' }}>
             The total count will be recalculated based on the transformed data.
             However, you can enforce that the total count of the untransformed
             data is shown by setting the <code>transformTotalCount</code> to{' '}

diff --git a/example/src/styles.scss b/example/src/styles.scss
@@ -303,10 +303,6 @@ button {
     font-size: 90%;
 }
 
-.react-activity-calendar {
-  margin: 0 0 1.5rem;
-}
-
 .github-corner .octo {
   fill: var(--color-text);
 }

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -9,6 +9,8 @@ export interface Props extends Omit<ActivityCalendarProps, 'data'> {
   year?: number | 'last';
   transformData?: (data: Array<Activity>) => Array<Activity>;
   transformTotalCount?: boolean;
+  throwOnError?: boolean;
+  errorMessage?: string;
 }
 
 declare const GitHubCalendar: FunctionComponent<Props>;

diff --git a/src/index.tsx b/src/index.tsx
@@ -16,6 +16,8 @@ export interface Props extends Omit<CalendarProps, 'data'> {
   year?: Year;
   transformData?: (data: Array<Activity>) => Array<Activity>;
   transformTotalCount?: boolean;
+  throwOnError?: boolean;
+  errorMessage?: string;
 }
 
 async function fetchCalendarData(
@@ -27,7 +29,7 @@ async function fetchCalendarData(
 
   if (!response.ok) {
     throw Error(
-      `Fetching contribution data for '${username}' failed: ${(data as ApiErrorResponse).error}`,
+      `Fetching GitHub contribution data for "${username}" failed: ${(data as ApiErrorResponse).error}`,
     );
   }
 
@@ -37,28 +39,34 @@ const GitHubCalendar = ({
   username,
   year = 'last',
   labels,
-  transformData: transformDataCallback,
+  transformData: transformFn,
   transformTotalCount = true,
+  throwOnError = false,
+  errorMessage = `Error – Fetching GitHub contribution data for "${username}" failed.`,
   ...props
 }: Props) => {
   const [data, setData] = useState<ApiResponse | null>(null);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
+  const [fetchError, setFetchError] = useState<Error | null>(null);
 
   const fetchData = useCallback(() => {
     setLoading(true);
-    setError(null);
+    setFetchError(null);
     fetchCalendarData(username, year)
       .then(setData)
-      .catch(setError)
+      .catch(setFetchError)
       .finally(() => setLoading(false));
   }, [username, year]);
 
   useEffect(fetchData, [fetchData]);
 
   // React error boundaries can't handle asynchronous code, so rethrow.
-  if (error) {
-    throw error;
+  if (fetchError) {
+    if (throwOnError) {
+      throw fetchError;
+    } else {
+      return <div>{errorMessage}</div>;
+    }
   }
 
   if (loading || !data) {
@@ -78,12 +86,10 @@ const GitHubCalendar = ({
 
   return (
     <Calendar
-      data={transformData(data.contributions, transformDataCallback)}
+      data={transformData(data.contributions, transformFn)}
       theme={theme}
       labels={Object.assign({}, defaultLabels, labels)}
-      totalCount={
-        transformDataCallback && transformTotalCount ? undefined : totalCount
-      }
+      totalCount={transformFn && transformTotalCount ? undefined : totalCount}
       {...props}
       maxLevel={4}
     />