fix(components): better explanation of "invalid attributes" error

GenSpectrum · Dec 10, 2024 · ca8c8ce · ca8c8ce
1 parent 218f7bb
commit ca8c8ce
Showing 1 changed file with 38 additions and 17 deletions.
diff --git a/components/src/preact/components/error-display.tsx b/components/src/preact/components/error-display.tsx
@@ -77,7 +77,7 @@ export const ErrorDisplay: FunctionComponent<ErrorDisplayProps> = ({ error, rese
                                         </button>
                                     </form>
                                     <h1 class='text-lg'>{details.headline}</h1>
-                                    <p class='py-4'>{details.message}</p>
+                                    <div class='py-4'>{details.message}</div>
                                 </div>
                                 <form method='dialog' class='modal-backdrop'>
                                     <button>close</button>
@@ -129,26 +129,47 @@ function getDisplayedErrorMessage(error: Error) {
     }
 
     if (error instanceof InvalidPropsError) {
-        const firstError = error.zodError.errors[0];
-        let message = error.zodError.issues
-            .map((issue) => {
-                const actual =
-                    issue.path[0] in error.componentProps
-                        ? ` '${JSON.stringify(error.componentProps[issue.path[0]])}'`
-                        : '';
-                return `Unexpected value${actual} for "${issue.path.join('.')}": ${issue.message}`;
-            })
-            .join(' - ');
-
-        if (firstError.code === 'invalid_type' && firstError.received === 'null') {
-            message = `Is the "${firstError.path[0]}" attribute in the HTML of the correct type? ${message}`;
-        }
-
         return {
             headline: 'Error - Invalid component attributes',
-            details: { headline: 'Invalid component attributes', message },
+            details: { headline: 'Invalid component attributes', message: <ZodErrorDetails error={error} /> },
         };
     }
 
     return { headline: 'Error', details: undefined };
 }
+
+function ZodErrorDetails({ error }: { error: InvalidPropsError }) {
+    const firstError = error.zodError.errors[0];
+    return (
+        <>
+            <p>
+                <span className='font-bold'>If you are a user seeing this:</span> Please contact the administrator of
+                this page.
+            </p>
+            <p>
+                <span className='font-bold'> If you are the administrator of this page:</span> You supplied invalid
+                attributes to this component. Please check the browser console for more detailed error messages.
+            </p>
+            {firstError.code === 'invalid_type' && firstError.received === 'null' && (
+                <p>
+                    Is the "{firstError.path[0]}" attribute in the HTML of the correct type? The attribute is expected
+                    to be of type "{firstError.expected}".
+                </p>
+            )}
+            <p>This is a summary of the unexpected attribute values:</p>
+            <ul class='m-4 list-outside list-disc '>
+                {error.zodError.issues.map((issue, index) => {
+                    const actual =
+                        issue.path[0] in error.componentProps
+                            ? `'${JSON.stringify(error.componentProps[issue.path[0]])}'`
+                            : '';
+                    return (
+                        <li key={index}>
+                            Unexpected value {actual} for "{issue.path.join('.')}": {issue.message}
+                        </li>
+                    );
+                })}
+            </ul>
+        </>
+    );
+}