Fix tabId being lost due to initialization-order issue with the clien…

…t bundle
ForumMagnum · Apr 25, 2024 · d48c314 · d48c314
1 parent a3a9a37
commit d48c314
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/packages/lesswrong/server/apolloServer.ts b/packages/lesswrong/server/apolloServer.ts
@@ -53,6 +53,7 @@ import { asyncLocalStorage, closePerfMetric, openPerfMetric, perfMetricMiddlewar
 import { addAdminRoutesMiddleware } from './adminRoutesMiddleware'
 import { createAnonymousContext } from './vulcan-lib/query';
 import { DatabaseServerSetting } from './databaseSettings';
+import { randomId } from '../lib/random';
 
 /**
  * Try to set the response status, but log an error if the headers have already been sent.
@@ -389,6 +390,11 @@ export function startWebserver() {
     cloudfrontCachingExperiment({ user, response })
 
     const faviconHeader = `<link rel="shortcut icon" href="${faviconUrlSetting.get()}"/>`;
+
+    // Inject a tab ID into the page, by injecting a script fragment that puts
+    // it into a global variable.
+    const tabId = randomId();
+    const tabIdHeader = `<script>var tabId = "${tabId}"</script>`;
 
     // The part of the header which can be sent before the page is rendered.
     // This includes an open tag for <html> and <head> but not the matching
@@ -403,7 +409,12 @@ export function startWebserver() {
         + externalStylesPreload
         + instanceSettingsHeader
         + faviconHeader
-        + publicSettingsHeader // Must come before clientScript
+        // Embedded script tags that must precede the client bundle
+        + publicSettingsHeader
+        + tabIdHeader
+        // The client bundle. Because this uses <script async>, its load order
+        // relative to any scripts that come later than this is undetermined and
+        // varies based on timings and the browser cache.
         + clientScript
     );
 
@@ -416,8 +427,8 @@ export function startWebserver() {
     });
 
     const renderResultPromise = performanceMetricLoggingEnabled.get()
-      ? asyncLocalStorage.run({}, () => renderWithCache(request, response, user))
-      : renderWithCache(request, response, user);
+      ? asyncLocalStorage.run({}, () => renderWithCache(request, response, user, tabId))
+      : renderWithCache(request, response, user, tabId);
 
     const [prefetchingResources, renderResult] = await Promise.all([prefetchResourcesPromise, renderResultPromise]);
 

diff --git a/packages/lesswrong/server/vulcan-lib/apollo-ssr/renderPage.tsx b/packages/lesswrong/server/vulcan-lib/apollo-ssr/renderPage.tsx
@@ -76,19 +76,12 @@ interface RenderPriorityQueueSlot extends RequestData {
   renderRequestParams: RenderRequestParams;
 }
 
-export const renderWithCache = async (req: Request, res: Response, user: DbUser|null) => {
+export const renderWithCache = async (req: Request, res: Response, user: DbUser|null, tabId: string) => {
   const startTime = new Date();
 
   const ip = getIpFromRequest(req)
   const userAgent = req.headers["user-agent"];
 
-  // Inject a tab ID into the page, by injecting a script fragment that puts
-  // it into a global variable. In previous versions of Vulcan this would've
-  // been handled by InjectData, but InjectData didn't surive the 1.12 version
-  // upgrade (it injects into the page template in a way that requires a
-  // response object, which the onPageLoad/sink API doesn't offer).
-  const tabId = randomId();
-  const tabIdHeader = `<script>var tabId = "${tabId}"</script>`;
   const url = getPathFromReq(req);
 
   const clientId = getCookieFromReq(req, "clientId");
@@ -161,7 +154,7 @@ export const renderWithCache = async (req: Request, res: Response, user: DbUser|
 
     return {
       ...rendered,
-      headers: [...rendered.headers, tabIdHeader],
+      headers: [...rendered.headers],
     };
   } else {
     if (performanceMetricLoggingEnabled.get()) {
@@ -220,7 +213,7 @@ export const renderWithCache = async (req: Request, res: Response, user: DbUser|
 
     return {
       ...rendered,
-      headers: [...rendered.headers, tabIdHeader],
+      headers: [...rendered.headers],
     };
   }
 };