React 中的 ApplicationInsights

Posted 2023-02-19

【中文标题】React 中的 ApplicationInsights

【英文标题】：ApplicationInsights in React

【发布时间】：2022-01-07 04:33:30

【问题描述】：

我对应用程序洞察力相当陌生，我正试图让它在我的 react 应用程序上运行，因为有一个包装器组件启动配置/连接到 application-insights 服务。

当我实例化 Wrapper-Component 并嵌套另一个组件时，该组件应该有权访问 appInsights-object（使 trackEvent、-trace、-error 方法可用），其中子组件声明 appInsights 未定义.

因此，简化后的组件结构本质上看起来像这样：

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

具体说明手头的目标：如何传递 appInsights 对象以便能够在我想要的任何组件中使用它？

还有其他建议吗？非常感谢！

【参考方案1】：

尝试将应用程序洞察添加到您可以使用 React Hooks 的子组件中。

按照以下步骤实现：

在 React 中添加应用洞察参考 here

在您的 react 应用中添加应用洞察后尝试创建上下文文件，如 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 ;

现在，我们有一个设置 reactPlugin 的组件。我们需要将它添加到我们的 react 应用程序中。

在 Layout/index.js 文件中，我们需要将上下文设置为高。

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>
);

上下文现在正在使用中，所有 children 组件都可以在我们的子组件中访问它。

如果您想使用 React 插件的标准页面交互跟踪，您可以将它与 HOC（高阶组件）结合使用

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;

将上下文公开为 Hook

我们可以使用新的 Context-provided react 插件做的最后一件事是让它更容易访问，为此我们将使用 useContext Hook。为此，只需更新AppInsightsContext.js：

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

创建用于跟踪事件的 Hook 参考 here

更多信息请参考this article

【讨论】：

如果回答对您有帮助，请Accept it as an Answer，以便遇到相同问题的其他人可以找到此解决方案并解决他们的问题。