Error "Unable to start call, PSTN user present with no alternateCallerId" when upgrading from v1.19.0-beta.1 to v1.28

[EmilioP94]

Hi everyone,

To fix a security issue in a dependency of @azure/communications-react v1.19.0-beta.1 (see GHSA-vhxf-7vqr-mrjg), our security department wants us to update to the latest version.

However, when updating to the latest version and fixing the options that have changed for the <CallComposite> component, we are starting to get this error when starting the call:

Uncaught (in promise) Error: Unable to start call, PSTN user present with no alternateCallerId.
    at AzureCommunicationCallAdapter.js:814:1
    at Array.map (<anonymous>)
    at AzureCommunicationCallAdapter.startCall (AzureCommunicationCallAdapter.js:810:1)
    at startCallHandler (CallComposite.js:216:1)
    at ConfigurationPage.js:146:1
    at Generator.next (<anonymous>)
    at ConfigurationPage.js:27:1
    at new Promise (<anonymous>)
    at push../node_modules/@azure/communication-react/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.__awaiter (ConfigurationPage.js:9:1)
    at Object.onClick (ConfigurationPage.js:144:1)

Here is the way we are using the component:

const useAzureCommunicationServiceArgs = (): {
  userId: string;
  token: string;
  displayName: string;
  alternateCallerId: string;
  calleePhoneNumber: string;
} => {
  const chatAuth = useAppSelector(selectChatAuth);
  const patientGroup = useAppSelector(getPatientGroup);
  const displayName = patientGroup?.group_name;
  const patientPhoneNumber = useAppSelector(selectPatientMobilePhoneNumber);
  const parsedPatientPhoneNumber =
    parsePhoneNumber(patientPhoneNumber || '', 'US').number.toString() || '';

  return {
    userId: chatAuth?.azUserId || '',
    token: chatAuth?.azToken || '',
    displayName: displayName || '',
    alternateCallerId: patientGroup?.extended_attributes_json?.patientPhoneCallingNumber || '',
    calleePhoneNumber: parsedPatientPhoneNumber
  };
};

[...]

interface IAzureAudioCallCompositeProps {
  onCallEnded: () => void;
}

export const AzureAudioCallComposite = ({ onCallEnded }: IAzureAudioCallCompositeProps) => {

const intl = useIntl();
const { userId, token, displayName, alternateCallerId, calleePhoneNumber } =
  useAzureCommunicationServiceArgs();

const createTargetCallees = useMemo(() => {
  return [calleePhoneNumber].map(
    (c) => fromFlatCommunicationIdentifier(c) as PhoneNumberIdentifier
  );
}, [calleePhoneNumber]);

const credential = useMemo(() => {
  try {
    return new AzureCommunicationTokenCredential(token);
  } catch {
    return undefined;
  }
}, [token]);

const callAdapterArgs = useMemo(
    () => ({
      userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
      displayName,
      credential,
      targetCallees: createTargetCallees,
      alternateCallerId: alternateCallerId || undefined
    }),
    [userId, displayName, credential, alternateCallerId, createTargetCallees]
  );

const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);

if (callAdapter) {
    callAdapter.on('callEnded', () => {
      onCallEnded();
    });

    return (
      <CallComposite
        adapter={callAdapter}
        options={{
          callControls: {
            cameraButton: false,
            participantsButton: false,
            screenShareButton: false,
            raiseHandButton: false,
            reactionButton: false,
            peopleButton: false,
            captionsButton: false,
            teamsMeetingPhoneCallButton: false
          },
          remoteVideoTileMenuOptions: { isHidden: true },
          localVideoTile: false,
          surveyOptions: {
            disableSurvey: true
          }
        }}
      />
    );
  }
  if (credential === undefined) {
    return <h3>{intl.formatMessage({ id: 'invalidVoipToken' })}</h3>;
  }
  return (
    <div className="m-3">
      <Loading />
    </div>
  );
}

The error happens even if the alternateCallerId is properly set to a value mapping to our Azure Communications Services phone number. This worked without any issue on v1.19.0-beta1. The only thing I had to change for it to compile on 1.28 was to remove the following object from the options prop of the <CallComposite> component:

deviceChecks: {
  camera: 'doNotPrompt',
  microphone: 'required'
},

The "Troubleshoot Azure Communication Services PSTN call failures" page is 0% useful for fixing the issue, and googling this error or asking Copilot for help also yields nothing of use.

Does anyone know how to fix this issue?

Thanks in advance!

[prabhjot-msft]

@EmilioP94 looking into it, will share the update soon, thanks!

[EmilioP94]

hi @prabhjot-msft, any idea on this?

[prabhjot-msft]

@EmilioP94 Modify your code to pass alternateCallerId through the options parameter:

const callAdapterArgs = useMemo(
  () => ({
    userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
    displayName,
    credential,
    targetCallees: createTargetCallees,
    options: {
      alternateCallerId: alternateCallerId || undefined
    }
  }),
  [userId, displayName, credential, alternateCallerId, createTargetCallees]
); 

This change aligns with how the current codebase handles alternateCallerId which is now expected to be passed through the options object and is used internally when starting calls with PSTN participants.

Let me know if this resolves the issue!

[EmilioP94]

Hi,

Thanks, it seems Yarn hadn't properly updated the package as I did not have this structure in the types for the lib. This works, but I'm now getting another error, which is extremely annoying because the actual call is going through to my phone:

CallContext.js:1250 Uncaught (in promise) CallError: CallAgent.startCall: Feature failed code=500 subCode=41001
    at toCallError (CallContext.js:1250:1)
    at Proxy.<anonymous> (CallContext.js:1189:1)
    at Object.onStartCall (createHandlers.js:49:1)
    at AzureCommunicationCallAdapter.startCall (AzureCommunicationCallAdapter.js:820:1)
    at startCallHandler (CallComposite.js:216:1)
    at ConfigurationPage.js:146:1
    at Generator.next (<anonymous>)
    at ConfigurationPage.js:27:1
    at new Promise (<anonymous>)
    at push../node_modules/@azure/communication-react/dist/dist-esm/react-composites/src/composites/CallComposite/pages/ConfigurationPage.js.__awaiter (ConfigurationPage.js:9:1)

Code is the same, with only the suggested change. What is causing this? Reminder: we only wished to upgrade from v1.19-beta.1 to 1.28