├── .gitignore ├── README.md ├── build ├── bundle.js ├── bundle.js.LICENSE.txt └── index.html ├── function.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | client 4 | server 5 | .npmignore -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🔮 Tetrachrome 2 | 3 | Tetrachrome is an open source developer tool for developers to visualize and analyze the fullstack of their applications using React and Node.js / Express. 4 | 5 | ## 🔑 Features: 6 | * Parses through React Fiber Tree and generates the visualization of the tree using D3.js 7 | * Parses through Express object and creates a table of all the routes and the associated methods 8 | * Captures HTTP request activity and creates a table of associated methods, endpoints, statuses, content lengths, response times, and timestamps 9 | 10 | ## 🧰 Built with: 11 | * Javascript 12 | * Node.js / Express 13 | * React 14 | * D3.js 15 | * Webpack 16 | * Socket-io 17 | * Morgan 18 | 19 | ## 🛠 Installation 20 | 1. Assuming you've already installed Node.js and npm, install the Tetrachrome package by running the following command: 21 | ``` 22 | npm i tetrachrome 23 | ``` 24 | 2. The 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 the 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: 25 | ``` 26 | const { tetrachrome, routeStack } = require('tetrachrome'); 27 | app.use(tetrachrome); 28 | routeStack(app); 29 | ``` 30 | 3. Since the commands above serves the Tetrachrome application, if you are using webpack or any other module bundler, you will need to 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: 31 | ``` 32 | "proxy": { 33 | "/tetrachrome": { 34 | "target": "http://localhost:3000/", 35 | "secure": false 36 | }, 37 | } 38 | ``` 39 | 4. 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 application running below. 40 | * Frontend - display of your application components using our algorithm parsing through your React Fiber Tree 41 | * Backend - display of available paths and their methods 42 | * Logs - tabular display of all HTTP requests that are hitting your server 43 | 44 | Be sure to interact with your application on the left side of the page in order to see all your HTTP requests in real time! 45 | 46 | ## 🫰🏼 Team 47 | | Name | Social | 48 | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | 49 | | Judy Wu | [![LinkedIn]](https://www.linkedin.com/in/judywuxingyi/) [![GitHub]](https://github.com/judywuxingyi) | 50 | | Marco Xu | [![LinkedIn]](https://www.linkedin.com/in/marco-xu-lin/) [![GitHub]](https://github.com/marcoxulin) | 51 | | Risa Ochiai | [![LinkedIn]](https://www.linkedin.com/in/risaochiai/) [![GitHub]](https://github.com/risa-10) | 52 | | Terry Park | [![LinkedIn]](https://www.linkedin.com/in/terryparkjh/) [![GitHub]](https://github.com/tjpark95) | 53 | 54 | ## 📬 Contact 55 | [![LinkedIn]](https://www.linkedin.com/company/tetrachrome-open-source/) 56 | 57 | [LinkedIn]: https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white 58 | [GitHub]: https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white 59 | 60 | -------------------------------------------------------------------------------- /build/bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license React 3 | * react-dom.production.min.js 4 | * 5 | * Copyright (c) Facebook, Inc. and its affiliates. 6 | * 7 | * This source code is licensed under the MIT license found in the 8 | * LICENSE file in the root directory of this source tree. 9 | */ 10 | 11 | /** 12 | * @license React 13 | * react-is.production.min.js 14 | * 15 | * Copyright (c) Facebook, Inc. and its affiliates. 16 | * 17 | * This source code is licensed under the MIT license found in the 18 | * LICENSE file in the root directory of this source tree. 19 | */ 20 | 21 | /** 22 | * @license React 23 | * react-jsx-runtime.production.min.js 24 | * 25 | * Copyright (c) Facebook, Inc. and its affiliates. 26 | * 27 | * This source code is licensed under the MIT license found in the 28 | * LICENSE file in the root directory of this source tree. 29 | */ 30 | 31 | /** 32 | * @license React 33 | * react.production.min.js 34 | * 35 | * Copyright (c) Facebook, Inc. and its affiliates. 36 | * 37 | * This source code is licensed under the MIT license found in the 38 | * LICENSE file in the root directory of this source tree. 39 | */ 40 | 41 | /** 42 | * @license React 43 | * scheduler.production.min.js 44 | * 45 | * Copyright (c) Facebook, Inc. and its affiliates. 46 | * 47 | * This source code is licensed under the MIT license found in the 48 | * LICENSE file in the root directory of this source tree. 49 | */ 50 | 51 | /** 52 | * @remix-run/router v1.0.3 53 | * 54 | * Copyright (c) Remix Software Inc. 55 | * 56 | * This source code is licensed under the MIT license found in the 57 | * LICENSE.md file in the root directory of this source tree. 58 | * 59 | * @license MIT 60 | */ 61 | 62 | /** 63 | * React Router DOM v6.4.3 64 | * 65 | * Copyright (c) Remix Software Inc. 66 | * 67 | * This source code is licensed under the MIT license found in the 68 | * LICENSE.md file in the root directory of this source tree. 69 | * 70 | * @license MIT 71 | */ 72 | 73 | /** 74 | * React Router v6.4.3 75 | * 76 | * Copyright (c) Remix Software Inc. 77 | * 78 | * This source code is licensed under the MIT license found in the 79 | * LICENSE.md file in the root directory of this source tree. 80 | * 81 | * @license MIT 82 | */ 83 | 84 | /** @license MUI v5.11.0 85 | * 86 | * This source code is licensed under the MIT license found in the 87 | * LICENSE file in the root directory of this source tree. 88 | */ 89 | 90 | /** @license React v16.13.1 91 | * react-is.production.min.js 92 | * 93 | * Copyright (c) Facebook, Inc. and its affiliates. 94 | * 95 | * This source code is licensed under the MIT license found in the 96 | * LICENSE file in the root directory of this source tree. 97 | */ 98 | -------------------------------------------------------------------------------- /build/index.html: -------------------------------------------------------------------------------- 1 | Tetrachrome
-------------------------------------------------------------------------------- /function.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | const express = require("express"); 3 | const app = express(); 4 | const router = express.Router(); 5 | const morgan = require("morgan"); 6 | 7 | 8 | 9 | //we are going to save the route stack in this variable 10 | const routes = []; 11 | 12 | /** 13 | * Socket.io server 14 | */ 15 | const { Server } = require("socket.io"); 16 | //create a Socket.io server at port 3030 17 | const io = new Server(3030, { 18 | cors: { 19 | origin: "*", 20 | }, 21 | }); 22 | 23 | io.of('/log').on("connection", (socket) => { 24 | socket.emit("route stack", routes); 25 | 26 | }); 27 | 28 | router 29 | .use( 30 | morgan( 31 | function (tokens, req, res) { 32 | return JSON.stringify({ 33 | method: tokens.method(req, res), 34 | url: tokens.url(req, res), 35 | status: Number.parseFloat(tokens.status(req, res)), 36 | content_length: tokens.res(req, res, "content-length"), 37 | response_time: Number.parseFloat(tokens["response-time"](req, res)), 38 | date: tokens["date"](req, res), 39 | }); 40 | }, 41 | { 42 | stream: { 43 | write: (message) => io.of("/log").emit("log", message) 44 | }, 45 | } 46 | ) 47 | ) 48 | .use("/tetrachrome", express.static(path.resolve(__dirname, "./build"))); 49 | 50 | 51 | const routeStack = (app) => { 52 | setImmediate(() => { 53 | //this method will grab the user route stack and store it in the routes array 54 | app._router.stack.forEach(print.bind(null, [])); 55 | }) 56 | }; 57 | 58 | exports.routeStack = routeStack; 59 | module.exports.tetrachrome = router; 60 | 61 | function print(path, layer) { 62 | if (layer.route) { 63 | layer.route.stack.forEach( 64 | print.bind(null, path.concat(split(layer.route.path))) 65 | ); 66 | } else if (layer.name === "router" && layer.handle.stack) { 67 | layer.handle.stack.forEach( 68 | print.bind(null, path.concat(split(layer.regexp))) 69 | ); 70 | } else if (layer.method) { 71 | routes.push({ 72 | method: layer.method.toUpperCase(), 73 | path: "/" + path.concat(split(layer.regexp)).filter(Boolean).join("/"), 74 | }); 75 | } 76 | } 77 | 78 | function split(thing) { 79 | if (typeof thing === "string") { 80 | return thing.split("/"); 81 | } else if (thing.fast_slash) { 82 | return ""; 83 | } else { 84 | var match = thing 85 | .toString() 86 | .replace("\\/?", "") 87 | .replace("(?=\\/|$)", "$") 88 | .match(/^\/\^((?:\\[.*+?^${}()|[\]\\\/]|[^.*+?^${}()|[\]\\\/])*)\$\//); 89 | return match 90 | ? match[1].replace(/\\(.)/g, "$1").split("/") 91 | : ""; 92 | } 93 | } 94 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tetrachrome", 3 | "version": "1.0.8", 4 | "description": "", 5 | "main": "function.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "nodemon server/server.js & webpack-dev-server --open", 9 | "prod": "webpack --mode=production" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/oslabs-beta/tetrachrome.git" 14 | }, 15 | "author": "Judy Marco Risa Terry", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/oslabs-beta/tetrachrome/issues" 19 | }, 20 | "homepage": "https://github.com/oslabs-beta/tetrachrome#readme", 21 | "dependencies": { 22 | "@emotion/react": "^11.10.5", 23 | "@emotion/styled": "^11.10.5", 24 | "@mui/material": "^5.11.6", 25 | "@mui/x-data-grid": "^5.17.21", 26 | "cors": "^2.8.5", 27 | "css-loader": "^6.7.2", 28 | "express": "^4.18.2", 29 | "immer": "^9.0.19", 30 | "morgan": "^1.10.0", 31 | "postcss": "^8.4.19", 32 | "postcss-loader": "^7.0.1", 33 | "react": "^18.2.0", 34 | "react-d3-tree": "^3.4.2", 35 | "react-dom": "^18.2.0", 36 | "react-use-websocket": "^4.2.0", 37 | "sass": "^1.56.1", 38 | "sass-loader": "^13.2.0", 39 | "socket.io": "^4.5.4", 40 | "socket.io-client": "^4.5.4", 41 | "style-loader": "^3.3.1", 42 | "tailwindcss": "^3.2.4" 43 | }, 44 | "devDependencies": { 45 | "@babel/core": "^7.20.2", 46 | "@babel/preset-env": "^7.20.2", 47 | "@babel/preset-react": "^7.18.6", 48 | "babel-loader": "^9.1.0", 49 | "html-webpack-plugin": "^5.5.0", 50 | "nodemon": "^2.0.20", 51 | "react-router-dom": "^6.4.3", 52 | "webpack": "^5.75.0", 53 | "webpack-cli": "^4.10.0", 54 | "webpack-dev-server": "^4.11.1" 55 | } 56 | } 57 | --------------------------------------------------------------------------------