CDN + Observabilities fixes (#2119)

* feat: added heroku fixes

- Support pulling the request id from the request
  headers
- Add proper cache headers to static files

* Update package.json

client/coral-embed/src/Stream.js

@@ -79,7 +79,7 @@ export default class Stream {
       const renderOnIntersect = () => onIntersect(this.el, () => this.render());
       if (!window.IntersectionObserver) {
         // Include a polyfill for the intersection observer.
-        import('intersection-observer')
+        import(/* webpackChunkName: "intersection-observer" */ 'intersection-observer')
           .then(() => {
             // Polyfill applied.
             renderOnIntersect();

config.js

@@ -76,6 +76,10 @@ const CONFIG = {
   // on the scraper when it makes requests.
   SCRAPER_HEADERS: process.env.TALK_SCRAPER_HEADERS || '{}',
 
+  // HTTP_X_REQUEST_ID is a string which represents the request header where we
+  // should source the request ID from, otherwise, a new one will be generated.
+  HTTP_X_REQUEST_ID: process.env.TALK_HTTP_X_REQUEST_ID || null,
+
   //------------------------------------------------------------------------------
   // JWT based configuration
   //------------------------------------------------------------------------------

middleware/trace.js

@@ -1,11 +1,21 @@
+const { HTTP_X_REQUEST_ID } = require('../config');
 const uuid = require('uuid/v1');
 
 // Trace middleware attaches a request id to each incoming request.
-module.exports = (req, res, next) => {
-  req.id = uuid();
+module.exports = HTTP_X_REQUEST_ID
+  ? (req, res, next) => {
+      req.id = req.get(HTTP_X_REQUEST_ID) || uuid();
 
-  // Add the context ID to the request as an HTTP header.
-  res.set('X-Talk-Trace-ID', req.id);
+      // Add the context ID to the request as an HTTP header.
+      res.set('X-Talk-Trace-ID', req.id);
 
-  next();
-};
+      next();
+    }
+  : (req, res, next) => {
+      req.id = uuid();
+
+      // Add the context ID to the request as an HTTP header.
+      res.set('X-Talk-Trace-ID', req.id);
+
+      next();
+    };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "talk",
-  "version": "4.6.8",
+  "version": "4.6.9",
   "description": "A better commenting experience from Mozilla, The New York Times, and the Washington Post. https://coralproject.net",
   "main": "app.js",
   "private": true,
@@ -105,7 +105,7 @@
     "eventemitter2": "^4.1.2",
     "exports-loader": "^0.6.4",
     "express": "4.16.0",
-    "express-static-gzip": "^0.3.1",
+    "express-static-gzip": "^1.1.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.11.2",
     "final-form": "^4.8.1",

routes/index.js

@@ -42,11 +42,31 @@ if (!DISABLE_STATIC_SERVER) {
     res.redirect(301, newEmbed);
   });
 
+  /**
+   * setHeaders adds new headers related to caching to the static files that are
+   * served.
+   *
+   * @param res the response that can be used to set headers on
+   * @param path the path on the filesystem where the files are being served from
+   */
+  const setHeaders = (res, path) => {
+    if (path.endsWith('embed.js')) {
+      // The embed.js file itself should not be cached for a long duration of
+      // time, as it may change based on the deploy.
+      res.setHeader('Cache-Control', 'public, max-age=3600');
+    } else {
+      // All static files besides the embed.js file contain hashes, we should
+      // ensure that any other file is cached for a long duration of time. This
+      // is cached for 1 week.
+      res.setHeader('Cache-Control', 'public, max-age=604800, immutable');
+    }
+  };
+
   /**
    * Serve the directories under dist.
    */
   const dist = path.resolve(path.join(__dirname, '../dist'));
-  if (process.env.NODE_ENV === 'production') {
+  if (process.env.NODE_ENV !== 'production') {
     router.use(
       '/static',
       staticServer(dist, {
@@ -58,10 +78,11 @@ if (!DISABLE_STATIC_SERVER) {
             fileExtension: 'zz',
           },
         ],
+        setHeaders,
       })
     );
   } else {
-    router.use('/static', express.static(dist));
+    router.use('/static', express.static(dist, { setHeaders }));
   }
 }
 

yarn.lock

@@ -4277,10 +4277,10 @@ exports-loader@^0.6.4:
     loader-utils "^1.0.2"
     source-map "0.5.x"
 
-express-static-gzip@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/express-static-gzip/-/express-static-gzip-0.3.2.tgz#89ede84547a5717de3146315f62dc996c071a88d"
-  integrity sha512-xFOW5Lxrh4xLey5i6gGWHOFznJayGCxazUau0kq7ElUh1t7q2B6IlvWv4d3UJwJej+aXEu9os/VpzPvRchdNiA==
+express-static-gzip@^1.1.1:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/express-static-gzip/-/express-static-gzip-1.1.3.tgz#345ea02637d9d5865777d6fb57ccc0884abcda65"
+  integrity sha512-k8Q4Dx4PDpzEb8kth4uiPWrBeJWJYSgnWMzNdjQUOsEyXfYKbsyZDkU/uXYKcorRwOie5Vzp4RMEVrJLMfB6rA==
   dependencies:
     serve-static "^1.12.3"