feat(api): handle missing endpoints (#55429)

api/src/plugins/not-found.test.ts

@@ -0,0 +1,73 @@
+import Fastify, { type FastifyInstance } from 'fastify';
+
+import notFound from './not-found';
+import redirectWithMessage, { formatMessage } from './redirect-with-message';
+
+describe('fourOhFour', () => {
+  let fastify: FastifyInstance;
+
+  beforeEach(async () => {
+    fastify = Fastify();
+    await fastify.register(redirectWithMessage);
+    await fastify.register(notFound);
+  });
+
+  afterEach(async () => {
+    await fastify.close();
+  });
+
+  it('should redirect to origin/404 if the request does not Accept json', async () => {
+    const res = await fastify.inject({
+      method: 'GET',
+      url: '/test',
+      headers: {
+        referer: 'https://www.freecodecamp.org/anything',
+        accept: 'text/plain'
+      }
+    });
+
+    expect(res.headers['location']).toEqual(
+      'https://www.freecodecamp.org/404?' +
+        formatMessage({
+          type: 'danger',
+          content: "We couldn't find path /test"
+        })
+    );
+    expect(res.statusCode).toEqual(302);
+  });
+
+  it('should return a 404 json response if the request does Accept json', async () => {
+    const res = await fastify.inject({
+      method: 'GET',
+      url: '/test',
+      headers: {
+        referer: 'https://www.freecodecamp.org/anything',
+        accept: 'application/json,text/plain'
+      }
+    });
+
+    expect(res.json()).toEqual({ error: 'path not found' });
+    expect(res.statusCode).toEqual(404);
+  });
+
+  it('should redirect if the request prefers text/html to json', async () => {
+    const res = await fastify.inject({
+      method: 'GET',
+      url: '/test',
+      headers: {
+        referer: 'https://www.freecodecamp.org/anything',
+        // this does accept json, (via the */*), but prefers text/html
+        accept: 'text/html,*/*'
+      }
+    });
+
+    expect(res.headers['location']).toEqual(
+      'https://www.freecodecamp.org/404?' +
+        formatMessage({
+          type: 'danger',
+          content: "We couldn't find path /test"
+        })
+    );
+    expect(res.statusCode).toEqual(302);
+  });
+});

api/src/plugins/not-found.ts

@@ -0,0 +1,37 @@
+import type { FastifyPluginCallback } from 'fastify';
+
+import fp from 'fastify-plugin';
+import accepts from '@fastify/accepts';
+
+import { getRedirectParams } from '../utils/redirection';
+
+/**
+ * Plugin for handling missing endpoints.
+ *
+ * @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 fourOhFour: FastifyPluginCallback = (fastify, _options, done) => {
+  void fastify.register(accepts);
+
+  // If the request accepts JSON and does not specifically prefer text/html,
+  // this will return a 404 JSON response. Everything else will be redirected.
+  fastify.setNotFoundHandler((request, reply) => {
+    const accepted = request.accepts().type(['json', 'html']);
+
+    if (accepted == 'json') {
+      void reply.code(404).send({ error: 'path not found' });
+    } else {
+      const { origin } = getRedirectParams(request);
+      void reply.status(302);
+      void reply.redirectWithMessage(`${origin}/404`, {
+        type: 'danger',
+        content: `We couldn't find path ${request.url}`
+      });
+    }
+  });
+  done();
+};
+
+export default fp(fourOhFour, { dependencies: ['redirect-with-message'] });