How to test network diagnostics on local using azure communication library in react?

Question

I have implemented the code as per https://learn.microsoft.com/en-us/azure/communication-services/concepts/voice-video-calling/user-facing-diagnostics?pivots=platform-web#network-values. Code is on my local. Now, I want to test it like if internet is off then display Network not available message on screen. However, everything is on my local, it is not triggering the event. Following is my code:

import {networkDiagnostics} from '../common/NetworkDiagnostics';
import {Features} from '@azure/communication-calling';

const CallScreen = () => {
    const userFacingDiagnostics = call?.feature(Features.UserFacingDiagnostics)
    React.useEffect(() => {    
      const netErr = userFacingDiagnostics?.network.on('diagnosticChanged', networkDiagnostics);
    }, [userFacingDiagnostics]);
}

And following is NetworkDiagnostics file:

import { useState } from 'react';
import { NetworkDiagnosticChangedEventArgs, DiagnosticQuality, Features } from '@azure/communication-calling';

export const networkDiagnostics = (
  diagnosticInfo: NetworkDiagnosticChangedEventArgs
) => {
  const [networkQualityMessage, setNetworkQualityMessage] = useState('');
  console.log(`Diagnostic changed: ` +
    `Diagnostic: ${diagnosticInfo.diagnostic}` +
    `Value: ${diagnosticInfo.value}` +
    `Value type: ${diagnosticInfo.valueType}`);

  if (diagnosticInfo.valueType === 'DiagnosticQuality') {
    switch (diagnosticInfo.diagnostic) {
      case 'networkReconnect':
        if (diagnosticInfo.value === DiagnosticQuality.Poor) {
          setNetworkQualityMessage('Poor Network');
        } else if (diagnosticInfo.value === DiagnosticQuality.Bad) {
          setNetworkQualityMessage('Network is disconnected');
        } else if (diagnosticInfo.value === DiagnosticQuality.Good) {
          setNetworkQualityMessage('Network is connected');
        }
        break;
      case 'networkReceiveQuality':
        if (diagnosticInfo.value === DiagnosticQuality.Poor) {
          setNetworkQualityMessage('Poor Network');
        } else if (diagnosticInfo.value === DiagnosticQuality.Bad) {
          setNetworkQualityMessage('Problem with Network');
        } else if (diagnosticInfo.value === DiagnosticQuality.Good) {
          setNetworkQualityMessage('Network is connected');
        }
        break;
    }
  } else if (diagnosticInfo.valueType === 'DiagnosticFlag') {
    switch (diagnosticInfo.diagnostic) {
      case 'noNetwork':
        if (diagnosticInfo.value === true) {
          setNetworkQualityMessage('No Network available');
        } else if (diagnosticInfo.value === false) {
          setNetworkQualityMessage('Network available');
        }
        break;
      case 'networkRelaysNotReachable':
        if (diagnosticInfo.value === true) {
          setNetworkQualityMessage('Internet connection is fluctuating.');
        } else if (diagnosticInfo.value === false) {
          setNetworkQualityMessage('Stable internet connection is available');
        }
        break;
    }
  }

  return networkQualityMessage
}

How can I test it on my local? Or is there anything that I am missing out?

Thank you, Trupti

Answer 1

Below code is to add network diagnostics using azure communication library in react

To enable Call Diagnostics for your Azure Communication Services Resource, follow these steps:

• Create an Azure Log Analytics workspace and add diagnostic settings for your resource. You can do this by following the instructions provided here. Make sure to enable logs via Diagnostic Settings in Azure Monitor.

import React, { useState } from "react";
import {
  CommunicationIdentityClient,
} from "@azure/communication-identity";
import {
  AzureCommunicationTokenCredential,
} from "@azure/communication-common";
import {
  CallClient,
  Features,
} from "@azure/communication-calling";

const connectionString = "<COMMUNICATION_SERVICES_CONNECTION_STRING>";
const App = () => {
  const [callAgent, setCallAgent] = useState(null);
  const [call, setCall] = useState(null);
  const [networkQualityMessage, setNetworkQualityMessage] = useState("");

  const initializeCallAgent = async () => {
    try {
      const identityClient = new CommunicationIdentityClient(connectionString);
      const { token } = await identityClient.createUserAndToken(["voip"]);
      const agent = await new CallClient().createCallAgent(
        new AzureCommunicationTokenCredential(token)
      );

      setCallAgent(agent);
      console.log("Call Agent Initialized");
    } catch (error) {
      console.error("Failed to initialize Call Agent:", error);
    }
  };

  const startCall = async () => {
    if (!callAgent) {
      console.error("Call Agent is not initialized.");
      return;
    }

    try {
      const currentCall = callAgent.startCall(
        [{ phoneNumber: "+9191" }],
        { alternateCallerId: { phoneNumber: "+186" } }
      );

      setCall(currentCall);
      console.log("Call started");
      subscribeToCallDiagnostics(currentCall);
    } catch (error) {
      console.error("Error starting call:", error);
    }
  };

  const subscribeToCallDiagnostics = (currentCall) => {
    if (!currentCall) return;

    const userFacingDiagnostics = currentCall.feature(Features.UserFacingDiagnostics);
    if (userFacingDiagnostics) {
      userFacingDiagnostics.network.on("diagnosticChanged", (diagnosticInfo) => {
        console.log("Diagnostic changed:", diagnosticInfo);
        handleNetworkDiagnostics(diagnosticInfo);
      });
    }
  };

  const handleNetworkDiagnostics = (diagnosticInfo) => {
    if (diagnosticInfo.valueType === "DiagnosticQuality") {
      if (diagnosticInfo.diagnostic === "networkReceiveQuality") {
        switch (diagnosticInfo.value) {
          case "Good":
            setNetworkQualityMessage("Network quality is good.");
            break;
          case "Poor":
            setNetworkQualityMessage("Network quality is poor.");
            break;
          case "Bad":
            setNetworkQualityMessage("Network quality is bad.");
            break;
          default:
            break;
        }
      }
    } else if (diagnosticInfo.valueType === "DiagnosticFlag") {
      if (diagnosticInfo.diagnostic === "noNetwork") {
        if (diagnosticInfo.value) {
          setNetworkQualityMessage("No network available.");
        } else {
          setNetworkQualityMessage("Network is available.");
        }
      }
    }
  };

  const hangUpCall = async () => {
    if (!call) {
      console.error("No active call to hang up.");
      return;
    }

    try {
      await call.hangUp();
      setCall(null);
      console.log("Call ended");
    } catch (error) {
      console.error("Error hanging up call:", error);
    }
  };

  return (
    <div className="App">
      <h1>Azure Communication Services with Network Diagnostics</h1>
      <button onClick={initializeCallAgent}>
        Initialize Call Agent
      </button>
      <button onClick={startCall} disabled={!callAgent}>
        Start Call
      </button>
      <button onClick={hangUpCall} disabled={!call}>
        Hang Up
      </button>
      <div>
        {networkQualityMessage && <p>{networkQualityMessage}</p>}
      </div>
    </div>
  );
};

