Setting Up a Custom Web Page for monitoring using New Relic API and Chart.js
Introduction
New Relic is a cloud solution that monitors and optimizes the performance of software. It provides ways for developers and DevOps teams to monitor the performance and health of applications and infrastructure, giving insights on how these affect the user’s experience. New Relic is broadly used in solving bottlenecks of performance as well as diagnosing problems to ensure application reliability.
Some of the best features in New Relic include:
- Application Performance Monitoring (APM): Tracks performance, such as response times, throughput, error rates, and transaction traces.
- Infrastructure Monitoring: It tracks the health and performance of infrastructure such as servers, containers, and cloud services.
- Synthetic Monitoring: It simulates user interactions to determine if the application is performing globally from various locations.
- Logs Monitoring: This collects and analyzes logs in real-time for troubleshooting or analysis.
In this blog, we’re going to build a custom page with HTML fetching AWS EC2 metrics from the New Relic Dashboard via New Relic API. We’ll use Node.js for backend metrics and Chart.js will create the chart (graphs) on the Web Page.
Functional Requirement
- Encapsulation: the organizations or customers can control the metrics shown on their dashboards. Should they want to exclude the New Relic services, they can make use of a custom dashboard that may be customized according to their requirements. In this case, sensitive information will remain confidential while still offering significant insights.
- Centralized Monitoring: Centralized monitoring via a custom dashboard enables users to demonstrate metrics directly on their own site or application. The dashboard makes thresholds, date ranges, and other parameters easy to tweak. This streamlined process improves efficiency and ensures that monitoring is now suited to the needs of the organization
- Data Visualization Customization: Different stakeholders may prefer different ways to visualize data. A custom dashboard allows users to select from various chart types, colors, and layouts to present the data in a way that suits their preferences., Therefore facilitating better interpreting and analyzing the data; trends, anomalies, and identifying patterns easily.
- User-Friendly Interface: Non-technical users will find direct interactions with New Relic daunting. Through a custom dashboard, metrics can be delivered in a more intuitive, consumable format by hiding complexity.
It can make metrics accessible to all team members and allow them to understand without requiring deep technical knowledge.
Prerequisites
- Node.js and npm are installed on your machine.
- A New Relic account with infrastructure monitoring enabled for AWS EC2.
- AWS EC2 instance metrics configured on New Relic.
- Chart.js for front-end chart rendering.
Configuring the Backend with Node.js
As a server-side JavaScript environment, Node.js will be used to fetch AWS EC2 metrics from the New Relic API and serve it to the front-end, an HTML page.
1. Install Node.js
If you haven’t already, download and install Node.js from the official website
2. Start a new Node.js project
Create a new folder for your project. Inside the folder, execute the command from the following step to set up a new Node.js project:
npm init -y
3. Install Dependencies
You will need to install Express.js for the web server and CORS. (you can also use the CORS extension in Google Chrome to avoid installing CORS)
npm install express npm install cors
4. Building Backend Server (server.js)
To implement, create a new file called server.js in the project directory where you will handle all requests coming through APIs, fetching metrics from New Relic, and then serving them to the HTML page.
An example of how the backend may look like (modify it according to your requirement):
const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 3000;
const apiKey = 'YOUR_NEW_RELIC_API_KEY'; // Replace with your New Relic Insights Query Key
const accountId = 'YOUR_ACCOUNT_ID'; // Use the account ID from the screenshot
const query = `
SELECT
average(cpuPercent) as 'CPU Usage',
average(memoryUsedBytes/memoryTotalBytes)*100 as 'Memory Usage',
average(diskUsedBytes/diskTotalBytes)*100 as 'Storage Usage',
rate(sum(receiveBytesPerSecond), 1 minute) as 'Receive Bytes Per Second',
rate(sum(transmitBytesPerSecond), 1 minute) as 'Transmit Bytes Per Second',
average(loadAverageOneMinute) as 'Load Average 1m',
average(loadAverageFiveMinute) as 'Load Average 5m',
average(loadAverageFifteenMinute) as 'Load Average 15m'
FROM SystemSample, NetworkSample
SINCE 30 minutes ago
TIMESERIES
`; // Query to get various metrics in the past 30 minutes
// Use CORS middleware
app.use(cors());
app.get('/newrelic', async (req, res) => {
try {
const fetch = await import('node-fetch');
const response = await fetch.default(`https://insights-api.eu.newrelic.com/v1/accounts/${accountId}/query?nrql=${encodeURIComponent(query)}`, {
headers: {
'X-Query-Key': apiKey
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
res.json(data);
} catch (error) {
res.status(500).send(`Error fetching data: ${error.message}`);
}
});
app.listen(PORT, () => {
console.log(`Server running on port ${PORT}`);
});
In the above code, replace YOUR_NEW_RELIC_API_KEY and YOUR_ACCOUNT_ID with your actual New Relic API key and account ID.
Make Sure the API key is of type USER.
New Relic API Key Dashboard
Create Front-End HTML Page to Show Charts
We will create a custom HTML page that uses Chart.js to visualize the data fetched from New Relic.
Create the HTML Page (index.html)
- This page will fetch data from the Node.js server and use Chart.js to render the metrics in a graphical format.
- Please Visit this link for the sample HTML Page Code or Download the file from here: index.html.
- In the Code, the fetchData() function fetches data from your Node.js backend, and the displayCharts() function uses Chart.js to render the charts.
- Additionally, you can adjust the graph type, size, color, and range according to your needs.
Running the Application
Run the Node.js server with the help of the file (server.js) using the following command :
node server.js
Open your browser and go to http://<localhost_or_your_ip>:3000/. You should see your custom dashboard with charts displaying AWS EC2 metrics.
It should look similar to the image below:
Custom Dashboard using New Relic APIs
Actual New Relic Page:
New Relic Dashboard
Please note that this is just the basic setup for a custom dashboard and it won’t show live data, you need to manually refresh the HTML web page you created to get the graph updated on your page.
Conclusion
Following the steps outlined above, you can set up the custom HTML web page that uses New Relic API and Chart.js to visualize the various metrics of AWS EC2. It can be easily extended to monitor other resources, metrics, or even multiple EC2 instances. With control over the front end and back end, you can tune the dashboard to exactly meet your monitoring requirements, including adding new metrics or visualizations as needed, making this a very powerful yet personalized solution for keeping track of the performance of your infrastructure.
