Implement a Root-Level Request Logger Middleware - Help Needed

JavaScript
1

What’s happening:
Here’s my current code in myApp.js:

const express = require("express");
const app = express();
const homePath = `${__dirname}/views/index.html`;
const assetsPath = `${__dirname}/public/`;
require("dotenv").config();

app.get("/", (req, res) => res.sendFile(homePath));

app.use("/public", express.static(assetsPath));
app.get("/json", (req, res) => {
  const message = "Hello json";
  const messageUpper = message.toUpperCase();
  if (req.protocol === "http") {
    return res.redirect(`https://${req.headers.host}${req.url}`);
  }
  console.dir(req.protocol);

  if (process.env.MESSAGE_STYLE === "uppercase") {
    res.json({"message": messageUpper});
  } else {
    res.json({"message": message});
  }
});

app.use((res, req, next) => {
  if (req.protocol === "http") {
    return res.redirect(`https://${req.headers.host}${req.url}`);
  }
  console.dir(req.protocol);
  
  const str = `${req.method} ${req.path} - ${req.ip}`;
  console.log(str);
  return next();
});

What’s the problem here? The test doesn’t pass. If I need to do an HTTPS redirect here, am I doing it correctly? Would like to ask the same for the challenge before this one since part of the problem for it not passing is because of it not redirecting to HTTPS on its own.

Project link(s)

solution: https://boilerplate-express.dragonosman.repl.co

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36 Edg/88.0.705.68.

Challenge: Implement a Root-Level Request Logger Middleware

Link to the challenge:

Any help is appreciated. Thanks in advance.

2

Hello there,

Currently there is a known issue with some of the challenges in this section: Use the .env File - Issue - freeCodeCamp Support - The freeCodeCamp Forum

Some have also experienced issue with this challenge.

Hope this helps

3

I saw that.

Isn’t there a way around the problem? For example, by forcing Node to perform a redirect to HTTPS instead of plain HTTP. I tried to do that in my code; did I do it right or is there a problem still?

Apparently the next challenge after this also has this problem.

About an origin other than freecodecamp.org; how do I do that? I’m doing this on Repl, by the way.

4

Right. First thing is the middleware should be mounted before the routes. Otherwise, the routes do not have access to it.

