Don't work with React HOOKS

[ecatugy]

Please send suport for React Hooks, components class is obsolete.

[veerprabakar]

Please support the function components with hooks.

[enterpriseSoftware]

Yes I would suggest a hooks implementation ASAP for react since that is the direction it's headed.

[khowling]

wrote a custom hook to replace withAITracking, seams to work ok, i have a 'key' paramter because i have a tabbed UI in the component i am tracking, and the key is the tab state

function useAITracking(componentName, key) {
useEffect( () => {
let start= new Date()
return () => {
reactPlugin.trackMetric({
average: (new Date() - start)/1000,
name: 'React Component (seconds)',
sampleCount: 1
}, { 'Component Name': componentName, 'Navigation': key });
};
}, [componentName, key])

}

[aaronpowell]

I've done a write up on how you can create custom hooks to work with AppInsights, you'll find it here: https://dev.to/aaronpowell/combining-react-hooks-with-appinsights-5692

In it there is a Context, allowing you to useContext to access the React plugin, a hook for tracking a normal event (using trackEvent for AppInsights) and one for doing metric tracking like the HOC does.

Does it look like what people would expect from a programmatic model of AppInsights + Hooks?

[MSNev]

Included in v 2.5.5 which is now fully deployed

[fab7jj]

@aaronpowell @MSNev is there any official documentation on how to use the new stuff for react hooks?

[las3r]

I second this question. Is there any documentation?

[aaronpowell]

Docs have been written and are currently being reviewed by our content team. Fingers crossed they should be available soon.

[aaronpowell]

Docs are now published - https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin#using-react-hooks

[las3r]

thanks for this!

[dps88]

@aaronpowell It would be great to have those docs in the react Readme.md as well

[aaronpowell]

Good suggestion @dps88. I've opened a PR to add it.

[HJordan35]

I have been attempting to get the Hooks based implementation to work in one of my current apps and I am having a few issues being certain if it is working as intended.

Setup
MS AppInsights + React-Plugin
https://docs.microsoft.com/en-us/azure/azure-monitor/app/javascript-react-plugin#basic-usage

Context Usage
Within my component, I accessing the AppInsights context, and then simply want to track metrics at my page component level. To do that I followed the exact recommendation listed in the documentation (linked above)

  const metricData = {
    average: 10, // Not explained in the docs, so I just put this as a 1 as I assume it is up to us to define a mechanism for calculating this client-side?
    name: 'React Component Engaged Time (seconds)',
    sampleCount: 1
  };
  const additionalProperties = { 'Component Name': 'ListView' };
  appInsights.trackMetric(metricData, additionalProperties);

In the console, I see the "track" network request, but it seems like the "additionalProperties" are not logged or tracked. This makes it impossible to do any splitting or aggregation on the AI side.

So I feel like Im on the right track, but I must be missing something. Additonally, I tried following the user-invoked useTrackMetric approach, though this did not seem to work at all. Manually triggering the callback provided via useTrackMetric did to appear to trigger any network traffic / tracking

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.