ApplicationInsights in React

I'm fairly new to application insights and I'm trying to get it running on my react app in that sense, that there's a wrapper-component initiating the configuration / connection to the application-insights service.

When i instantiate the Wrapper-Component and nest another component, which should have access to the appInsights-object (making trackEvent, -trace, -error methods available), in it, the child Component states, that appInsights is not defined.

So in essence the component structure, simplified, looks something like this:

<WrapperService> // initializes appInsights
  <ChildComponent> // should have access to the appInsights-Object in Order to fire Events
</WrapperService>

To be specific about the goal at hand: How can i pass down the appInsights object to be able to use it in any component i want?

Any other suggestions? Thank you very much!

Solution

Tring to add application insights into child components you can use the React Hooks.

Follow the steps to achieve this:

Adding application insights in react refer here

Once added the application insights in your react app Try to create the context file like AppInsightsContext.js

import React, { createContext } from "react";
import { reactPlugin } from "./AppInsights";
const AppInsightsContext = createContext(reactPlugin);
const AppInsightsContextProvider = ({ children }) => {

    return (
        <AppInsightsContext.Provider value={reactPlugin}>
        {children}
    </AppInsightsContext.Provider>
    );
};
export { AppInsightsContext, AppInsightsContextProvider };

Now, we have a component that sets up the reactPlugin. We need to add it in our react application.

In the Layout/index.js file we need set the context up as high.

const LayoutWithContext = ({ location, children }) => (
< AppInsightsContextProvider>
    <>
    <Headroom
        upTolerance={10}
        downTolerance={10}
        style={{ zIndex: "20", height: "6.5em" }} >
        
        < Header location={location} />
    < /Headroom>
    < Container text>{children}</Container>
    < Footer />
    </>
< /AppInsightsContextProvider>
);

Context is now in use and all children components are able to access it within our children components.

If You wanted to use the standard page interaction tracking of the React plugin you can combine this with the HOC(Higher Order component)

import React from "react";
import Headroom from "react-headroom";
import { Container } from "semantic-ui-react";
import Footer from "../Footer";
import Header from "../Header";
import "semantic-ui-css/semantic.min.css";
import { AppInsightsContextProvider } from "../../AppInsightsContext";
import withAppInsights from "../../AppInsights";

const Layout = withAppInsights(({ location, children }) => (
    <>
    <Headroom
    upTolerance={10}
    downTolerance={10}
    style={{ zIndex: "20", height: "6.5em" }} >
        <Header location={location} />
    </Headroom>
    <Container text>{children}</Container>
    <Footer />
    </>
));

const LayoutWithContext = ({ location, children }) => (
    <AppInsightsContextProvider>
        <Layout location={location} children={children} />
    </AppInsightsContextProvider>
);

export default LayoutWithContext;

Exposing Context as a Hook

The final thing we can do with our new Context-provided react Plugin is to make it easier to access it and to do that we’ll use the useContext Hook. To do this it’s a simple matter of updating AppInsightsContext.js:

const useAppInsightsContext = () => useContext(AppInsightsContext);

Creating a Hook for Tracking events Refer here

Refer this article for more infomation