From ee8c3caeb70c245b0c434c8e122b6b26b0b50745 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Naz=C4=B1m=20Can=20Alt=C4=B1nova?= <canaltinova@gmail.com>
Date: Fri, 22 May 2026 12:58:45 +0200
Subject: [PATCH] Add missing key props to CodeErrorOverlay error list items

Seven of the ten error cases in the errors.map() were missing a key prop
on their Localized wrapper, and that was causing a React dev warning
about non-unique keys in a list.
---
 src/components/app/CodeErrorOverlay.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/app/CodeErrorOverlay.tsx b/src/components/app/CodeErrorOverlay.tsx
index 29d3dfa0d4..840784c7e3 100644
--- a/src/components/app/CodeErrorOverlay.tsx
+++ b/src/components/app/CodeErrorOverlay.tsx
@@ -50,6 +50,7 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             const { apiErrorMessage } = error;
             return (
               <Localized
+                key={key}
                 id="SourceView--browser-api-error-when-obtaining-source"
                 vars={{ apiErrorMessage }}
               >
@@ -61,6 +62,7 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             const { apiErrorMessage } = error;
             return (
               <Localized
+                key={key}
                 id="SourceView--local-symbol-server-api-error-when-obtaining-source"
                 vars={{ apiErrorMessage }}
               >
@@ -72,6 +74,7 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             const { errorMessage } = error;
             return (
               <Localized
+                key={key}
                 id="SourceView--browser-api-malformed-response-when-obtaining-source"
                 vars={{ errorMessage }}
               >
@@ -83,6 +86,7 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             const { errorMessage } = error;
             return (
               <Localized
+                key={key}
                 id="SourceView--local-symbol-server-api-malformed-response-when-obtaining-source"
                 vars={{ errorMessage }}
               >
@@ -94,6 +98,7 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             const { url, pathInArchive } = error;
             return (
               <Localized
+                key={key}
                 id="SourceView--not-in-archive-error-when-obtaining-source"
                 vars={{ url, pathInArchive }}
               >
@@ -105,6 +110,7 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             const { url, parsingErrorMessage } = error;
             return (
               <Localized
+                key={key}
                 id="SourceView--archive-parsing-error-when-obtaining-source"
                 vars={{ url, parsingErrorMessage }}
               >
@@ -116,6 +122,7 @@ export function CodeErrorOverlay({ errors }: CodeErrorOverlayProps) {
             const { sourceUuid, url, errorMessage } = error;
             return (
               <Localized
+                key={key}
                 id="SourceView--not-in-browser-error-when-obtaining-js-source"
                 vars={{ url, sourceUuid, errorMessage }}
               >