Merge pull request #717 from freeCodeCamp/main

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

.gitignore

@@ -210,3 +210,6 @@ curriculum/build
 ### Playwright ###
 
 /playwright
+
+### Shadow Testing Log Files Folder ###
+api/logs/

api/src/app.ts

@@ -27,6 +27,8 @@ import bouncer from './plugins/bouncer';
 import errorHandling from './plugins/error-handling';
 import csrf from './plugins/csrf';
 import notFound from './plugins/not-found';
+import shadowCapture from './plugins/shadow-capture';
+
 import * as publicRoutes from './routes/public';
 import * as protectedRoutes from './routes/protected';
 
@@ -35,6 +37,7 @@ import {
   EMAIL_PROVIDER,
   FCC_ENABLE_DEV_LOGIN_MODE,
   FCC_ENABLE_SWAGGER_UI,
+  FCC_ENABLE_SHADOW_CAPTURE,
   FREECODECAMP_NODE_ENV
 } from './utils/env';
 import { isObjectID } from './utils/validation';
@@ -127,6 +130,10 @@ export const build = async (
     fastify.log.info(`Swagger UI available at ${API_LOCATION}/documentation`);
   }
 
+  if (FCC_ENABLE_SHADOW_CAPTURE) {
+    void fastify.register(shadowCapture);
+  }
+
   void fastify.register(auth);
   void fastify.register(notFound);
   void fastify.register(prismaPlugin);

api/src/plugins/shadow-capture.ts

