Part 0 Bonus: Logging, middlewares and migrating Image Manipulation functions into a Services file

Logging is another part of the project that is out of scope of the original requirements but since I wanted to make this project as professional as possible, I decided adding logging would be a great value add. The first thing I wanted to do was think about what I wanted to log. As a JavaScript Developer, I tend to only think about logging anything once somethings gone wrong and Im trying to track down what and logging in that context is just writing console.log to see what came up. While I did want to log errors, I wanted to mainly log a users request, the servers response and any significant events in the middle of fulfilling the request. This would potentially give me some insights into how users were using the application and potentially what problems were coming up from the users end. The reason why I split all the endpoints was for a better user experience and logging would be a great way of validating whether that was successful or not. The logging package I used was Winston, a pretty well-known logging package for JavaScript applications. A lot of the work currenting in the logging app came from watching this YouTube video, ending with me creating a middleware to do all the logging.

For those who dont know, middlewares are functions that have access to the request, response and next objects in Node. Controllers are middlewares but they generally interact with the request and response objects. You can also create other functions and instead of terminating on completion, it can call next() and move on to the next middleware. Each middleware is called in the order it is declared in your server file. Heres an example to explain further.

An example of my app.ts file with several middlewares being imported

In the above example, notDefined will be run first whenever the server gets a request and if notDefined has a next function, then the image controller middleware will run.

Things went pretty smoothly initially but then I tried logging the response from the server and realized that you didnt have something that directly captured the server response. After poking around for a bit, a common solution I came across was taking the response and chucking it into the response object which a middleware could grab later and use. The problem was TypeScript didnt make that a simple task so my initial idea was to write a CustomResponse interface that would extend Express Response interface but also allow me to add the object to grab for the logger. Seemed to work at first but when I added the interface to the logger and tried to use the middleware in the app, TypeScript would complain about it not expecting that type. So, I reached out to the internet again! Long story short, Joe Previte (@jsjoeio) educated me in res.locals. Was able to add the things I wanted from the response there and pull it out in the middleware so that I could log it! You can read through how we ultimately came up to the solution here.

Porting all the image manipulations into a services file was a significantly easier experience. It honestly was mostly copying and pasting the code into its own folder and then writing code so that functions were called properly. I think the funniest part of this process was I ran into a bit of a problem where something wasnt running correctly and I didnt understand why it was happening. By this time, logging had been implemented and logs were being written even while I was working on it. So at first, I tried to figure out where Id start dropping console.logs first, dreading the amount of time it would take to find the problem only to remember that I had logs. I poked in the logs and it told me what had caused the error and a debugging session which probably should have taken an hour or no more was a 20 minute experience.

This taught me the usefulness of logging.

Thats it for part 0 of the YouGo Back-End Project. In the next article of this series, Ill start to take on part 1 of the project: https://github.com/YouGoDevs/YouGo-Backend-Track/blob/main/Project-0.md#part-1-the-horizontals

Heres the branch with the completed application for part 0: https://github.com/chadstewart/you-go-backend-project/tree/part-0