Differentiate timeout vs prebuilt binary failure in 500 error message

src/pages/500.tsx

@@ -6,17 +6,23 @@ import PageContainer from '../components/PageContainer';
 
 import { pages } from '../util/constants';
 
-export default ({ reqId }: { reqId: string }) => (
+export default ({ reqId, isTimeout }: { reqId: string; isTimeout?: boolean }) => (
     <>
         <PageContainer>
             <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
                 <h1>500 Internal Server Error</h1>
 
                 <p>Oops, the package failed to install.</p>
                 <p style={{ maxWidth: '500px' }}>
-                    This can happen when there is no prebuilt binary for node@
-                    {process.versions.node} or the install script requires CLIs like
-                    python/curl/etc.
+                    {isTimeout ? (
+                        'This can happen when the package took too long to install and the request timed out.'
+                    ) : (
+                        <>
+                            This can happen when there is no prebuilt binary for node@
+                            {process.versions.node} or the install script requires CLIs like
+                            python/curl/etc.
+                        </>
+                    )}
                 </p>
                 <p>
                     <a href={pages.index}>Go Home</a>

src/pages/_document.tsx

@@ -253,8 +253,10 @@ async function routePage(
         if (err instanceof NotFoundError) {
             return <NotFound resource={err.resource} />;
         }
+        const isTimeout =
+            err instanceof Error && 'code' in err && (err as any).code === 'ABORT_ERR';
         console.error('Unexpected Error Occurred...', err);
-        return <ServerError reqId={reqId} />;
+        return <ServerError reqId={reqId} isTimeout={isTimeout} />;
     }
 }