export default App;

Output:

Refer this MSDOC for add video calling to your app using An Azure Communication Services

The code for Azure Communication Services Call Diagnostics feature for web applications is taken from this reference git.

import React, { useState } from "react";
import {
  CallClient,
  LocalVideoStream,
  Features,
} from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from "@azure/communication-common";
import "./App.css";

const App = () => {
  const [callAgent, setCallAgent] = useState(null);
  const [call, setCall] = useState(null);
  const [incomingCall, setIncomingCall] = useState(null);
  const [networkQualityMessage, setNetworkQualityMessage] = useState("");

  const initializeCallAgent = async (userAccessToken) => {
    try {
      const callClient = new CallClient();
      const tokenCredential = new AzureCommunicationTokenCredential(userAccessToken);
      const agent = await callClient.createCallAgent(tokenCredential);

      agent.on("incomingCall", (args) => {
        setIncomingCall(args.incomingCall);
      });

      setCallAgent(agent);
      console.log("Call Agent Initialized");
    } catch (error) {
      console.error("Failed to initialize Call Agent:", error);
    }
  };

  const startCall = async (calleeAcsUserId) => {
    try {
      const currentCall = callAgent.startCall([{ communicationUserId: calleeAcsUserId }]);
      setCall(currentCall);
      subscribeToCallDiagnostics(currentCall);
    } catch (error) {
      console.error("Error starting call:", error);
    }
  };

  const acceptIncomingCall = async () => {
    try {
      const acceptedCall = await incomingCall.accept();
      setCall(acceptedCall);
      subscribeToCallDiagnostics(acceptedCall);
    } catch (error) {
      console.error("Error accepting call:", error);
    }
  };

  const subscribeToCallDiagnostics = (currentCall) => {
    if (!currentCall) return;

    const userFacingDiagnostics = currentCall.feature(Features.UserFacingDiagnostics);
    if (userFacingDiagnostics) {
      userFacingDiagnostics.network.on("diagnosticChanged", (diagnosticInfo) => {
        console.log("Diagnostic changed:", diagnosticInfo);
        handleNetworkDiagnostics(diagnosticInfo);
      });
    }
  };

  const handleNetworkDiagnostics = (diagnosticInfo) => {
    if (diagnosticInfo.valueType === "DiagnosticQuality") {
      if (diagnosticInfo.diagnostic === "networkReceiveQuality") {
        switch (diagnosticInfo.value) {
          case "Good":
            setNetworkQualityMessage("Network quality is good.");
            break;
          case "Poor":
            setNetworkQualityMessage("Network quality is poor.");
            break;
          case "Bad":
            setNetworkQualityMessage("Network quality is bad.");
            break;
          default:
            break;
        }
      }
    } else if (diagnosticInfo.valueType === "DiagnosticFlag") {
      if (diagnosticInfo.diagnostic === "noNetwork") {
        if (diagnosticInfo.value) {
          setNetworkQualityMessage("No network available.");
        } else {
          setNetworkQualityMessage("Network is available.");
        }
      }
    }
  };

  const hangUpCall = async () => {
    try {
      await call.hangUp();
      setCall(null);
    } catch (error) {
      console.error("Error hanging up call:", error);
    }
  };

  return (
    <div className="App">
      <h1>Azure Communication Services - Network Diagnostics</h1>
      <div>
        <input
          type="text"
          id="user-access-token"
          placeholder="Enter User Access Token"
          onBlur={(e) => initializeCallAgent(e.target.value)}
        />
      </div>
      <div>
        <input type="text" id="callee-acs-user-id" placeholder="Enter Callee ACS User ID" />
        <button onClick={() => startCall(document.getElementById("callee-acs-user-id").value)}>
          Start Call
        </button>
        <button onClick={acceptIncomingCall} disabled={!incomingCall}>
          Accept Call
        </button>
        <button onClick={hangUpCall} disabled={!call}>
          Hang Up
        </button>
      </div>
      <div>
        {networkQualityMessage && <p>{networkQualityMessage}</p>}
      </div>
    </div>
  );
};

export default App;

Output:

To retrieve the data in the Call Diagnostic is visible only after a few hours (apparently 2- 5 hours), which is surprising.