Configure custom properties to be collected when tracking an exception in azure app insights

Question

I'm using Azure App Insights to track exceptions in a React app. As stated in the docs and some other tutorials, thrown exceptions are automatically collected by app insights React SDK, which is wonderful.

However, we want app insights to collect exactly in which error boundary a particular error occurred, but automatically reported error boundary exceptions don't have this information. This makes it hard to decode where exactly are errors in the production build.

Is there a way that allow us to define a custom property in error boundary via props which tells where this error boundary belongs to, and let app insights automatically pick it up when reporting the exception?

Thanks in advance.

Answer 1

Is there a way that allow us to define a custom property in error boundary via props which tells where this error boundary belongs to, and let app insights automatically pick it up when reporting the exception?

As suggested by MSNev, adding gist as a community wiki answer to help community members who might face a similar issue.

• As per AppInsightsErrorBoundary.tsx, ErrorInfo details are passed as additional properties to the trackException() call, so they should be available as part of the additional properties in the portal.

• You can also use a telemetry initializer to intercept the event before it's sent to move/set additional properties on the event.

var telemetryInitializer = (envelope) => {
  envelope.tags["ai.cloud.role"] = "your role name";
  envelope.tags["ai.cloud.roleInstance"] = "your role instance";
}
appInsights.addTelemetryInitializer(telemetryInitializer);

Updated answer:

As per comment by Pavindu, this issue has been resolved by passing document.title to the exception data packet in the telemetry initialiser.