feat(dashboard): show error details in development mode (#14875)

Show error message and stack trace with copy button in the admin dashboard when in dev mode

<img width="903" height="621" alt="CleanShot 2026-03-11 at 16 48 01" src="https://github.com/user-attachments/assets/e2a576ab-7f16-4c51-b450-e1f01350babf" />

Author: shahednasser

.changeset/short-games-add.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+feat(dashboard): show error details in development mode

packages/admin/dashboard/src/components/utilities/error-boundary/error-boundary.tsx

@@ -1,5 +1,6 @@
-import { ExclamationCircle } from "@medusajs/icons"
-import { Text } from "@medusajs/ui"
+import { ExclamationCircle, SquareTwoStack } from "@medusajs/icons"
+import { toast, Text, IconButton, Tooltip } from "@medusajs/ui"
+import copy from "copy-to-clipboard"
 import { useTranslation } from "react-i18next"
 import { Navigate, useLocation, useRouteError } from "react-router-dom"
 
@@ -20,6 +21,11 @@ export const ErrorBoundary = () => {
     code = error.status ?? null
   }
 
+  // In development mode, show detailed error information
+  const isDevelopment = process.env.NODE_ENV === "development"
+  const errorMessage = error instanceof Error ? error.message : String(error)
+  const errorStack = error instanceof Error ? error.stack : undefined
+
   /**
    * Log error in development mode.
    *
@@ -28,6 +34,22 @@ export const ErrorBoundary = () => {
    */
   if (process.env.NODE_ENV === "development") {
     console.error(error)
+    const fileDetails = errorStack?.split("\n")[1].trim()
+    const filename = fileDetails?.match(/([^\/\\?]+)(?:\?[^:]*)?:\d+:\d+\)/)?.[1] || "unknown"
+    const lineno = fileDetails?.match(/(?:\?[^:]*)?:(\d+):\d+\)/)?.[1] || "unknown"
+    const colno = fileDetails?.match(/(?:\?[^:]*)?:\d+:(\d+)\)/)?.[1] || "unknown"
+    window.parent.postMessage({
+      data: {
+        type: "CONSOLE_OUTPUT",
+        level: "error",
+        message: errorMessage,
+        stack: errorStack,
+        logged_at: new Date().toISOString(),
+        filename,
+        lineno,
+        colno,
+      }
+    }, "*")
   }
 
   let title: string
@@ -52,6 +74,17 @@ export const ErrorBoundary = () => {
       break
   }
 
+  const handleCopyError = () => {
+    const errorText = `Error: ${errorMessage}\n\n${errorStack || "No stack trace available"}`
+    const success = copy(errorText)
+    
+    if (success) {
+      toast.success("Error details copied to clipboard")
+    } else {
+      toast.error("Failed to copy error details")
+    }
+  }
+
   return (
     <div className="flex size-full min-h-[calc(100vh-57px-24px)] items-center justify-center">
       <div className="flex flex-col gap-y-6">
@@ -69,6 +102,51 @@ export const ErrorBoundary = () => {
             </Text>
           </div>
         </div>
+        {isDevelopment && errorMessage && (
+          <div className="bg-ui-bg-disabled border-ui-border-subtle max-w-3xl overflow-scroll max-h-[400px] rounded-lg border p-4">
+            <div className="flex flex-col gap-y-4">
+              <div className="flex items-center justify-between">
+                <Text
+                  size="small"
+                  weight="plus"
+                  className="text-ui-fg-base"
+                >
+                  Error Details (Development Mode)
+                </Text>
+                <Tooltip content="Copy error details">
+                  <IconButton
+                    onClick={handleCopyError}
+                    variant="transparent"
+                  >
+                    <SquareTwoStack className="text-ui-fg-muted" />
+                  </IconButton>
+                </Tooltip>
+              </div>
+              <div>
+                <Text
+                  size="xsmall"
+                  className="text-ui-fg-subtle font-mono break-words"
+                >
+                  {errorMessage}
+                </Text>
+              </div>
+              {errorStack && (
+                <div>
+                  <Text
+                    size="small"
+                    weight="plus"
+                    className="text-ui-fg-base mb-2"
+                  >
+                    Stack Trace
+                  </Text>
+                  <pre className="text-ui-fg-subtle overflow-auto whitespace-pre-wrap break-words text-xs">
+                    {errorStack}
+                  </pre>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
       </div>
     </div>
   )