[DevOverlay] Gather Feedback per Error

vercel · Jan 16, 2025 · 279cbd2 · 279cbd2
1 parent 89b0957
commit 279cbd2
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 36 deletions.
diff --git a/...imental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx b/...imental/internal/components/Errors/error-overlay-footer/error-feedback/error-feedback.tsx
@@ -7,13 +7,18 @@ interface ErrorFeedbackProps {
   errorCode: string
 }
 export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
-  const [voted, setVoted] = useState<boolean | null>(null)
-  const hasVoted = voted !== null
+  const [votedMap, setVotedMap] = useState<Record<string, boolean>>({})
+  const voted = votedMap[errorCode]
+  const hasVoted = voted !== undefined
 
   const handleFeedback = useCallback(
     async (wasHelpful: boolean) => {
       // Optimistically set feedback state without loading/error states to keep implementation simple
-      setVoted(wasHelpful)
+      setVotedMap((prev) => ({
+        ...prev,
+        [errorCode]: wasHelpful,
+      }))
+
       try {
         const response = await fetch(
           `${process.env.__NEXT_ROUTER_BASEPATH || ''}/__nextjs_error_feedback?${new URLSearchParams(
@@ -36,35 +41,33 @@ export function ErrorFeedback({ errorCode }: ErrorFeedbackProps) {
   )
 
   return (
-    <>
-      <div className="error-feedback" role="region" aria-label="Error feedback">
-        {hasVoted ? (
-          <p className="error-feedback-thanks" role="status" aria-live="polite">
-            Thanks for your feedback!
-          </p>
-        ) : (
-          <>
-            <p>Was this helpful?</p>
-            <button
-              aria-label="Mark as helpful"
-              onClick={() => handleFeedback(true)}
-              className={`feedback-button ${voted === true ? 'voted' : ''}`}
-              type="button"
-            >
-              <ThumbsUp aria-hidden="true" />
-            </button>
-            <button
-              aria-label="Mark as not helpful"
-              onClick={() => handleFeedback(false)}
-              className={`feedback-button ${voted === false ? 'voted' : ''}`}
-              type="button"
-            >
-              <ThumbsDown aria-hidden="true" />
-            </button>
-          </>
-        )}
-      </div>
-    </>
+    <div className="error-feedback" role="region" aria-label="Error feedback">
+      {hasVoted ? (
+        <p className="error-feedback-thanks" role="status" aria-live="polite">
+          Thanks for your feedback!
+        </p>
+      ) : (
+        <>
+          <p>Was this helpful?</p>
+          <button
+            aria-label="Mark as helpful"
+            onClick={() => handleFeedback(true)}
+            className={`feedback-button ${voted === true ? 'voted' : ''}`}
+            type="button"
+          >
+            <ThumbsUp aria-hidden="true" />
+          </button>
+          <button
+            aria-label="Mark as not helpful"
+            onClick={() => handleFeedback(false)}
+            className={`feedback-button ${voted === false ? 'voted' : ''}`}
+            type="button"
+          >
+            <ThumbsDown aria-hidden="true" />
+          </button>
+        </>
+      )}
+    </div>
   )
 }
 

diff --git a/...c/client/components/react-dev-overlay/_experimental/internal/container/Errors.stories.tsx b/...c/client/components/react-dev-overlay/_experimental/internal/container/Errors.stories.tsx
@@ -22,7 +22,9 @@ export const Default: Story = {
         id: 1,
         event: {
           type: ACTION_UNHANDLED_ERROR,
-          reason: new Error('First error message'),
+          reason: Object.assign(new Error('First error message'), {
+            __NEXT_ERROR_CODE: 'E001',
+          }),
           componentStackFrames: [
             {
               file: 'app/page.tsx',
@@ -47,23 +49,29 @@ export const Default: Story = {
         id: 2,
         event: {
           type: ACTION_UNHANDLED_ERROR,
-          reason: new Error('Second error message'),
+          reason: Object.assign(new Error('Second error message'), {
+            __NEXT_ERROR_CODE: 'E002',
+          }),
           frames: [],
         },
       },
       {
         id: 3,
         event: {
           type: ACTION_UNHANDLED_ERROR,
-          reason: new Error('Third error message'),
+          reason: Object.assign(new Error('Third error message'), {
+            __NEXT_ERROR_CODE: 'E003',
+          }),
           frames: [],
         },
       },
       {
         id: 4,
         event: {
           type: ACTION_UNHANDLED_ERROR,
-          reason: new Error('Fourth error message'),
+          reason: Object.assign(new Error('Fourth error message'), {
+            __NEXT_ERROR_CODE: 'E004',
+          }),
           frames: [],
         },
       },