more robust unpkg errors handling, small tweaks

components/Package/CodeBrowser/CodeBrowserContent.tsx

@@ -59,14 +59,20 @@ export default function CodeBrowserContent({
       : undefined,
     (url: string) =>
       fetch(url).then(res => {
+        if (res.status >= 500) {
+          throw new Error(`Failed to fetch "${filePath}" file content: ${res.status}`);
+        }
+
         if (res.status === 200) {
           return res.text();
         }
+
         return res.json();
       }),
     {
       dedupingInterval: TimeRange.HOUR * 1000,
       revalidateOnFocus: false,
+      shouldRetryOnError: false,
     }
   );
 

next.config.ts

@@ -10,6 +10,8 @@ const PACKAGES_TO_OPTIMIZE = [
   '@react-native-picker/picker',
   '@sentry/*',
   '@shikijs/*',
+  '@videojs/*',
+  '@visx/*',
   'node-emoji',
   'react-native',
   'react-native-safe-area-context',

package.json

@@ -28,7 +28,7 @@
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-native-picker/picker": "^2.11.4",
     "@sentry/react": "^10.50.0",
-    "@videojs/react": "^10.0.0-beta.22",
+    "@videojs/react": "^10.0.0-beta.23",
     "@visx/gradient": "^3.12.0",
     "@visx/responsive": "^3.12.0",
     "@visx/xychart": "^3.12.0",
@@ -75,7 +75,7 @@
     "next-images": "^1.8.5",
     "oxfmt": "^0.47.0",
     "oxlint": "^1.62.0",
-    "oxlint-tsgolint": "^0.22.0",
+    "oxlint-tsgolint": "^0.22.1",
     "simple-git-hooks": "^2.13.1",
     "typescript": "^6.0.3",
     "user-agent-data-types": "^0.4.3"

pages/api/proxy/unpkg.ts

@@ -3,6 +3,8 @@ import { type NextApiRequest, type NextApiResponse } from 'next';
 import { NEXT_10M_CACHE_HEADER } from '~/util/Constants';
 import { parseQueryParams } from '~/util/queryParams';
 
+const UNPKG_TIMEOUT_MS = 15_000;
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const { name, path } = parseQueryParams(req.query);
 
@@ -20,47 +22,60 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     return;
   }
 
-  const result = await fetch(`https://unpkg.com/${packageName}/${apiPath}`, {
-    ...NEXT_10M_CACHE_HEADER,
-    redirect: 'manual',
-  });
+  try {
+    const result = await fetch(`https://unpkg.com/${packageName}/${apiPath}`, {
+      ...NEXT_10M_CACHE_HEADER,
+      redirect: 'manual',
+      signal: AbortSignal.timeout(UNPKG_TIMEOUT_MS),
+    });
+
+    if (result.status === 302) {
+      const location = result.headers.get('location');
 
-  if (result.status === 302) {
-    const location = result.headers.get('location');
+      if (!location) {
+        res.setHeader('Content-Type', 'application/json');
+        res.statusCode = 502;
+        res.json({
+          error: 'Invalid response. Unpkg returned a redirect without a location header.',
+        });
+        return;
+      }
 
-    if (!location) {
-      res.setHeader('Content-Type', 'application/json');
-      res.statusCode = 502;
-      res.json({
-        error: 'Invalid response. Unpkg returned a redirect without a location header.',
+      const redirectResult = await fetch(new URL(location, 'https://unpkg.com').toString(), {
+        ...NEXT_10M_CACHE_HEADER,
+        signal: AbortSignal.timeout(UNPKG_TIMEOUT_MS),
       });
+
+      if ('status' in redirectResult && redirectResult.status !== 200) {
+        res.statusCode = redirectResult.status;
+        res.json({});
+        return;
+      }
+
+      res.setHeader('Content-Type', 'text/plain');
+      res.statusCode = 200;
+      res.write(await redirectResult.text());
+      res.end();
       return;
     }
 
-    const redirectResult = await fetch(new URL(location, 'https://unpkg.com').toString(), {
-      ...NEXT_10M_CACHE_HEADER,
-    });
-
-    if ('status' in redirectResult && redirectResult.status !== 200) {
-      res.statusCode = redirectResult.status;
+    if ('status' in result && result.status !== 200) {
+      res.statusCode = result.status;
       res.json({});
       return;
     }
 
-    res.setHeader('Content-Type', 'text/plain');
+    res.setHeader('Content-Type', 'application/json');
     res.statusCode = 200;
-    res.write(await redirectResult.text());
-    res.end();
-    return;
-  }
+    res.json(await result.json());
+  } catch (error) {
+    if (error instanceof Error && error.name !== 'AbortError' && error.name !== 'TimeoutError') {
+      throw error;
+    }
 
-  if ('status' in result && result.status !== 200) {
-    res.statusCode = result.status;
-    res.json({});
-    return;
+    res.setHeader('Cache-Control', 'private, no-cache, no-store, must-revalidate');
+    res.setHeader('Content-Type', 'application/json');
+    res.statusCode = 504;
+    res.json({ error: `Request to unpkg timed out after ${UNPKG_TIMEOUT_MS / 1000}s.` });
   }
-
-  res.setHeader('Content-Type', 'application/json');
-  res.statusCode = 200;
-  res.json(await result.json());
 }

util/codeBrowser.ts

@@ -58,6 +58,7 @@ export const FILE_WARNINGS = [
       '.watchmanconfig',
       'babel.config.js',
       'eslint.config*.js',
+      'expo-module.config.json',
       'gradle-wrapper.jar',
       'gradlew',
       'gradlew.bat',