Introducing Tetrachrome 🔮

a full-stack visualization and analysis tool for your React + Node.js / Express application

4 min readFeb 10, 2023

Co-authored by: Risa Ochiai, Terry Park, Marco Xu

💡 Why we built Tetrachrome

We often see developer tools that visualize the frontend, but there is a lack of tools that visualize the backend or the full stack, from frontend to backend and what is happening in between. As experienced devs, we believe that maintaining a holistic perspective is the key to a solid foundation and also proves immensely helpful for devs learning a new ecosystem or codebase. We decided to build Tetrachrome using React — the most popular frontend framework — and Node.js / Express — the most popular runtime environment along with the framework most commonly used with Node.js. Preview our tool below and continue reading to learn how to use Tetrachrome!

React was created by developers at Facebook in 2013 before it was released to the open source community in 2015. React employs a top-down unidirectional flow of data and enables modularity with its component-based architecture. How? By way of a virtual DOM and React Fiber. React’s virtual DOM enables the framework to re-render only those components that require a refresh using the React Fiber, which was introduced in React v16.0. The React Fiber is an object comprising a singly linked list of nodes, which are interwoven as sibling and parent-child relationships — Tetrachrome wraps the user application and maps out these component relationships.

Often going hand in hand with React on the frontend, Node.js and / or Express.js is implemented on the backend for a myriad of reasons. Node.js is a non-blocking, event-driven server-side runtime environment built on Chrome’s JavaScript V8 engine. Express is a lightweight Node.js web framework that employs a middleware design pattern, which allows for scalability of applications, and it is supported widely across the open source community, which allows for a wide range of compatibility with other technologies. Tetrachrome extracts all routes and network logs via Express and outputs this in a parsed, tabular format, which is transferred via a WebSocket library.

🔑 Our vision and key features

Our vision for Tetrachrome is to be the go-to open source product for developers when learning a new application, whether it’s onboarding onto a new role or learning another application just because! We’ve created this open source product with React, Node.js, Express as a mere starting point, and we’re excited by the prospect of our open source product expanding to more frontend / backend frameworks and languages.

Key features of our application include:

parsing through the user application’s React Fiber Tree and generating a visualization of a component tree, including parent-child and sibling relationships, using D3.js
parsing through the user application’s Express object and creating a table of all routes and the associated methods
capturing HTTP requests from client interaction with the user application and creating a table of methods, endpoints, statuses, content lengths, respond times, and timestamps

🛠 Getting started

Assuming you’ve already installed Node.js and NPM, install the Tetrachrome package by running the following command in your terminal:

npm i tetrachrome

Our application exports a router object named tetrachrome and a function named routeStack. The tetrachrome router object contains an isolated instance of customized Morgan (GitHub, NPM) middleware and creates a route (/tetrachrome) where our application is served. The routeStack function contains logic that parses through Express to determine which endpoints are available in the user's application.

Add Tetrachrome into the backend (often your server.js file) of your application:

const { tetrachrome, routeStack } = require('tetrachrome');

app.use(tetrachrome);
routeStack(app);

Since the commands above serves the Tetrachrome application, if you are using webpack or any other module bundler, add this server side route (/tetrachrome) to your proxy configuration (typically, your webpack.js file) in order to access the Tetrachrome application on the client side as shown below:

"proxy": {
  "/tetrachrome": {
    "target": "http://localhost:3000/",
    "secure": false,
  },
}

Run your application and navigate to the route /tetrachrome in your browser. You will see the Tetrachrome navigation bar at the top of the page and your user application running below.

Frontend — display of your user application components using our algorithm parsing through your React Fiber Tree
Backend — display of available paths and the associated methods
Logs — tabular display of all HTTP requests that are hitting your user server

Be sure to interact with your user application on the left side of the Tetrachrome application in order to see all your HTTP requests in real time!

🫱🏼‍🫲🏾 How you can contribute

Thank you for reading! We’re open to feedback on our product and we’d be more than happy if you’d like to fork our repository and submit a pull request with any potential contributions, or reach out to the team.

Star us on GitHub: github.com/oslabs-beta/tetrachrome

Download our tool on NPM: npmjs.com/package/tetrachrome

🫰🏼 Tetrachrome is brought to you by: