feat: add link to logs on error page (#1070)

Author: styfle

src/pages/500.tsx

@@ -6,7 +6,7 @@ import PageContainer from '../components/PageContainer';
 
 import { pages } from '../util/constants';
 
-export default () => (
+export default ({ reqId }: { reqId: string }) => (
     <>
         <PageContainer>
             <div style={{ textAlign: 'center', marginBottom: '2rem' }}>
@@ -19,7 +19,14 @@ export default () => (
                     python/curl/etc.
                 </p>
                 <p>
-                    <a href={pages.index}>Go Home You</a>
+                    <a href={pages.index}>Go Home</a>
+                </p>
+                <p>
+                    <a
+                        href={`https://vercel.com/packagephobia/packagephobia/logs?requestIds=${reqId}`}
+                    >
+                        View Logs
+                    </a>
                 </p>
             </div>
 

src/pages/_document.tsx

@@ -129,7 +129,8 @@ export async function renderPage(
     pathname: string,
     query: ParsedUrlQuery,
     tmpDir: string,
-    gaId = '',
+    gaId: string,
+    reqId: string,
 ) {
     res.statusCode = getStatusCode(pathname);
     const force = query.force === '1';
@@ -181,7 +182,15 @@ export async function renderPage(
             </script>
             ${OctocatCorner()}
             <div id="${containerId}">`);
-    const factory = await routePage(pathname, inputStr, pkgVersions, manifest, force, tmpDir);
+    const factory = await routePage(
+        pathname,
+        inputStr,
+        pkgVersions,
+        manifest,
+        force,
+        tmpDir,
+        reqId,
+    );
     const stream = renderToStaticNodeStream(factory);
     stream.pipe(res, { end: false });
     stream.on('end', () => {
@@ -219,6 +228,7 @@ async function routePage(
     manifest: NpmManifest | null,
     force: boolean,
     tmpDir: string,
+    reqId: string,
 ) {
     try {
         switch (pathname) {
@@ -244,7 +254,7 @@ async function routePage(
             return <NotFound resource={err.resource} />;
         }
         console.error('Unexpected Error Occurred...', err);
-        return <ServerError />;
+        return <ServerError reqId={reqId} />;
     }
 }
 

src/server.ts

@@ -32,6 +32,10 @@ export async function handler(req: IncomingMessage, res: ServerResponse) {
     const userAgent = headers['user-agent'] || '';
     console.log(`${method} ${headers.host}${url}`);
     console.log(`user-agent: ${userAgent}`);
+    const reqId =
+        String(headers['x-vercel-id'] || '')
+            .split(':')
+            .pop() || '';
     if (
         !userAgent ||
         userAgent.startsWith('node') ||
@@ -112,7 +116,7 @@ export async function handler(req: IncomingMessage, res: ServerResponse) {
                     return res.end();
                 } catch (e) {
                     res.setHeader('Content-Type', mimeType('*.html'));
-                    return renderPage(res, pages.parseFailure, query, TMPDIR, GA_ID);
+                    return renderPage(res, pages.parseFailure, query, TMPDIR, GA_ID, reqId);
                 }
             });
         } else {
@@ -121,7 +125,7 @@ export async function handler(req: IncomingMessage, res: ServerResponse) {
                 typeof query.p === 'string' && parsePackageString(query.p).version !== null;
             res.setHeader('Content-Type', mimeType('*.html'));
             res.setHeader('Cache-Control', cacheControl(isProd, isIndex || hasVersion ? 31 : 0));
-            renderPage(res, pathname, query, TMPDIR, GA_ID);
+            renderPage(res, pathname, query, TMPDIR, GA_ID, reqId);
         }
     } catch (e) {
         console.error(e);