In today’s digital landscape, the smooth operation of web applications is paramount. However, network performance issues often pose significant challenges for developers, impacting user satisfaction and overall success. That's where HubbleIQ SDK steps in—a robust toolkit tailored to streamline network performance monitoring and analysis, specifically for React applications.
Why Choose HubbleIQ SDK?
HubbleIQ SDK equips developers with powerful insights into network performance, allowing proactive identification and resolution of potential bottlenecks before they affect end-users. By seamlessly integrating this toolkit into your React projects, you gain access to critical network metrics like download/upload speeds, latency, and packet loss, all within your application environment.
Key Features Simplified:
- In-depth Network Analytics: Gain granular insights into network performance, analyzing data travel through each hop to identify potential delays.
- User-Centric Visibility: Understand network performance from the end-user’s perspective, considering factors like Wi-Fi strength, which may impact the overall experience.
- Tracking External Influences: Identify how external factors such as ISP throttling and network congestion affect performance, enabling optimization for real-world conditions.
Getting Started Made Easy:
Integrating HubbleIQ SDK into your React workflow is seamless. Here's a simplified guide to get you started:
Installation: Use standard package management tools like yarn or npm to
integrate HubbleIQ SDK into your React application effortlessly.
#Using Yarn
yarn add hubbleiq-services
#Using npm
npm i hubbleiq-services
Configuration: Tailor HubbleIQ SDK to your specific needs after obtaining the api key and company key from the admin panel upon registration.
const hubbleIQLib = new HubbleIQLib(
{
apiKey: "your apiKey",
companyKey: "your companyKey"
},
options
);
Additionally, you can pass an options object with configuration settings. For example:
const options = {
enablePageLoadCalculation: true,
checkNetTimeOut: 2000,
enableSsl: true,
};
Usage Examples: Leverage the following code samples to seamlessly incorporate HubbleIQ SDK functionalities into your application for comprehensive network analysis.
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: 'local'
};
// construct the library
const hubbleIQLib = new HubbleIQLib (
{
apiKey: 'c14aa742-5aac-41cf-abf9-45157df2d3ca',
companyKey: 'mediumCompanyKey',
},
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]);
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.
#Using yarn
yarn add react-d3-speedometer
#Using npm
npm install --save react-d3-speedometer
HTML code for displaying the results:
const 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>
);
Deep Dive into Optimization:
Once integrated, HubbleIQ SDK empowers you to gather and analyze network performance data effectively. Set up event listeners for network hops and evaluate user-side conditions to pinpoint areas for improvement and optimize accordingly.
Visualize Performance for Clarity:
Enhance understanding by visualizing network metrics such as upload/download speeds using tools like react-d3-speedometer. These visualizations aid both developers and users in comprehending network performance effortlessly.
Elevate Your React Applications Today!
HubbleIQ SDK provides a straightforward solution for network performance analysis and optimization, enabling developers to deliver flawless user experiences. Ready to eliminate network hurdles and take your React applications to the next level? Visit our website to explore HubbleIQ SDK and kickstart your optimization journey today!
For more information on features, pricing, and assistance, please visit our website.
Top comments (0)