[AudioContext] Add new logger for the composite and add log lines for audio context (#5939)

* Add new logger for the composite and add log lines for audio context

* Change files

* add warning for when the context is recreated

* add trouble shooting doc about audio contexts

* fix lint

* add mock for tests

Author: dmceachernmsft

change-beta/@azure-communication-react-31c7fd68-c556-460d-802c-c22af3d41159.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Logging",
+  "comment": "Add new logger for the composite and add log lines for audio context",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-31c7fd68-c556-460d-802c-c22af3d41159.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Logging",
+  "comment": "Add new logger for the composite and add log lines for audio context",
+  "packageName": "@azure/communication-react",
+  "email": "dmceachern@microsoft.com",
+  "dependentChangeType": "patch"
+}

common/config/jest/jestSetup.js

@@ -20,7 +20,9 @@ afterAll(() => {
 });
 
 window.AudioContext = jest.fn().mockImplementation(() => {
-  return {};
+  return {
+    close: jest.fn().mockResolvedValue(undefined)
+  };
 });
 // Add `ResizeObserver` to globals. Without this GridLayout jest tests fail with "ReferenceError: ResizeObserver is not defined"
 global.ResizeObserver = require('resize-observer-polyfill');

packages/react-composites/src/composites/common/AudioProvider.tsx

@@ -1,7 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import { _logEvent } from '@internal/acs-ui-common';
 import React, { useContext, createContext, useState, useEffect } from 'react';
+import { compositeLogger, EventNames } from './logger';
 
 /**
  * @private
@@ -21,7 +23,23 @@ export const ACSAudioProvider = (props: ACSAudioProviderProps): JSX.Element => {
   const [stateAudioContext, setStateAudioContext] = useState<AudioContext | undefined>(undefined);
 
   useEffect(() => {
+    if (stateAudioContext) {
+      _logEvent(compositeLogger, {
+        name: EventNames.COMPOSITE_AUDIO_CONTEXT_RECREATED,
+        level: 'warning',
+        message: 'AudioContext recreated for composite.',
+        data: { audioContextState: stateAudioContext.state }
+      });
+    } else {
+      _logEvent(compositeLogger, {
+        name: EventNames.COMPOSITE_AUDIO_CONTEXT_CREATED,
+        level: 'info',
+        message: 'AudioContext created for composite.',
+        data: { audioContextState: audioContext.state }
+      });
+    }
     // Create the AudioContext only when the component is rendered
+
     setStateAudioContext(audioContext);
   }, [audioContext]);
 

packages/react-composites/src/composites/common/BaseComposite.tsx

@@ -12,13 +12,15 @@ import {
   useTheme
 } from '@fluentui/react';
 import { FluentThemeProvider, ParticipantMenuItemsCallback } from '@internal/react-components';
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useEffect } from 'react';
 import { CompositeLocale, LocalizationProvider } from '../localization';
 import { AvatarPersonaDataCallback } from './AvatarPersona';
 import { CallCompositeIcons, CallWithChatCompositeIcons, ChatCompositeIcons, DEFAULT_COMPOSITE_ICONS } from './icons';
 import { globalLayerHostStyle } from './styles/GlobalHostLayer.styles';
 import { useId } from '@fluentui/react-hooks';
 import { ACSAudioProvider } from './AudioProvider';
+import { compositeLogger, EventNames } from './logger';
+import { _logEvent } from '@internal/acs-ui-common';
 /**
  * Properties common to all composites exported from this library.
  *
@@ -112,6 +114,23 @@ export const BaseProvider = (
    * We need to create one context for the AudioProvider to ensure that we only have one instance of the AudioContext.
    */
   const compositeAudioContext = new AudioContext();
+
+  useEffect(() => {
+    return () => {
+      if (compositeAudioContext) {
+        _logEvent(compositeLogger, {
+          name: EventNames.COMPOSITE_AUDIO_CONTEXT_CLOSED,
+          level: 'info',
+          message: 'AudioContext is being closed.',
+          data: {}
+        });
+        compositeAudioContext.close().catch((e) => {
+          console.error('Failed to close AudioContext', e);
+        });
+      }
+    }
+  }, []);
+
   // we use Customizer to override default LayerHost injected to <body />
   // which stop polluting global dom tree and increase compatibility with react-full-screen
   const CompositeElement = (

packages/react-composites/src/composites/common/logger.ts

@@ -0,0 +1,30 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { createClientLogger } from '@azure/logger';
+
+/**
+ * @private
+ */
+export const compositeLogger = createClientLogger('communication-react:composite');
+
+/**
+ * @private
+ * Enum for event names used in the composite logger.
+ * These events are used to track various actions and states within the composite.
+ */
+export enum EventNames {
+    // Info
+    COMPOSITE_INITIALIZED = 'COMPOSITE_INITIALIZED',
+    COMPOSITE_RENDERED = 'COMPOSITE_RENDERED',
+    COMPOSITE_CLOSED = 'COMPOSITE_CLOSED',
+    COMPOSITE_AUDIO_CONTEXT_CREATED = 'COMPOSITE_AUDIO_CONTEXT_CREATED',
+    COMPOSITE_AUDIO_CONTEXT_CLOSED = 'COMPOSITE_AUDIO_CONTEXT_CLOSED',
+    COMPOSITE_AUDIO_CONTEXT_RECREATED = 'COMPOSITE_AUDIO_CONTEXT_RECREATED',
+    
+    // Warning
+    COMPOSITE_WARNING = 'COMPOSITE_WARNING',
+    
+    // Error
+    COMPOSITE_ERROR = 'COMPOSITE_ERROR'
+}

packages/storybook8/stories/Concepts/Troubleshooting/Docs.mdx

@@ -123,3 +123,17 @@ useEffect(() => {
 This `useEffect` will add an event listener for the `pageshow` event, this event when triggered
 will share if the page is persisted or cached. If the page is cached we will reload the app so the
 user can rejoin the call.
+
+## AudioContext issues
+
+With the nature of react and how it re-renders components it is possible that there will be multiple instances of [`AudioContexts`](https://developer.mozilla.org/en-US/docs/Web/API/AudioContext) created. These Audio Context provide the
+audio playback for the calls and for playing DTMF Tones in our composite experiences. If you are experiencing issues with audio playback or DTMF tones not being played, it is likely that there are multiple AudioContexts created.
+
+In order to detect this we provide logs to detect when the AudioContext is created and closed. You can enable these logs by setting the log level to `info` in your application:
+
+```ts
+import { setLogLevel } from '@azure/communication-react';
+setLogLevel('info');
+```
+
+This will log when the AudioContext is created and closed. If you see multiple logs for the creation of the AudioContext, it is likely that there are multiple instances being created.