Network Diagnostics in a React Web Application Using ACS UFD

Question

Network Diagnostics in a React Web Application Using ACS UFD

Agre, Harishchandra 40

We are using the Azure Communication Services (ACS) SDK in our web application to enable audio/video calling. Occasionally, we observe network errors for both remote and local participants—even when the network speed is approximately 200 Mbps. To monitor and diagnose these issues, we have implemented User Facing Diagnostics (UFD) checks on both host and remote sides using SDK flags.

Currently, we are using @azure/communication-calling: ^1.38.1

Below is the log details captured during these network error scenarios. These logs include UFD events such as networkReconnect, networkReceiveQuality, and noNetwork, which help identify connectivity problems despite high bandwidth availability

Participants 1

Host network issue:- {participantId: '9754734d-6121-46aa-9161-40d5b08004f0', rawId: '8:acs:db0ceb00-aa93-460c-a9df-ad0480094243_0000002b-a9f5-50cc-fe50-8b3a0d00d769', diagnostic: 'serverConnection', value: false, valueType: 'DiagnosticFlag', …} TOe-m useHostVideoStream.tsx:297 Host network issue:- {participantId: '9754734d-6121-46aa-9161-40d5b08004f0', rawId: '8:acs:db0ceb00-aa93-460c-a9df-ad0480094243_0000002b-a9f5-50cc-fe50-8b3a0d00d769', diagnostic: 'serverConnection', value: true, valueType: 'DiagnosticFlag', …} TOe-m

Participant 2

Host network issue:- {participantId: '9754734d-6121-46aa-9161-40d5b08004f0', rawId: '8:acs:db0ceb00-aa93-460c-a9df-ad0480094243_0000002b-a9f5-50cc-fe50-8b3a0d00d769', diagnostic: 'serverConnection', value: true, valueType: 'DiagnosticFlag', …} TOe-m useHostVideoStream.tsx:297 Host network issue:- {participantId: '9754734d-6121-46aa-9161-40d5b08004f0', rawId: '8:acs:db0ceb00-aa93-460c-a9df-ad0480094243_0000002b-a9f5-50cc-fe50-8b3a0d00d769', diagnostic: 'serverConnection', value: false, valueType: 'DiagnosticFlag', …}diagnostic: "serverConnection"participantId: "9754734d-6121-46aa-9161-40d5b08004f0"rawId: "8:acs:db0ceb00-aa93-460c-a9df-ad0480094243_0000002b-a9f5-50cc-fe50-8b3a0d00d769"remoteParticipant: lz {_mappedStreams: Map(2), _state: 'Connected', _lastTsParticipantState: 3, _isMuted: true, _isSpeaking: false, …}value: falsevalueType: "DiagnosticFlag"[[Prototype]]: Object TOe-m useHostVideoStream.tsx:297 Host network issue:- {participantId: '9754734d-6121-46aa-9161-40d5b08004f0', rawId: '8:acs:db0ceb00-aa93-460c-a9df-ad0480094243_0000002b-a9f5-50cc-fe50-8b3a0d00d769', diagnostic: 'serverConnection', value: true, valueType: 'DiagnosticFlag', …}diagnostic: "serverConnection"participantId: "9754734d-6121-46aa-9161-40d5b08004f0"rawId: "8:acs:db0ceb00-aa93-460c-a9df-ad0480094243_0000002b-a9f5-50cc-fe50-8b3a0d00d769"remoteParticipant: lz {_mappedStreams: Map(2), _state: 'Connected', _lastTsParticipantState: 3, _isMuted: true, _isSpeaking: false, …}value: truevalueType: "DiagnosticFlag"[[Prototype]]: Object TOe-m

Vimal Lalani 2,725 Reputation points Microsoft External Staff Moderator

2025-12-26T00:58:09.05+00:00

Hi @Agre, Harishchandra

Based on the logs and UFD events you shared, this behavior can occur even when the available network bandwidth is high. Azure Communication Services calling is built on WebRTC, which depends more on network stability (latency, jitter, and packet loss) than on raw download or upload speed. Short network interruptions, Wi-Fi roaming, or brief packet loss can trigger the serverConnection UFD flag to switch between true and false.

