Introducing Middle-Aware: A Call Stack Visualizer for Express Developers
We are delighted to introduce the launch of Middle-Aware, a call stack visualizer for Express developers. Middle-Aware is an Electron application which utilizes React, Typescript, Node.js, Express, and MongoDB. Middle-Aware is built in partnership with OSLabs, a nonprofit tech accelerator dedicated to the facilitation of impactful open source products.
What is Middleware?
Generally, middleware is a layer of software positioned between multiple applications, allowing the applications to communicate with each other. For purposes of Express, middleware are functions added to the request/response processing pipeline which can modify the request and response objects, invoke additional middleware functions, or end the request/response cycle by sending a response to the client. Middleware functions serve a variety of purposes, such as processing incoming requests, authenticating users by verifying permissions, and handling errors. Middleware allows a developer to separate concerns by modularizing backend functionality into fragments which handle specific tasks.
The Problem
Because of the variety of purposes middleware functions serve, and because of the regard for the separation of concerns, data and performance issues can be difficult to trace as requests are sent from the frontend of an application to the routes and middleware on the backend. These issues can create a frustrating experience for developers, especially for those unfamiliar with the codebase, as they shift from file to file to track data flow and edit functionality where necessary.
The Solution
We created an application dedicated to resolving the issues Express developers experience tracking data and performance. By displaying the path of data through each middleware function in one location, developers can visualize the data’s status through each step of the process, diagnose bottlenecks in the request/response cycle, and identify and remedy errors with ease.
Getting Started
To begin using Middle-Aware, you can download the application here. From there, just follow the instructions in our README file and you are ready to start. Make sure to create the JSON configuration file, which requires properties like the path to the subject project’s root directory, the port to run the project’s frontend and backend, and the project’s start script, before you can utilize Middle-Aware.
Middle-Aware Architecture and Under the Hood
Under the hood, Middle-Aware implements a visitor pattern in a custom Babel plugin to facilitate an instrumentation pipeline that efficiently traverses and transforms the user’s source code. Middle-Aware injects instrumentation logic into middleware functions to enable seamless call stack tracing.
As the above diagram highlights, Middle-Aware sits between the subject project’s running frontend and backend. The user interacts with the subject project as normal, and as requests are sent from the frontend, Middle-Aware’s proxy server intercepts the request and saves the request body, method, and parameters, among other things, to the user’s remote or local MongoDB database. Middle-Aware then updates the saved request with information collected on the backend and data returned via the response, including the response body and status code, as the backend replies to the frontend.
The entry point of Middle-Aware is the Electron main process, which is responsible for creating and managing the Middle-Aware main window, the communication between the application and the user’s operating system, and executing Middle-Aware’s backend. Middle-Aware’s backend utilizes Node.js, which the application uses to connect to the developer’s database and to run the proxy server.
Middle-Aware also contains a renderer process which renders the user interface and handles the developer’s interaction with the application. The renderer uses inter-process communication channels to communicate with the main process. Middle-Aware’s frontend employs the React JavaScript library and Tailwind CSS for the application’s graphical user interface.
The Middle-Aware Process
Once the developer installs Middle-Aware, the application will open a window and prompt the developer to load a configuration file before beginning. Configuration requirements include the subject project’s root directory, a target directory for Middle-Aware to create a clone (“shadow copy”) of the subject project, and the ports to run the subject project and the Middle-Aware proxy server.
After configuring the application, the developer pushes the start button, which begins Middle-Aware’s instrumentation pipeline. Once the instrumentation process begins, Middle-Aware ingests the user’s code and creates the shadow copy. Middle-Aware seeks out relevant files, such as JavaScript files, that may need to be transformed and parses the code into an abstract syntax tree to inject the instrumentation logic. Middle-Aware’s custom Babel plugin visits each middleware function, injects the logic, and the code is reverted back to JavaScript and the shadow copy files are overwritten with the injected code. Middle-Aware executes the shadow copy in a node child process, allowing the user to test their project and allow Middle-Aware to capture instrumentation data.
After starting the instrumentation process, the user proceeds to the frontend of the subject project to exercise functions in the project which trigger requests from the frontend to the backend. In Middle-Aware, the user clicks the “Fetch Tests” button to retrieve data associated with the user’s previous request. The user can then make changes to their source code as needed and, upon making any changes, click the start button to start the process again.
Next Steps
The team is proud to bring Middle-Aware to developers everywhere. We hope the ease of testing endpoints, viewing data as it flows through the middleware chain, will be useful to others as they work on their projects. Middle-Aware is open source and the team is still actively improving and maintaining the project, with assistance from OSLabs. If you have any questions or feedback, or you would like to contribute to the project, feel free to contact us on GitHub or LinkedIn below.
Meet the Team
Middle-Aware | GitHub | LinkedIn
Jason Breen | GitHub | LinkedIn
Zhiyi Huang | GitHub | LinkedIn