Typically, it might be more common to setup a middleware on its own that redirects - do not make one middleware function do 2 things. (In this case, it does not matter much, but I am actually not sure how the tests will behave if you include the console.log within the same middleware.

Otherwise, are you sure req.headers.host is returning what you expect?

5

How do I submit from an origin other than freecodecamp.org? Do you have any idea?

6

If by “submit” you mean make the requests to your Repl.it app, then you can use a proxy server which would re-route the requests from freecodecamp.org to your destination.

7

I meant submitting my solution to the challenge page on FCC. Apparently, in the one known case where someone managed to complete these challenges that have the issue mentioned in the link you gave earlier, they had an origin other than freecodecamp.org when they submitted. So I was trying to ask how I could do that.

8

I tried to debug with the Camper who managed to submit with a different origin. However, we were unable to discover why they had a different origin.

But my reply above is the answer to achieving this - use a proxy. Essentially, create another server which just takes the requests, and re-routes them to the app you want. This way, the order is:
freecodecamp -> proxy -> Repl
Where the proxy will cause the origin (from the eyes of Repl) to be itself. The proxy can even be hosted on Repl.

Hope this clarifies.

9

Can a proxy server be created within Repl itself? And do I need more than the line app.enable("trust proxy")? If so, what more do I do?

10

I have never created one. So, I recommend you do some research; there must be a few tutorials out there.
The basic idea is as I have said:

  • Submit proxy URL to fCC
  • Proxy takes the request from the fCC tests, and requests the same information from the app
  • App thinks proxy is making the requests
  • App responds to proxy
  • Proxy responds to fCC

Think of it as an API within an API.

11

I found this tutorial for proxy servers in Node. I tried to follow it here:

const express = require("express");
const { createProxyMiddleware } = require("http-proxy-middleware");

const PORT = 3001;
const HOST = "boilerplate-express.dragonosman.repl";
const API_SERVICE_URL = "https://jsonplaceholder.typicode.com";

const app = express();

app.use("", (res, req, next) => {
  if (req.headers.authorization) {
    next();
  } else {
    res.sendStatus(403);
  }
});

app.use("/json_placeholder", createProxyMiddleware({
  target: API_SERVICE_URL,
  changeOrigin: true,
  pathRewrite: {
    [`^/json_placeholder`]: "",
  }
}));

app.listen(PORT, HOST, () => console.log(`Starting Proxy at ${HOST}:${PORT}`));

I named it “proxy.js” and required it from “server.js”. I have an error on it:

[HPM] Proxy created: /  -> https://jsonplaceholder.typicode.com
[HPM] Proxy rewrite rule created: "^/json_placeholder" ~> ""
Node is listening on port 3000...
events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: getaddrinfo ENOTFOUND boilerplate-express.dragonosman.repl
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:26)
Emitted 'error' event on Server instance at:
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1495:12)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:66:17) {
  errno: 'ENOTFOUND',
  code: 'ENOTFOUND',
  syscall: 'getaddrinfo',
  hostname: 'boilerplate-express.dragonosman.repl'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fcc-learn-node-with-express@0.1.0 start: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the fcc-learn-node-with-express@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2021-02-17T15_54_26_739Z-debug.log
exit status 1

Any help is appreciated. Thanks.

12

I did this for HOST:

const HOST = (req, res) => `${req.headers.host}`;

Then I ran the code again and tried to submit the code, but I got the same error:

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at /home/runner/boilerplate-express/node_modules/fcc-express-bground/index.js:91:26
    at IncomingMessage.<anonymous> (/home/runner/boilerplate-express/node_modules/fcc-express-bground/index.js:33:7)
    at IncomingMessage.emit (events.js:315:20)
    at IncomingMessage.Readable.read (_stream_readable.js:505:10)
    at flow (_stream_readable.js:1005:34)
    at resume_ (_stream_readable.js:986:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at /home/runner/boilerplate-express/node_modules/fcc-express-bground/index.js:99:28
    at IncomingMessage.<anonymous> (/home/runner/boilerplate-express/node_modules/fcc-express-bground/index.js:33:7)
    at IncomingMessage.emit (events.js:315:20)
    at IncomingMessage.Readable.read (_stream_readable.js:505:10)
    at flow (_stream_readable.js:1005:34)
    at resume_ (_stream_readable.js:986:3)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
_http_outgoing.js:518
    throw new ERR_HTTP_HEADERS_SENT('set');
    ^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:518:11)
    at ServerResponse.header (/home/runner/boilerplate-express/node_modules/express/lib/response.js:771:10)
    at ServerResponse.send (/home/runner/boilerplate-express/node_modules/express/lib/response.js:170:12)
    at ServerResponse.json (/home/runner/boilerplate-express/node_modules/express/lib/response.js:267:15)
    at /home/runner/boilerplate-express/node_modules/fcc-express-bground/index.js:108:15
    at IncomingMessage.<anonymous> (/home/runner/boilerplate-express/node_modules/fcc-express-bground/index.js:33:7)
    at IncomingMessage.emit (events.js:315:20)
    at IncomingMessage.Readable.read (_stream_readable.js:505:10)
    at flow (_stream_readable.js:1005:34)
    at resume_ (_stream_readable.js:986:3) {
  code: 'ERR_HTTP_HEADERS_SENT'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fcc-learn-node-with-express@0.1.0 start: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the fcc-learn-node-with-express@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/runner/.npm/_logs/2021-02-17T16_29_59_787Z-debug.log
exit status 1

Anyone have any ideas on how to fix this?

13

Is it interpreting HTML as JSON? That could be why it’s saying there’s a < in the JSON. And if this is the case, how can we fix that?

14

@Sky020 I’ll wait until they fix the bug in the challenges before trying to submit again, but I’d still like to at least get the solution working.

For some reason, my middleware function isn’t logging anything to the console. Here’s my current code:

const express = require("express");
const app = express();
const homePath = `${__dirname}/views/index.html`;
const assetsPath = `${__dirname}/public/`;
require("dotenv").config();

app.get("/", (req, res) => res.sendFile(homePath));

app.use("/public", express.static(assetsPath));
app.get("/json", (req, res) => {
  const message = "Hello json";
  const messageUpper = message.toUpperCase();
  if (req.protocol === "http") {
    return res.redirect(`https://${req.headers.host}${req.url}`);
  }
  console.dir(req.protocol);

  if (process.env.MESSAGE_STYLE === "uppercase") {
    res.json({"message": messageUpper});
  } else {
    res.json({"message": message});
  }
});

app.use((res, req, next) => {
  const str = `${req.method} ${req.path} - ${req.ip}`;
  console.log(str);
  return next();
});

Of course this includes code for the other challenges too. Any help is appreciated. Thanks.

15

Yes, this is correct. This is because your app uses JSON.parse in the testing library. Read more here: Use the .env File Challenge Issue · Issue #40915 · freeCodeCamp/freeCodeCamp · GitHub

This is expected behaviour, when the request fails. The workflow is:

  • Ask for a response from REPL server
    • If success, REPL responds with JSON
    • If failure, REPL responds with something else (in this case, a simple HTML page saying something about an error)

This has 2 implications:

  1. As devs, we should catch the error at JSON.parse, and send something to the frontend, explaining there is an error
  2. Servers handle this differently. Your typical REST API should send a JSON response which contains an error - REPL does not do this, so our code does not know how to handle it.

The issue is a change on REPLs side, as far as I can see. So, we cannot do anything about the response (REPL control this, not us). We can handle the error produced by our code, which is crashing the app.

The lesson explains this more.

Hope this clarifies

16

So you mean there’s something in the code on the FCC side that’s crashing the app? Or something in the user (like me) code?

I could just build locally and deploy to Vercel. Hopefully that’s fine.

As for the code. I moved the middleware stuff up to right below the requires and now it at least logs something. But it’s just “undefined undefined - undefined”.

Here’s what I have now:

const express = require("express");
const app = express();
const homePath = `${__dirname}/views/index.html`;
const assetsPath = `${__dirname}/public/`;
require("dotenv").config();

app.use("/public", express.static(assetsPath));

app.use("/", (res, req, next) => {
  req.method = "GET";
  const str = `${req.method} ${req.path} - ${req.ip}`;
  console.log(str);
  return next();
});

app.get("/", (req, res) => res.sendFile(homePath));

app.get("/json", (req, res) => {
  const message = "Hello json";
  const messageUpper = message.toUpperCase();
  if (req.protocol === "http") {
    return res.redirect(`https://${req.headers.host}${req.url}`);
  }
  console.dir(req.protocol);

  if (process.env.MESSAGE_STYLE === "uppercase") {
    res.json({"message": messageUpper});
  } else {
    res.json({"message": message});
  }
});

How do I fix this?

17

Yes. So, the fcc-bground-express package is used for testing. In REPL it is not obvious, because they hide the node_modules, but it is code on your side of the app. So, theoretically, you can change it.

But yes, the GitHub comment I linked above shows the code that is causing the crash, because it responds to an error, by throwing the error to the next middleware, as opposed to converting the error to a JSON response.

Why are you forcing the method?

I am not sure. This could be related to the original issue.

18

I wanted to try setting the method and path since they’re undefined right now. Is there no way to fix it so it’s not undefined?

I downloaded the code from Repl and opened it up in VS Code, but I don’t see fcc-bground-express in there. How do I get it? And is there code in there that I need to change?

19

As I mentioned, it is likely undefined, because of the related issue on these challenges.

It is included in the boilerplate via the package.json. So, locally, you can see it by running npm i which will install the packages, and they will appear in the node_modules folder.

I suggest you go from there, and do more research. All of the information for editing the package is linked in the above mentioned issue.

20

Locally, the method is GET without having to force it, but the path and IP are both still undefined. But on REPL, all three are undefined. This is weird.

Also, I opened up fcc-express-bground locally and looked at it, but I couldn’t find the stuff mentioned in that GitHub issue. I’m lost about that too.