{"componentChunkName":"component---src-templates-post-js","path":"/post/node-is-simple-part-5","result":{"data":{"contentfulHero":{"coverImage":{"file":{"url":"//images.ctfassets.net/xmu5vdhtphau/1jqMTE2RJBiMLIcZAnu6It/5495c6ec7df10a55768df442e73fe4b2/home-hero-min.jpg","fileName":"home-hero-min.jpg"}}}},"pageContext":{"post":{"id":"ab2a9ea8-cb4f-5970-be46-1359265a19f5","slug":"node-is-simple-part-5","title":"Node Is Simple — Part 5 ","createdAt":"Aug 24, 2020","tweetText":null,"type":"blog","video":null,"podcast":null,"categories":[{"id":"4384d042-dd09-5c7b-967b-95eab1334a2c","name":"Node.js","slug":"node-js"},{"id":"a397ebc3-492b-5568-b45d-6d4aa9722be7","name":"Tutorials","slug":"tutorials"}],"image":{"file":{"url":"//images.ctfassets.net/xmu5vdhtphau/3rLlrTNVqfNNCY7sOrQxnP/a20a0f5209e19a2f5f717ccb3122d3e0/part5.png","fileName":"part5.png"}},"author":{"name":"Nipuna Weerasekara","bio":{"childMarkdownRemark":{"html":"

Part time web developer, full time dreamer… Find me @ https://niweera.gq

"}},"avatar":{"file":{"fileName":"1_cuJOF_sqBLbMA69vCFMqEQ.jpeg","url":"//images.ctfassets.net/xmu5vdhtphau/4iEstuN4qOq6h1vKjwpPRW/413c90f5bfa0c51170b560407e31c7c6/1_cuJOF_sqBLbMA69vCFMqEQ.jpeg"}}},"bodyContent":{"childMarkdownRemark":{"html":"

tl;dr — This is the fifth article of the Node is Simple article series. In this article series, I will be discussing how to create a simple and secure NodeJS, Express, MongoDB web application.

\n

To follow the past tutorials:

\n\n

Hello, hello, my dear fellow developers, glad you could make it to my article where I discuss developing web applications with NodeJS. As I promised in the previous article, in this article I will tell you how to use custom middleware with Express.

\n

So what is this Middleware?

\n

That’s the question, isn’t it? As I told you many times, Express is great with middleware. As discussed in the Express documentation,

\n
\n

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

\n
\n

Express is nothing without middleware. So I am going to implement a simple error handling middleware. As the Express documentation describes,

\n
app.use(function (err, req, res, next) {  \n  console.error(err.stack)  \n  res.status(500).send('Something broke!')  \n})\n
\n

this is how we create a simple middleware to log errors. But in this tutorial, I will extend this middleware to return specific error messages and HTTP error codes in the response and log the error messages in the console.

\n

So let’s get to it, shall we?

\n

First, let’s create some error classes to represent errors that we are going to get from the web application.

\n

Let’s create /errors/index.js file.

\n
module.exports = {\n  AccessDeniedError: class AccessDeniedError {\n    constructor(message) {\n      this.message = message;\n    }\n  },\n  AuthenticationError: class AuthenticationError {\n    constructor(message) {\n      this.message = message;\n    }\n  },\n  ValidationError: class ValidationError {\n    constructor(message) {\n      this.message = message;\n    }\n  },\n  NotFoundError: class NotFoundError {\n    constructor(message) {\n      this.message = message;\n    }\n  }\n};\n
\n
/errors/index.js file (Contains error classes)
\n

Let’s see what’s happening here. Here, we are declaring four classes to describe errors we encounter in web applications.

\n
    \n
  1. Access Denied Error (HTTP 403)
    2. \n
  2. Authentication Error (HTTP 401)
    3. \n
  3. Not Found Error (HTTP 404)
    4. \n
  4. Validation Error (HTTP 400)
    5. \n
\n

Of course, there is another famous HTTP error which is called Internal Server Error (HTTP 500) but since it is a very generic error, we are not declaring a specific class to describe that and it will be the default error.

\n

Then let’s create the error handling middleware. Let’s create /middleware/error-handling.js file.

\n
const {\n  ValidationError,\n  AuthenticationError,\n  AccessDeniedError,\n  NotFoundError\n} = require(\"../errors\");\nconst chalk = require(\"chalk\");\n\nconst errorLogger = (err, req, res, next) => {\n  if (err.message) {\n    console.log(chalk.red(err.message));\n  }\n  if (err.stack) {\n    console.log(chalk.red(err.message));\n  }\n  next(err);\n};\n\nconst authenticationErrorHandler = (err, req, res, next) => {\n  if (err instanceof AuthenticationError)\n    return res.status(401).send({ message: err.message });\n  next(err);\n};\n\nconst validationErrorHandler = (err, req, res, next) => {\n  if (err instanceof ValidationError)\n    return res.status(400).send({ message: err.message });\n  next(err);\n};\n\nconst accessDeniedErrorHandler = (err, req, res, next) => {\n  if (err instanceof AccessDeniedError)\n    return res.status(403).send({ message: err.message });\n  next(err);\n};\n\nconst notFoundErrorHandler = (err, req, res, next) => {\n  if (err instanceof NotFoundError)\n    return res.status(404).send({ message: err.message });\n  next(err);\n};\n\nconst genericErrorHandler = (err, req, res, next) => {\n  res.status(500).send({ message: err.message });\n  next();\n};\n\nconst ErrorHandlingMiddleware = app => {\n  app.use([\n    errorLogger,\n    authenticationErrorHandler,\n    validationErrorHandler,\n    accessDeniedErrorHandler,\n    notFoundErrorHandler,\n    genericErrorHandler\n  ]);\n};\n\nmodule.exports = ErrorHandlingMiddleware;\n
\n
/middleware/error-handling.js file (Contains the error handling middleware configurations)
\n

\"1\"

\n
From https://knowyourmeme.com/memes/what-the-hell-happened-here
\n

Well, the code is somewhat complicated, isn’t it? Fear not, I will discuss what is happening here. First, we need to know how the Express middleware work. In Express middleware, if you provide error first callback, it will create the signature as an error-handling middleware.

\n
\n

Error-handling middleware always takes four arguments. You must provide four arguments to identify it as an error-handling middleware function. Even if you don’t need to use the next object, you must specify it to maintain the signature. Otherwise, the next object will be interpreted as regular middleware and will fail to handle errors.

\n
\n

(from https://expressjs.com/en/guide/using-middleware.html)

\n

And another thing to mention is that the middleware can be defined as arrays. The array order will be preserved and the middleware will be applied in that order. So according to our code,

\n
1. errorLogger //Logging errors  \n2. authenticationErrorHandler //return authentication error  \n3. validationErrorHandler //return validation error  \n4. accessDeniedErrorHandler //return access denied error  \n5. notFoundErrorHandler //return not found error  \n6. genericErrorHandler //return internal server error\n
\n

this middleware will be called in the particular order. In our web application, if there is an error thrown, first the error will be logged in the console and the error will be passed to the authenticationErrorHandler with the next(err) handler. If the error is an instance of AuthenticationError class, then it will end the request-response cycle by returning the relevant error. If not it will be passed on to the next error handling middleware. So as you can imagine it will be passed to down in the middleware stack and finally it will be passed to the genericErrorHandler middleware and the request-response cycle will be ended. And it is simple as that.

\n

Now let’s bind this middleware as an application-level middleware. Let’s update /index.js file.

\n
const express = require(\"express\");\nconst chalk = require(\"chalk\");\nconst http = require(\"http\");\nconst https = require(\"https\");\nconst config = require(\"./config\");\n\nconst HTTP_PORT = config.HTTP_PORT;\nconst HTTPS_PORT = config.HTTPS_PORT;\nconst SERVER_CERT = config.SERVER_CERT;\nconst SERVER_KEY = config.SERVER_KEY;\n\nconst app = express();\nconst Middleware = require(\"./middleware\");\nconst ErrorHandlingMiddleware = require(\"./middleware/error-handling\");\nconst MainController = require(\"./controllers\");\n\nMiddleware(app);\napp.use(\"\", MainController);\nErrorHandlingMiddleware(app);\napp.set(\"port\", HTTPS_PORT);\n\n/**\n * Create HTTPS Server\n */\n\nconst server = https.createServer(\n  {\n    key: SERVER_KEY,\n    cert: SERVER_CERT\n  },\n  app\n);\n\nconst onError = error => {\n  if (error.syscall !== \"listen\") {\n    throw error;\n  }\n\n  const bind =\n    typeof HTTPS_PORT === \"string\"\n      ? \"Pipe \" + HTTPS_PORT\n      : \"Port \" + HTTPS_PORT;\n\n  switch (error.code) {\n    case \"EACCES\":\n      console.error(chalk.red(`[-] ${bind} requires elevated privileges`));\n      process.exit(1);\n      break;\n    case \"EADDRINUSE\":\n      console.error(chalk.red(`[-] ${bind} is already in use`));\n      process.exit(1);\n      break;\n    default:\n      throw error;\n  }\n};\n\nconst onListening = () => {\n  const addr = server.address();\n  const bind = typeof addr === \"string\" ? `pipe ${addr}` : `port ${addr.port}`;\n  console.log(chalk.yellow(`[!] Listening on HTTPS ${bind}`));\n};\n\nserver.listen(HTTPS_PORT);\nserver.on(\"error\", onError);\nserver.on(\"listening\", onListening);\n\n/**\n * Create HTTP Server (HTTP requests will be 301 redirected to HTTPS)\n */\nhttp\n  .createServer((req, res) => {\n    res.writeHead(301, {\n      Location:\n        \"https://\" +\n        req.headers[\"host\"].replace(\n          HTTP_PORT.toString(),\n          HTTPS_PORT.toString()\n        ) +\n        req.url\n    });\n    res.end();\n  })\n  .listen(HTTP_PORT)\n  .on(\"error\", onError)\n  .on(\"listening\", () =>\n    console.log(chalk.yellow(`[!] Listening on HTTP port ${HTTP_PORT}`))\n  );\n\nmodule.exports = app;\n
\n
/index.js file (Updated to reflect the binding of error handling middleware)
\n

Now I have something to clarify. As you can see line 19, I have added the ErrorHandlingMiddleware(app) there. You might wonder is there a specific reason behind that. Actually there is.

\n
Middleware(app);  \napp.use(\"\", MainController);  \nErrorHandlingMiddleware(app);  \napp.set(\"port\", HTTPS\\_PORT);\n
\n

As you can remember, the Express treats the middleware in their order we are binding it with the app. So if we bind the error handling middleware before binding the Express router, the Express app would not know where are the errors are being thrown. So we first bind the Express router and then we bind the error handling middleware.

\n

Now if you start the web application as usual,

\n
$ pm2 start \n
\n

and do some CRUD, operation, you won’t see any errors return since we haven’t added any error handling in our /services/index.js file. So I will show you an example of an error by explicitly throwing an error.

\n

Let’s add this error endpoint. Every time you hit it, it will throw you a not found error. Let’s update /controllers/index.js file.

\n

GET /error

\n
_const_ { NotFoundError } = require(\"../errors\");_/\\*\\*_ **_@route_** _GET /error  \n \\*_ **_@desc_** _Return an example error  \n \\*_ **_@access_** _Public  \n \\*/  \n_router.get(  \n  \"/error\",  \n  asyncWrapper(_async_ () => {  \n    _throw new_ NotFoundError(\"Sorry content not found\");  \n  })  \n);\n
\n

\"2\"

\n
Figure 1: Request and response of custom error endpoint
\n

As you can see in figure 1, the response status is 404 and the message says “Sorry content not found”. So it works as it should.

\n

Now let’s see how our console looks. Now type,

\n
$ pm2 logs\n
\n

in your terminal and see the console log.

\n

\"3\"

\n
Figure 2: console log
\n

Bonus super-secret round

\n

So I’m going to tell you a super-secret about how to view colored logs in PM2. You just have to add a single line to the /ecosystem.config.js file.

\n
const fs = require(\"fs\");\n\nconst SERVER_CERT = fs.readFileSync(__dirname + \"/config/server.cert\", \"utf8\");\nconst SERVER_KEY = fs.readFileSync(__dirname + \"/config/server.key\", \"utf8\");\n\nmodule.exports = {\n  apps: [\n    {\n      name: \"node-is-simple\",\n      script: \"./index.js\",\n      watch: true,\n      args: [\"--color\"],\n      env: {\n        NODE_ENV: \"development\",\n        SERVER_CERT,\n        SERVER_KEY,\n        HTTP_PORT: 8080,\n        HTTPS_PORT: 8081,\n        MONGO_URI: \"mongodb://localhost/students\"\n      }\n    }\n  ]\n};\n
\n
ecosystem.config.js file (Reflects the update to view colored console output)
\n

ecosystem.config.js file (Reflects the update to view colored console output)

\n

All you have to do is add line 12. args: [\"--color\"],

\n

Bonus Bonus round

\n

Now I’m going to tell you about two additional Express middleware libraries which are going to save your life 🤣.

\n
    \n
  1. Morgan (HTTP request logger middleware for node.js)
    2. \n
  2. CORS (CORS is a node.js package for providing a Connect/Express middleware that can be used to enable CORS with various options.)
    3. \n
\n

I guarantee that these two libraries will save you from certain pitfalls and you’ll thank them pretty much all the time.

\n

This is a good article on Morgan.

\n

Getting Started With morgan: the Node.js Logger Middleware

\n

This is a good article on CORS.

\n

Using CORS in Express

\n

So let’s update our /middleware/common.js file.

\n
const bodyParser = require(\"body-parser\");\nconst helmet = require(\"helmet\");\nconst morgan = require(\"morgan\");\nconst cors = require(\"cors\");\n\nmodule.exports = app => {\n  app.use(bodyParser.json());\n  app.use(morgan(\"dev\"));\n  app.use(cors());\n  app.use(helmet());\n};\n
\n
/middleware/common.js file (Updated to reflect the new middleware CORS and Morgan)
\n

Then let’s install these two packages.

\n
$ npm install cors morgan\n
\n

Let’s see how the Morgan would show the HTTP requests in our console. We have specified “dev” as the logging level for Morgan. You can find more details on that from the documentation.

\n

\"4\"

\n
Figure 3: Morgan request logging in the console
\n
GET / 200 3.710 ms - 39\n
\n

Let’s understand what this means.

\n
:method :url :status :response-time ms - :res\\[content-length\\]\n
\n

This is what the documentation says. Let’s break it down.

\n
:method = GET (The HTTP method of the request.):url = / (The URL of the request. This will use req.originalUrl if exists, otherwise req.url.):status = 200 (The status code of the response.):response-time = 3.710 (The time between the request coming into morgan and when the response headers are written, in milliseconds.):res\\[content-length\\] = 39 (content-length of the response. If the content-length is not present, the value will be displayed as \"-\" in the log.)\n
\n

This is it. Now if we move on to what the CORS module does, it ain’t much but it’s honest work 😁. It will save you from Cross-Origin Resource Sharing issues. If you have worked with APIs and front-ends, the CORS error is something you’ve seen at least once in your lifetime.

\n

\"5\"

\n
From https://fdezromero.com/cors-errors-in-ionic-apps/
\n

So CORS module will allow you to add CORS header with ease. I know this article was a little bit longer because I had to share some super-secrets with you. So this is it for this article and I will tell you how to secure our endpoints with JWT authentication in the next article. As usual, you can find the updated code in the GitHub repository. (Look for the commit message “Tutorial 5 checkpoint”.)

\n

Niweera/node-is-simple

\n

So until we meet again, happy coding.

"}}}}}}