Use Geist icon instead

vercel · Feb 25, 2025 · 0e41101 · 0e41101
1 parent 7e843f3
commit 0e41101
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/...c/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx b/...c/client/components/react-dev-overlay/ui/components/call-stack-frame/call-stack-frame.tsx
@@ -2,7 +2,7 @@ import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import type { OriginalStackFrame } from '../../../utils/stack-frame'
 
 import { HotlinkedText } from '../hot-linked-text'
-import { ExternalIcon } from '../../icons/external'
+import { ExternalIcon, SourceMappingErrorIcon } from '../../icons/external'
 import { getFrameSource } from '../../../utils/stack-frame'
 import { useOpenInEditor } from '../../utils/use-open-in-editor'
 
@@ -56,20 +56,21 @@ export const CallStackFrame: React.FC<{
             <ExternalIcon width={16} height={16} />
           </button>
         )}
-      </div>
-      <span
-        className="call-stack-frame-file-source"
-        data-has-source={hasSource}
-      >
-        {fileSource}
         {frame.error ? (
           <button
+            className="source-mapping-error-button"
             onClick={() => console.error(frame.reason)}
             title="Sourcemapping failed. Click to log cause of error."
           >
-            ⚠
+            <SourceMappingErrorIcon width={16} height={16} />
           </button>
         ) : null}
+      </div>
+      <span
+        className="call-stack-frame-file-source"
+        data-has-source={hasSource}
+      >
+        {fileSource}
       </span>
     </div>
   )
@@ -121,7 +122,7 @@ export const CALL_STACK_FRAME_STYLES = `
     }
   }
 
-  .open-in-editor-button {
+  .open-in-editor-button, .source-mapping-error-button {
     display: flex;
     align-items: center;
     justify-content: center;

diff --git a/packages/next/src/client/components/react-dev-overlay/ui/icons/external.tsx b/packages/next/src/client/components/react-dev-overlay/ui/icons/external.tsx
@@ -17,3 +17,23 @@ export function ExternalIcon(props: React.SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function SourceMappingErrorIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="-4 -4 24 24"
+      width="16"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.55846 2H7.44148L1.88975 13.5H14.1102L8.55846 2ZM9.90929 1.34788C9.65902 0.829456 9.13413 0.5 8.55846 0.5H7.44148C6.86581 0.5 6.34092 0.829454 6.09065 1.34787L0.192608 13.5653C-0.127943 14.2293 0.355835 15 1.09316 15H14.9068C15.6441 15 16.1279 14.2293 15.8073 13.5653L9.90929 1.34788ZM8.74997 4.75V5.5V8V8.75H7.24997V8V5.5V4.75H8.74997ZM7.99997 12C8.55226 12 8.99997 11.5523 8.99997 11C8.99997 10.4477 8.55226 10 7.99997 10C7.44769 10 6.99997 10.4477 6.99997 11C6.99997 11.5523 7.44769 12 7.99997 12Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  )
+}
diff --git a/test/lib/next-test-utils.ts b/test/lib/next-test-utils.ts
@@ -1404,7 +1404,9 @@ export async function getRedboxCallStack(
         // so that c&p automatically does the right thing.
         const frame = frameElement.innerText.replace('\n', ' ')
 
-        if (frame.includes('⚠')) {
+        const hasError =
+          frameElement.querySelector('.source-mapping-error-button') !== null
+        if (hasError) {
           stack.push('<FIXME-source-map-middleware-bug>')
           continue
         }