[BUG] useTrackMetric doesn't send any data to Application Insights after the latest Teams update (V2)

[kroudams]

After the recent Teams update (V2)
applicationinsights-react-js -> useTrackMetric has stopped sending
any data to Application Insights.

That's how I use it in my App:

1. Custom hook that wraps it:

import { useAppInsightsContext, useTrackMetric } from '@microsoft/applicationinsights-react-js';
import { ICustomProperties } from '@microsoft/applicationinsights-web';

export interface IUseTeamsTrackMetric {
    componentName: string;
    customProperties?: ICustomProperties;
}

type UseTeamsTrackMetricReturnType = () => void;

const useTeamsTrackMetric = ({ componentName, customProperties }: IUseTeamsTrackMetric): UseTeamsTrackMetricReturnType => {
    const appInsights = useAppInsightsContext();
    const trackMetric = useTrackMetric(appInsights, componentName, { ...customProperties, telemetryType: 'frontend' });
    return trackMetric;
};

export default useTeamsTrackMetric;

Examples of use:

export const EmailModal: FC<IEmailModalProps> = ({ isOpen }) => {
    const teamsTrackMetric = useTeamsTrackMetric({ componentName: EMAIL_DRAFT_MODAL_COMPONENT_NAME, customProperties: { event: TELEMETRY_EVENT.LOAD } });

    useEffect(() => {
        if (isOpen) {
            teamsTrackMetric();
        }
    }, [isOpen]);

    return (
        <EmailDialog open={isOpen}>
           <EmailDialogContent>...</EmailDialogContent>
        </EmailDialog>
    );
};

export default EmailModal;

export const EmailDialogContent: FC<IEmailDialogContentProps> = ({ body, onCancel, isLoading, isError, onRefresh }) => {
    const trackCopyToClipboardClick = useTeamsTrackEvent({ eventName: 'Copy to clipboard button', componentName: EMAIL_CONTAINER_COMPONENT_NAME });
    const teamsTrackMetric = useTeamsTrackMetric({ componentName: EMAIL_CONTAINER_COMPONENT_NAME, customProperties: { event: TELEMETRY_EVENT.LOAD } });

    const bodyContentLoaded = !isLoading && !isError && body;

    useEffect(() => {
        if (bodyContentLoaded) {
            teamsTrackMetric();
        }
    }, [bodyContentLoaded]);

    if (isLoading) {
        return <Skeleton onCancel={onCancel} />;
    }

    if (isError) {
        return <Error onTryAgain={onRefresh} />;
    }

    const handleClick = () => {
         ...
        trackCopyToClipboardClick({ eventData: { action: TELEMETRY_ACTION.CLICK }, methodName: 'handleClick' });
        ...
    };

    return (
            <EmailDialogContent>
                <EmailDialogBtn click={handleClick }>...</EmailDialogBtn>
           </EmailDialogContent>
    );
};

[MSNev]

I'm not sure how to help here...

It sounds like the UI / framework that you have been relying on (and the react framework is using) is no longer present in the same form inside of Teams V2???

[kroudams]

Might it be a problem with Teams V2 that somehow breaks the implementation of the Telemetry in applicationinsights-react-js? Are you aware of any issues related to the new Teams version?

[MSNev]

Might it be a problem with Teams V2 that somehow breaks the implementation of the Telemetry in applicationinsights-react-js?

That would be my first thought, but I'm not familiar with UI the framework within a Teams App.

Are you aware of any issues related to the new Teams version?

So no on this one, it maybe that they have changed the version or maybe are using some sort of "shim" to provide the same interfaces with different implementations under the covers??? -- just guessing on this

[cloudsere]

Yes, I think the issue is trackActivity never got called...

[github-actions]

This Issue will be closed in 30 days. Please remove the "Stale" label or comment to avoid closure with no action.