fix: don't log network error in console when loading issue popup (#40288) (#40294)

Backport #40288

* fix #40286

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

package.json

@@ -37,7 +37,7 @@
     "asciinema-player": "3.17.0",
     "chart.js": "4.5.1",
     "chartjs-plugin-zoom": "2.2.0",
-    "clippie": "4.2.1",
+    "clippie": "4.3.1",
     "codemirror-lang-elixir": "4.0.1",
     "colord": "2.10.0",
     "compare-versions": "6.1.1",

pnpm-lock.yaml

@@ -260,8 +260,8 @@ importers:
         specifier: 2.2.0
         version: 2.2.0(chart.js@4.5.1)
       clippie:
-        specifier: 4.2.1
-        version: 4.2.1
+        specifier: 4.3.1
+        version: 4.3.1
       codemirror-lang-elixir:
         specifier: 4.0.1
         version: 4.0.1
@@ -2073,8 +2073,8 @@ packages:
   citeproc@2.4.63:
     resolution: {integrity: sha512-68F95Bp4UbgZU/DBUGQn0qV3HDZLCdI9+Bb2ByrTaNJDL5VEm9LqaiNaxljsvoaExSLEXe1/r6n2Z06SCzW3/Q==}
 
-  clippie@4.2.1:
-    resolution: {integrity: sha512-+Shk4WLaaBtxTwgaspGnFm/WrtjZCVCKsl66mPglNRj6B+OzgIYnp4LX7EjW1UTG5NfJsW60jxwV8EvqtyrDUA==}
+  clippie@4.3.1:
+    resolution: {integrity: sha512-YGBIrB/O/339z1sl0voeJ/MuRkn7EmLTsZAlHtnZD0i1v6uEFRr6Ju8WQ0faf9n5r/1WYX7s3qFQ7I+syUOX7g==}
 
   codemirror-lang-elixir@4.0.1:
     resolution: {integrity: sha512-z6W/XB4b7TZrp9EZYBGVq93vQfvKbff+1iM8YZaVErL0dguBAeLmVRlEv1NuDZHOP1qjJ3NwyibkUkNWn7q9VQ==}
@@ -6433,7 +6433,7 @@ snapshots:
 
   citeproc@2.4.63: {}
 
-  clippie@4.2.1: {}
+  clippie@4.3.1: {}
 
   codemirror-lang-elixir@4.0.1:
     dependencies:

web_src/js/features/ref-issue.ts

@@ -12,10 +12,11 @@ type IssueInfo = {
 
 const issueInfoCache = new Map<string, IssueInfo>();
 
-async function getIssueInfo(url: string): Promise<IssueInfo> {
+async function getIssueInfo(url: string): Promise<IssueInfo | null> {
   if (issueInfoCache.has(url)) return issueInfoCache.get(url)!;
   const resp = await GET(url);
-  if (!resp.ok) throw new Error(resp.statusText || 'Unknown network error');
+  // fetch already logs network errors in console, we can ignore network errors here
+  if (!resp.ok) return null;
   const data = await resp.json();
   issueInfoCache.set(url, data);
   return data;
@@ -26,6 +27,8 @@ async function showRefIssuePopup(link: HTMLAnchorElement, info: IssuePathInfo) {
     getIssueInfo(`${window.config.appSubUrl}/${info.ownerName}/${info.repoName}/${info.pathType}/${info.indexString}/info`),
     import('../components/ContextPopup.vue'),
   ]);
+  if (!data) return;
+
   const el = document.createElement('div');
   const app = createApp(ContextPopup, {
     issue: data.convertedIssue,
@@ -56,21 +59,24 @@ export function initRefIssueContextPopup() {
     link.setAttribute('data-ref-issue-popup', '');
 
     // delay so a mouse passing over the link doesn't fire a fetch
-    let timer: TimeoutId;
-    const cancel = () => {
+    let timer: TimeoutId | undefined;
+    const stopDelayedPopup = () => {
+      if (!timer) return;
       clearTimeout(timer);
+      timer = undefined;
       link.removeAttribute('data-ref-issue-popup');
-      link.removeEventListener('mouseleave', cancel);
+      link.removeEventListener('mouseleave', stopDelayedPopup);
     };
     timer = setTimeout(async () => {
-      link.removeEventListener('mouseleave', cancel);
+      link.removeEventListener('mouseleave', stopDelayedPopup);
       try {
         await showRefIssuePopup(link, issuePathInfo);
       } catch (err) {
-        console.error('Failed to load issue info:', err);
-        link.removeAttribute('data-ref-issue-popup');
+        console.error('Failed to load issue popup info:', err);
+      } finally {
+        stopDelayedPopup();
       }
     }, 300);
-    link.addEventListener('mouseleave', cancel);
+    link.addEventListener('mouseleave', stopDelayedPopup);
   });
 }