4 |
5 | # aether
6 |
7 | aether is a memory leak management tool for visualizing and tracking memory usage in real-time.
8 |
9 | The best way to evaluate your memory footprint is to look at heap usage. There's a distinct lack of tools for debugging and profiling memory usage in Node.JS/Javascript applications, so there's still a need for a tool to synthesize data with live updates in a chart format.
10 |
11 | After installing the `aether_memory` npm package to your server, you can observe memory usage and notice if you have a memory leak in your application, by just looking at the graph report. Once you've identified a leak, you can look at the two bubble charts to see self and retained size of nodes.
12 |
13 | ## Features
14 |
15 |
16 |
17 |
18 |
19 | - Presenting total memory usage over time in a chart format with live updates every 5 seconds, so you can analyze the overall health of your application's memory.
20 |
21 |
22 |
23 |
24 |
25 | - Visualizing the self size and retained size of arrays, strings, functions, and objects in your memory heap as a bubble chart to quickly see what is allocated the largest amount of memory.
26 | ---
27 | ## How it works
28 |
29 | `aether_memory` uses `node-heapdump` to take snapshots of the heap with 5 seconds intervals. The V8 Engine triggers garbage collection before each snapshot. The physical file is created in 'snapshot' folder and parsed through. Afterwards, the data is analyzed, displayed, and the file gets deleted before the next snapshot is taken, minimizing its own memory footprint and avoiding false results.
30 |
31 | ---
32 | ## Installation
33 |
34 | - Install directly in your application:
35 |
36 | ```
37 | npm install aether_memory
38 |
39 | ```
40 | ---
41 | ## Usage
42 |
43 | - Add this script to your package.json specifying how to start your server:
44 | ```
45 | "aether": "node node_modules/aether_memory/server/server.js & ",
46 | ```
47 | ```
48 | FOR EXAMPLE:
49 |
50 | "aether": "node node_modules/aether_memory/server/server.js & node server/server.js",
51 | ```
52 | - In your server file require and invoke aether by adding these 2 lines:
53 | ```
54 | const aether = require('aether_memory');
55 | aether.start();
56 | ```
57 | - In your terminal run:
58 | ```
59 | npm run aether
60 | ```
61 | - Your charts will be displayed on [localhost:9000](http://localhost:9000/)
62 |
63 | ---
64 | ## Technologies
65 |
66 | * [node-heapdump](https://github.com/bnoordhuis/node-heapdump)
67 | * [React](https://github.com/facebook/react)
68 | * [Express](https://github.com/expressjs/express)
69 | * [socket.io](https://github.com/socketio/socket.io)
70 | * [React-Router](https://github.com/ReactTraining/react-router)
71 | * [react-bubble-chart-d3](https://github.com/weknowinc/react-bubble-chart-d3)
72 | * [chartjs](https://github.com/chartjs)
73 | * [Webpack](https://github.com/webpack/webpack)
74 | ---
75 | ## Contributing and Issues
76 |
77 | We are always looking to improve. For major changes, please open an issue first to discuss what you would like to change, pull requests are welcome.
78 |
79 | Currently on our to-do list:
80 | - Updates to the retained-size algorithm to account for multiple nodes being attached to a single node
81 | - Fix a bug where React Router does not deep-link to a chart
82 | - Expand data on hover for each displayed node in bubble charts
83 |
84 | ---
85 | ## Authors
86 |
87 | - **Anna Konstantinovich** - [@anreko](https://github.com/anreko)
88 | - **Denis Belioglo** - [@DenisB27](https://github.com/DenisB27)
89 | - **Sejan Miah** - [@sejdemi](https://github.com/sejdemi)
90 | - **Vessy Shestorkina** - [@Ve33y](https://github.com/Ve33y)
91 | ---
92 |
93 | ## License
94 | This project is licensed under the [MIT](https://choosealicense.com/licenses/mit/)
95 |
--------------------------------------------------------------------------------
/aether/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | # aether
6 |
7 | aether is a memory leak management tool for visualizing and tracking memory usage in real-time.
8 |
9 | The best way to evaluate your memory footprint is to look at heap usage. There's a distinct lack of tools for debugging and profiling memory usage in Node.JS/Javascript applications, so there's still a need for a tool to synthesize data with live updates in a chart format.
10 |
11 | After installing the `aether_memory` npm package to your server, you can observe memory usage and notice if you have a memory leak in your application, by just looking at the graph report. Once you've identified a leak, you can look at the two bubble charts to see self and retained size of nodes.
12 |
13 | ## Features
14 |
15 |
16 |
17 |
18 |
19 | - Presenting total memory usage over time in a chart format with live updates every 5 seconds, so you can analyze the overall health of your application's memory.
20 |
21 |
22 |
23 |
24 |
25 | - Visualizing the self size and retained size of arrays, strings, functions, and objects in your memory heap as a bubble chart to quickly see what is allocated the largest amount of memory.
26 | ---
27 | ## How it works
28 |
29 | `aether_memory` uses `node-heapdump` to take snapshots of the heap with 5 seconds intervals. The V8 Engine triggers garbagage collection before each snapshot. The physical file is created in 'snapshot' folder and parsed through. Afterwards, the data is analyzed, displayed, and the file gets deleted before the next snapshot is taken, minimizing its own memory footprint and avoiding false results.
30 |
31 | ---
32 | ## Installation
33 |
34 | - Install directly in your application:
35 |
36 | ```
37 | npm install aether_memory
38 |
39 | ```
40 | ---
41 | ## Usage
42 |
43 | - Add this script to your package.json specifying how to start your server:
44 | ```
45 | "aether": "node node_modules/aether_memory/server/server.js & ",
46 | ```
47 | ```
48 | FOR EXAMPLE:
49 |
50 | "aether": "node node_modules/aether_memory/server/server.js & node server/server.js",
51 | ```
52 | - In your server file require and invoke aether by adding these 2 lines:
53 | ```
54 | const aether = require('aether_memory');
55 | aether.start();
56 | ```
57 | - In your terminal run:
58 | ```
59 | npm run aether
60 | ```
61 | - Your charts will be displayed on [localhost:9000](http://localhost:9000/)
62 |
63 | ---
64 | ## Technologies
65 |
66 | * [node-heapdump](https://github.com/bnoordhuis/node-heapdump)
67 | * [React](https://github.com/facebook/react)
68 | * [Express](https://github.com/expressjs/express)
69 | * [socket.io](https://github.com/socketio/socket.io)
70 | * [React-Router](https://github.com/ReactTraining/react-router)
71 | * [react-bubble-chart-d3](https://github.com/weknowinc/react-bubble-chart-d3)
72 | * [chartjs](https://github.com/chartjs)
73 | * [Webpack](https://github.com/webpack/webpack)
74 | ---
75 | ## Contributing and Issues
76 |
77 | We are always looking to improve. For major changes, please open an issue first to discuss what you would like to change, pull requests are welcome.
78 |
79 | Currently on our to-do list:
80 | - Updates to the retained-size algorithm to account for multiple nodes being attached to a single node
81 | - Fix a bug where React Router does not deep-link to a chart
82 | - Expand data on hover for each displayed node in bubble charts
83 |
84 | ---
85 | ## Authors
86 |
87 | - **Anna Konstantinovich** - [@anreko](https://github.com/anreko)
88 | - **Denis Belioglo** - [@DenisB27](https://github.com/DenisB27)
89 | - **Sejan Miah** - [@sejdemi](https://github.com/sejdemi)
90 | - **Vessy Shestorkina** - [@Ve33y](https://github.com/Ve33y)
91 | ---
92 |
93 | ## License
94 | This project is licensed under the [MIT](https://choosealicense.com/licenses/mit/)
--------------------------------------------------------------------------------
/aether/aether-cli.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | require('./server/server.js')
4 |
--------------------------------------------------------------------------------
/aether/assets/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/aether/02fdc6ce7d44e233d14c2dd9051225b9cfb38e69/aether/assets/.DS_Store
--------------------------------------------------------------------------------
/aether/assets/AetherLogo01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/aether/02fdc6ce7d44e233d14c2dd9051225b9cfb38e69/aether/assets/AetherLogo01.png
--------------------------------------------------------------------------------
/aether/assets/BubbleChartExample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/aether/02fdc6ce7d44e233d14c2dd9051225b9cfb38e69/aether/assets/BubbleChartExample.png
--------------------------------------------------------------------------------
/aether/assets/ChartExample.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oslabs-beta/aether/02fdc6ce7d44e233d14c2dd9051225b9cfb38e69/aether/assets/ChartExample.png
--------------------------------------------------------------------------------
/aether/client/components/App.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { BrowserRouter, Route, Switch, Link, Redirect} from 'react-router-dom';
3 | import Header from './header.jsx';
4 | import LineChart from './linechart.jsx';
5 | import BubbleChartBlock from './bubblechart.jsx';
6 |
7 | /* The constant variables create state. The first variable stores data for the bubbleChart and setBubbleData,
8 | updates state for bubbleData. The same state management logic applies to totalData and retainedSizeData.
9 | useState is pulled in from React to know that it's a piece of state.
10 | */
11 |
12 | function App() {
13 | const [bubbleData, setBubbleData] = useState();
14 | const [totalData, setTotalData] = useState([]);
15 | const [retainedSizeData, setRetainedSizeData] = useState();
16 |
17 | /* Makes a call to the getData endpoint. When we are creating the new total data array, we are destructuring our old totalData array,
18 | the reason we do it in this manner is that we can't directly manipulate state, we are just adding onto state.
19 | */
20 |
21 | function getData() {
22 | fetch('/getdata')
23 | .then((res) => res.json())
24 | .then((res) => {
25 | setBubbleData(res.bubbles);
26 | setTotalData([...totalData, res.total]);
27 | setRetainedSizeData(res.retainedSize)
28 | });
29 | }
30 |
31 | /* useEffect is the React Hook's replacement for component lifecycle aka componentDidMount. This takes in two argument, one is an anonymous function. It creates a variable called heapLoop, that triggers getData to run every 5 seconds. Upon that completing we are clearing the interval, this is the equivalent of setTimeOut. useEffect takes in a second parameter, called totalData, and it will only run when totalData changes. This could have been any one of our getData state management functions.
32 | */
33 |
34 | useEffect(() => {
35 | const heapLoop = setInterval(() => { getData(); }, 5000);
36 | return function cleanup() {
37 | clearInterval(heapLoop);
38 | };
39 | }, [totalData]);
40 |
41 | /* When using React-Router clicking on any specific endpoint, will link to inner state pages. Mainly relatred to page state management. We pass through data through props.
42 | TODOS -- fix endpoints.
43 | */
44 |
45 | return (
46 |
47 |
48 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 | );
61 | }
62 |
63 | export default App;
64 |
--------------------------------------------------------------------------------
/aether/client/components/bubblechart.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BubbleChart from '@weknow/react-bubble-chart-d3';
3 |
4 | //This child component accesses it's data via heapData on props, which contains it's bubbleData.
5 |
6 | function BubbleChartBlock(props) {
7 | return (
8 |
37 | );
38 | }
39 | export default BubbleChartBlock;
40 |
--------------------------------------------------------------------------------
/aether/client/components/dropdown.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | //! Not currently in use
3 |
4 | function DropDown() {
5 | return (
6 |
11 | )
12 | }
13 | export default Header;
--------------------------------------------------------------------------------
/aether/client/components/linechart.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react';
2 | import { Line } from 'react-chartjs-2';
3 |
4 | function LineChart(props) {
5 |
6 | /* The Chart.js library uses two things -- the timeLabel, defaulting to 0 and 5000 milliseconds.
7 | This is how the chart builts out it's first time render. The date label is dynamically set and reflects the current time the user is accessing the app.
8 | */
9 |
10 | const [timeLabel, setTimeLabel] = useState([0, 5000])
11 | const [dateLabel, setDateLabel] = useState()
12 |
13 | /* Captures the current time and set's the data label to currentData, takes in two parameters like before, an anonymous function and an empty array, which is a non-semantic way of stating that only render the component once. Otherwise it will keep making an attempt to keep changing state. */
14 |
15 | useEffect(() => {
16 | let currentDate = String(new Date(Date.now()))
17 | currentDate = currentDate.slice(4, 25)
18 | console.log("THE CURRENT DATA IS", currentDate)
19 | setDateLabel(currentDate)
20 | }, [])
21 |
22 | /* The second useEffect updates the label's time to add 5 more seconds to reflect the new data coming in.
23 | We grab the last time in our array. We call setTimeLabel, we passed back in all previous labels, containing our time and then we added one more, which is 5 seconds greater than the last one. We gave it a second parameter, where it updates itself anytime props.heapData is updated.
24 | */
25 |
26 | useEffect(() => {
27 | const lastTime = timeLabel[timeLabel.length - 1]
28 | const allLabels = timeLabel
29 | setTimeLabel([...allLabels, lastTime + 5000])
30 | }, [props.heapData])
31 |
32 | /*
33 | TODO DropDowns is not currently functional, slated for future release. */
34 |
35 | return (
36 |
3 | 
17 | 
23 | 
3 | 
17 | 
23 | 
9 |