In the digital age, where web applications form the backbone of technology and commerce, the performance of these applications directly impacts user satisfaction and business success. For software developers, ensuring optimal network performance is not just a task—it's an essential aspect of application development. This is where HubbleSDK steps in, offering a comprehensive solution for monitoring and analyzing network performance within React applications. Let's dive deeper into how HubbleSDK can transform your development process, ensuring your applications are not just functional but truly stand out in the digital landscape.
.png)
HubbleIQSDK is designed to arm developers with end-to-end network performance analytics, offering a deep dive into the intricacies of network behavior. By integrating HubbleIQSDK into your React projects, you gain the ability to monitor key network metrics such as download/upload speeds, latency, packet loss, and much more—directly within your application. This empowers you to identify and rectify potential performance bottlenecks before they impact your users.
HubbleIQSDK is a powerful tool designed to facilitate network monitoring and performance analysis within your React applications. By integrating HubbleIQSDK into your projects, you gain valuable insights into various network metrics such as download/upload speeds, latency, packet loss, and more. This guide will walk you through the process of installing and utilizing HubbleIQSDK within your React application.
Before you begin, ensure you have Node.js installed on your system. HubbleIQSDK is compatible with Node.js 18 and later versions. You can install HubbleIQSDK via npm or yarn.
yarn add hubbleiq-servicesnpm i hubbleiq-servicesOnce installed, you can import the HubbleIQLib component into your React application as follows:
import { HubbleIQLib } from "hubbleiq-services";To initialize the HubbleIQSDK, you need to provide two objects: `authData` and `options`. Where `authData` contains: apiKey, companyKey, and `options` contains additional configuration data. Tthe keys below give you access to our free sandbox environment. For private keys, register for a free account at HubbleIQ.com
const hubbleIQLib = new HubbleIQLib(
{
apiKey: "83abc12f-1715-49ba-b081-c2431376de99",
companyKey: "hubbleiqCompanyKey"
},
options
);
Additionally, you can pass an options object with configuration settings. For example:
const options = {
enablePageLoadCalculation: true,
checkNetTimeOut: 2000,
enableSsl: true,
};
To use the SDK we should first initialize it.
Create a file called hubbleIQLib.js
import { HubbleIQLib } from "hubbleiq-services";
const options = {
enablePageLoadCalculation: false,
env: 'prod'
};
// construct the library
const hubbleIQLib = new HubbleIQLib (
{
apiKey: '83abc12f-1715-49ba-b081-c2431376de99',
companyKey: 'hubbleiqCompanyKey',
},
options
);
hubbleIQLib.init();
export default hubbleIQLib;
Now we’re ready to use the library in the application. Create a react application and import the lib from the file above like this:
import hubbleIQLib from "../../libs/hubbleIQLib";And for related data create the state:
const [dSpeed, setDSpeed] = useState(0);
const [uSpeed, setUSpeed] = useState(0);
const [jitter, setJitter] = useState(0);
const [latency, setLatency] = useState(0);
const [packetLoss, setPacketLoss] = useState(0);
const [connectionStatus, setConnectionStatus] = useState('offline');
const [stability, setStability] = useState(0);
const [connectionMsg, setConnectionMsg] = useState('');
const [connectionMsgHeader, setConnectionMsgHeader] = useState('');
const [statusBackgroundColor, setStatusBackgroundColor] = useState('');
The next step is to create a functions that call the tests from hubbleIQLib:
async function callPocketLossTest() {
await hubbleIQLib.calculatePacketLoss();
}
async function callInetConnectionTest() {
await hubbleIQLib.checkInternetConnection();
}
async function startTest() {
if (jitter && latency) {
await hubbleIQLib.stop();
}
await hubbleIQLib.run();
}
Each SDK method fires an event once the action is finished. We should declare them and save the data we receive from the events into our state using useEffect.
useEffect(() => {
hubbleIQLib.on("connection-status", (status: string) => {
setConnectionStatus(status);
});
hubbleIQLib.on("upload-measurement", (data: IUploadAndDownloadData) => {
setUSpeed(data?.ClientToServerSpeed);
});
hubbleIQLib.on("download-measurement", (data: IUploadAndDownloadData) => {
setDSpeed(data.ServerToClientSpeed);
});
hubbleIQLib.on("complete", (data: ICompleteData) => {
setJitter(data?.jitter);
setLatency(data?.latency);
});
hubbleIQLib.on("packet-loss", (data: number) => {
setPacketLoss(data);
});
hubbleIQLib.on("connection-stability", (data: number) => {
setStability(data);
});
hubbleIQLib.on("connection-msg", (data: IConnectionMsg) => {
setStatusBackgroundColor(data.color);
setConnectionMsg(data.msg);
setConnectionMsgHeader(data.header);
});
}, [jitter, latency]);
Now we are ready to display the results, but first, we need to install additional dependencies.
Using yarn:
yarn add react-d3-speedometerUsing npm:
npm install --save react-d3-speedometerconst connectionMsgHeaderStyles = {
backgroundColor: statusBackgroundColor,
};
return (
<div className="layout">
<div className="layout-greeting">
<h1>Your speed test results are here!</h1>
</div>
<div className="layout-content">
<div className="layout-content-buttons">
<button type="button" className="run-test-btn" onClick={callPocketLossTest}>Check Pocket Loss</button>
<button type="button" className="run-test-btn" onClick={callInetConnectionTest}>Check Internet Connection</button>
<button type="button" className="run-test-btn" onClick={startTest}>Start Test</button>
</div>
<div className="test-connection-status test-result">
<p>Stability: {stability} ms / Connection status: <span>{connectionStatus}</span></p>
</div>
{connectionMsgHeader && connectionMsg && (
<div style={connectionMsgHeaderStyles} className="test-connection-result">
<h3>{connectionMsgHeader}</h3>
<h4>{connectionMsg}</h4>
</div>
)}
<div className="test-packet-loss test-result">
<p>Packet loss</p>
<span>{packetLoss} %</span>
</div>
<div className="test-complete test-result">
<p>
Jitter: {jitter} ms / Latency: {latency} ms
</p>
<div className="speedometer-wrapper">
<div className="speedometer">
<span>Upload speed (Mb/s)</span>
<ReactSpeedometer maxValue={1000} value={uSpeed} ringWidth={20}/>
</div>
<div className="speedometer download">
<span>Download speed (Mb/s)</span>
<ReactSpeedometer maxValue={1000} value={dSpeed} ringWidth={20}/>
</div>
</div>
</div>
</div>
</div>
);
.png)
After setting up HubbleIQSDK, use its features to collect and analyze network performance, including setting event listeners for network hops and assessing end-user network conditions like Wi-Fi performance. This analysis identifies areas for optimization, from server settings to code adjustments, improving latency and throughput.
Utilize tools like react-d3-speedometer for clear visual representations of network metrics such as upload and download speeds, aiding both development and user understanding, or contact us for more.
HubbleIQSDK offers a straightforward approach to understanding and optimizing network performance for web applications. It provides essential analytics for informed decision-making, leading to enhanced user experiences. This tool is particularly useful for developers aiming to improve their applications without incurring costs, facilitating better performance and satisfaction.