Logging responses on Vercel | Remix | Page 1

#

Logging responses on Vercel

#

I meant to edit the post but accidentally deleted it:

How can we log the response objects for the entire site? It feels like this should be something a layer below entry.server.ts but I'm also not 100% sure how the serving magic works. Even if I create my own server.js per the following documentation, I'm still not 100% certain where I can access the request object at a global/middleware level. https://vercel.com/docs/frameworks/remix#using-a-custom-server-file

My entry.server.ts roughly looks like this


export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
): Promise<Response> {
  const emotionCache = createEmotionCache();
  const emotionServer = createEmotionServer(emotionCache);

  const html = renderToString(
    <EmotionCacheProvider value={emotionCache}>
      <RemixServer context={remixContext} url={request.url} />
    </EmotionCacheProvider>
  );

  const emotionChunks = emotionServer.extractCriticalToChunks(html);
  const emotionCss = emotionServer.constructStyleTagsFromChunks(emotionChunks);

  // swap out default component with <Head>
  const defaultRoot = remixContext.routeModules.root;
  remixContext.routeModules.root = {
    ...defaultRoot,
    default: Head,
  };

  const head = renderToString(<RemixServer context={remixContext} url={request.url} />);

  // restore the default root component
  remixContext.routeModules.root = defaultRoot;

  const remixComponent = (
    <EmotionCacheProvider value={emotionCache}>
      <RemixServer context={remixContext} url={request.url} />
    </EmotionCacheProvider>
  );

  const htmlStart = `<!DOCTYPE html><html lang="en"><head><!--start head-->${head}<!--end head-->${emotionCss}</head><body><div id="root">`;
  const htmlEnd = "</div></body></html>";

  return s(
    request,
    responseStatusCode,
    responseHeaders,
    remixComponent,
    htmlStart,
    htmlEnd
  );
}

Vercel Documentation

Remix on Vercel

Learn how to use Vercel's features with Remix.

#

entry.server.ts continued:

function serveBrowsers(
  responseStatusCode: number,
  responseHeaders: Headers,
  remixServer: JSX.Element,
  htmlStart: string,
  htmlEnd: string
): Promise<Response> {
  return new Promise((resolve, reject) => {
    let didError = false;
    const { pipe, abort } = renderToPipeableStream(remixServer, {
      // use onShellReady to wait until a suspense boundary is triggered
      onShellReady() {
        responseHeaders.set("Content-Type", "text/html");

        const htmlStream = new PassThrough();

        htmlStream.write(htmlStart);
        pipe(htmlStream);
        htmlStream.end(htmlEnd);
        resolve(
          new Response(htmlStream, {
            status: didError ? 500 : responseStatusCode,
            headers: responseHeaders,
          })
        );
      },
      onShellError(err) {
        reject(err);
      },
      onError(err) {
        didError = true;
        console.error(err);
      },
    });
    setTimeout(abort, ABORT_DELAY);
  });
}

#Logging responses on Vercel