The serverConnection diagnostic specifically indicates a temporary loss and recovery of the client’s connection to the ACS service. This does not necessarily mean the call has failed. In many cases, the SDK automatically reconnects within a short time. Because UFDs are reported from each client’s perspective, both host and remote participants may observe these events even if only one side experienced a brief network fluctuation.

It’s also important to note that bandwidth tests (for example, showing 200 Mbps) do not reflect real-time media quality. Real-time audio/video is sensitive to jitter, packet loss, firewall or proxy behavior, VPN usage, and CPU or browser throttling. Any of these can cause transient reconnect events that surface as networkReconnect, networkReceiveQuality, or noNetwork diagnostics.

From an application perspective, this is expected behavior and should be handled gracefully. We recommend treating serverConnection = false as a temporary condition, showing a “reconnecting” state in the UI rather than ending the call. Additionally, ensuring stable networks (preferably wired), allowing UDP traffic, and keeping the calling SDK up to date can help reduce how often these events occur.

1 answer

Your answer

Vimal Lalani 2,725 Reputation points Microsoft External Staff Moderator

2025-12-26T00:58:09.05+00:00

Hi @Agre, Harishchandra

Based on the logs and UFD events you shared, this behavior can occur even when the available network bandwidth is high. Azure Communication Services calling is built on WebRTC, which depends more on network stability (latency, jitter, and packet loss) than on raw download or upload speed. Short network interruptions, Wi-Fi roaming, or brief packet loss can trigger the serverConnection UFD flag to switch between true and false.

The serverConnection diagnostic specifically indicates a temporary loss and recovery of the client’s connection to the ACS service. This does not necessarily mean the call has failed. In many cases, the SDK automatically reconnects within a short time. Because UFDs are reported from each client’s perspective, both host and remote participants may observe these events even if only one side experienced a brief network fluctuation.

It’s also important to note that bandwidth tests (for example, showing 200 Mbps) do not reflect real-time media quality. Real-time audio/video is sensitive to jitter, packet loss, firewall or proxy behavior, VPN usage, and CPU or browser throttling. Any of these can cause transient reconnect events that surface as networkReconnect, networkReceiveQuality, or noNetwork diagnostics.

From an application perspective, this is expected behavior and should be handled gracefully. We recommend treating serverConnection = false as a temporary condition, showing a “reconnecting” state in the UI rather than ending the call. Additionally, ensuring stable networks (preferably wired), allowing UDP traffic, and keeping the calling SDK up to date can help reduce how often these events occur.

Answer 1

In your React web application using Azure Communication Services (ACS) SDK, it seems you are encountering network issues despite having a high bandwidth of 200 Mbps. The User Facing Diagnostics (UFD) events you are logging, such as networkReconnect, networkReceiveQuality, and serverConnection, are crucial for diagnosing these connectivity problems.

Understanding UFD Events: The serverConnection diagnostic flag indicates whether the connection to the server is active or not. A value of false suggests that there is a connectivity issue, while true indicates a good connection. Monitoring these flags can help you identify when participants are experiencing network issues.
Network Quality Events: The networkReceiveQuality UFD event can also provide insights into incoming stream quality. If this event logs a Bad value, it indicates network quality issues that may lead to degraded audio or video quality for participants.
Handling Network Issues: To manage these network issues effectively, ensure that your application subscribes to these UFD events and provides feedback to users. For example, if a networkReconnect event is triggered with a Bad value, you might want to display a message to the user indicating that there are network issues affecting the call quality.
Reconnection Logic: The ACS SDK will attempt to reconnect automatically when it detects network issues. However, it’s important to inform users of the potential impact on their call experience during this reconnection phase.
Further Troubleshooting: If the issues persist, consider investigating the network topology and infrastructure, as the SDK considers network issues as external problems. Understanding the network environment may reveal underlying issues that need to be addressed.

By utilizing the UFD events effectively and providing user feedback, you can enhance the user experience during audio/video calls even when network issues arise.

Share via

Network Diagnostics in a React Web Application Using ACS UFD

1 answer

Your answer