Add ApplicationInsights client metrics capture

[tnavarra]

I verified this against an AppInsights resource that I have and it is logging metrics. I followed the documentation somewhat from here and here. However, the React plugin for app insights specifically talks about metrics for class based components. Nowhere does it discuss components using hooks. I'm still very green with React so perhaps someone has a different interpretation of these docs.

[jjh121]

I verified this against an AppInsights resource that I have and it is logging metrics. I followed the documentation somewhat from here and here. However, the React plugin for app insights specifically talks about metrics for class based components. Nowhere does it discuss components using hooks. I'm still very green with React so perhaps someone has a different interpretation of these docs.

I don't think that the react appinsights plugin is going to work for us with hooks. I haven't tried it, but I did find this and this guide on how to make it work ... is this working because you converted the App.tsx component into a class based component?

I actually think trying to make the custom hook(s) outlined in that guide would be pretty interesting. It would allow us to send custom messages in code to app insights if i'm understanding it correctly.

[jjh121]

Does leaving the instrumentation key null cause any issues when it's not found (i.e. running locally?

[tnavarra]

No issues when running locally without it. It simply will not push App Insights metrics anywhere.

[tnavarra]

I verified this against an AppInsights resource that I have and it is logging metrics. I followed the documentation somewhat from here and here. However, the React plugin for app insights specifically talks about metrics for class based components. Nowhere does it discuss components using hooks. I'm still very green with React so perhaps someone has a different interpretation of these docs.

I don't think that the react appinsights plugin is going to work for us with hooks. I haven't tried it, but I did find this and this guide on how to make it work ... is this working because you converted the App.tsx component into a class based component?

I actually think trying to make the custom hook(s) outlined in that guide would be pretty interesting. It would allow us to send custom messages in code to app insights if i'm understanding it correctly.

I read over the linked blog posts. If you take a look at the first blog post in the series you'll see a very similar wire up of App Insights as to what's in this PR. I think the main difference to note is that he offloads that to its own file. I think that makes a lot of sense and I've modified this PR to do the same. From what I can tell there is nothing special in the configuration to get App Insights to work with function based components. The rest of the setup with the App Insights context and custom hook appears to be purely for tracing custom events using a hook. It probably does make sense to add this but perhaps that should be separate PR once we know thee basic setup is working. Thoughts?

[jjh121]

I read over the linked blog posts. If you take a look at the first blog post in the series you'll see a very similar wire up of App Insights as to what's in this PR. I think the main difference to note is that he offloads that to its own file. I think that makes a lot of sense and I've modified this PR to do the same. From what I can tell there is nothing special in the configuration to get App Insights to work with function based components. The rest of the setup with the App Insights context and custom hook appears to be purely for tracing custom events using a hook. It probably does make sense to add this but perhaps that should be separate PR once we know thee basic setup is working. Thoughts?

I think this makes a lot of sense. I like the separate file for AppInsights. I do think it'd be interesting to implement the custom tracing hook and another PR makes a lot of sense.