@@ -0,0 +1,137 @@
+import { randomUUID } from 'crypto';
+import { appendFileSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import type { FastifyPluginCallback } from 'fastify';
+
+import fp from 'fastify-plugin';
+import { FastifyReply } from 'fastify/types/reply';
+import { FastifyRequest } from 'fastify/types/request';
+
+const LOGS_DIRECTORY = 'logs';
+const REQUEST_CAPTURE_FILE = 'request-capture.jsonl';
+const RESPONSE_CAPTURE_FILE = 'response-capture.jsonl';
+
+let REQUEST_BUFFER: unknown[] = [];
+let RESPONSE_BUFFER: unknown[] = [];
+
+/**
+ * Plugin for capturing requests and responses to allow shadow testing.
+ *
+ * @param fastify The Fastify instance.
+ * @param _options Options passed to the plugin via `fastify.register(plugin, options)`.
+ * @param done Callback to signal that the logic has completed.
+ */
+const shadowCapture: FastifyPluginCallback = (fastify, _options, done) => {
+  mkdirSync(LOGS_DIRECTORY, { recursive: true });
+  fastify.addHook('onRequest', (req, rep, done) => {
+    // Attach timestamp at beginning of lifecycle
+    // @ts-expect-error Exists
+    req.__timestamp = Date.now();
+
+    // Give request and response same id to match.
+    const id = randomUUID();
+    // @ts-expect-error Exists
+    req.__id = id;
+    // @ts-expect-error Exists
+    rep.__id = id;
+    done();
+  });
+
+  // Body is only included after `Parsing` lifecycle
+  fastify.addHook('preValidation', (req, rep, done) => {
+    captureRequest(req);
+    done();
+  });
+
+  fastify.addHook('onSend', async (_req, rep, payload) => {
+    // @ts-expect-error Exists
+    rep.__payload = payload;
+    return payload;
+  });
+
+  fastify.addHook('onResponse', (_req, rep, done) => {
+    captureReply(rep);
+    done();
+  });
+
+  done();
+};
+
+/* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return */
+function captureRequest(req: FastifyRequest) {
+  const savedRequest = {
+    // @ts-expect-error Exists
+    id: req.__id,
+    // @ts-expect-error Exists
+    timestamp: req.__timestamp,
+    url: req.url,
+    headers: omit(req.headers, 'cookie'),
+    cookies: include(req.cookies, '_csrf', 'csrf_token', 'jwt_access_token'),
+    user: req.user,
+    body: req.body
+  };
+
+  if (REQUEST_BUFFER.length > 10) {
+    appendFileSync(
+      join(LOGS_DIRECTORY, REQUEST_CAPTURE_FILE),
+      REQUEST_BUFFER.map(rb => JSON.stringify(rb)).join('\n') + '\n'
+    );
+    REQUEST_BUFFER = [savedRequest];
+  } else {
+    REQUEST_BUFFER.push(savedRequest);
+  }
+}
+
+function captureReply(rep: FastifyReply) {
+  const savedReply = {
+    // @ts-expect-error Exists
+    id: rep.__id,
+    headers: rep.getHeaders(),
+    timestamp: Date.now(),
+    // @ts-expect-error Exists
+    payload: rep.__payload,
+    statusCode: rep.statusCode
+  };
+
+  if (RESPONSE_BUFFER.length > 10) {
+    appendFileSync(
+      join(LOGS_DIRECTORY, RESPONSE_CAPTURE_FILE),
+      RESPONSE_BUFFER.map(rb => JSON.stringify(rb)).join('\n') + '\n'
+    );
+    RESPONSE_BUFFER = [savedReply];
+  } else {
+    RESPONSE_BUFFER.push(savedReply);
+  }
+}
+
+/**
+ * Returns a subset of the given object with the values or properties given removed.
+ * @param obj - An array or an object literal.
+ * @param vals - Items or properties to exclude from `obj`.
+ * @returns Subset of `obj`.
+ */
+function omit(obj: Record<string, unknown> | unknown[], ...vals: unknown[]) {
+  if (Array.isArray(obj)) {
+    return obj.filter(o => !vals.includes(o));
+  } else {
+    return Object.keys(obj)
+      .filter(k => {
+        return !vals.includes(k);
+      })
+      .reduce((acc, curr) => ({ ...acc, [curr]: obj[curr] }), {});
+  }
+}
+
+function include(obj: Record<string, unknown> | unknown[], ...vals: unknown[]) {
+  if (Array.isArray(obj)) {
+    return obj.filter(o => vals.includes(o));
+  } else {
+    return Object.keys(obj)
+      .filter(k => {
+        return vals.includes(k);
+      })
+      .reduce((acc, curr) => ({ ...acc, [curr]: obj[curr] }), {});
+  }
+}
+
+export default fp(shadowCapture);

api/src/utils/env.ts

@@ -125,6 +125,8 @@ export const FCC_ENABLE_SWAGGER_UI =
   process.env.FCC_ENABLE_SWAGGER_UI === 'true';
 export const FCC_ENABLE_DEV_LOGIN_MODE =
   process.env.FCC_ENABLE_DEV_LOGIN_MODE === 'true';
+export const FCC_ENABLE_SHADOW_CAPTURE =
+  process.env.FCC_ENABLE_SHADOW_CAPTURE === 'true';
 export const SENTRY_DSN =
   process.env.SENTRY_DSN === 'dsn_from_sentry_dashboard'
     ? ''

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md

@@ -15,7 +15,7 @@ You can use the `hr` tag to add a horizontal line across the width of its contai
 
 Add an `hr` tag underneath the `h4` which contains the card title.
 
-**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag.
+**Note:** In HTML, `hr` is a void element, and therefore doesn't need a separate closing tag.
 
 # --hints--
 

curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md

@@ -16,7 +16,7 @@ An example of this would be:
 <img src="https://www.freecatphotoapp.com/your-image.jpg">
 ```
 
-Note that `img` elements are self-closing.
+Note that `img` is a void element.
 
 All `img` elements **must** have an `alt` attribute. The text inside an `alt` attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
 

curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md

@@ -17,7 +17,7 @@ You can create placeholder text like so:
 <input type="text" placeholder="this is placeholder text">
 ```
 
-**Note:** Remember that `input` elements are self-closing.
+**Note:** Remember that `input` is a void element.
 
 # --instructions--
 

curriculum/challenges/english/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md

@@ -19,7 +19,7 @@ You can create a text input like this:
 <input type="text">
 ```
 
-Note that `input` elements are self-closing.
+Note that `input` is a void element.
 
 # --instructions--
 

curriculum/challenges/english/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md

@@ -12,7 +12,7 @@ So far, you’ve seen how JSX differs from HTML in a key way with the use of `cl
 
 Another important way in which JSX differs from HTML is in the idea of the self-closing tag.
 
-In HTML, almost all tags have both an opening and closing tag: `<div></div>`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called “self-closing tags”, or tags that don’t require both an opening and closing tag before another tag can start.
+In HTML, almost all tags have both an opening and closing tag: `<div></div>`; the closing tag always has a forward slash before the tag name that you are closing. However, there are special instances in HTML called <dfn>void elements</dfn>, or elements that don’t require both an opening and closing tag before another element can start.
 
 For example the line-break tag can be written as `<br>` or as `<br />`, but should never be written as `<br></br>`, since it doesn't contain any content.
 

curriculum/challenges/english/07-scientific-computing-with-python/learn-encapsulation-by-building-a-projectile-trajectory-calculator/663353465bfb14259717da93.md

@@ -47,7 +47,7 @@ The method should return the correct output.
 ```js
 ({
     test: () => assert(runPython(
-        `str = """
+        `a = """
   x      y
   0   3.00
   1   3.90
@@ -65,7 +65,7 @@ The method should return the correct output.
 """
 ball = Projectile(10, 3, 45)
 g = Graph(ball.calculate_all_coordinates())
-g.create_coordinates_table() == str`
+g.create_coordinates_table() == a`
     ))
 })
 ```