使用 Application Insights 做出反应

Question

我对 Application Insights 完全陌生，想在 javascript 中评估应用程序洞察力并做出反应。我有点想通过一个小演示了解应用程序洞察力的功能，但我真的不知道从哪里开始。

我已经通读了官方文档，该文档非常详尽，但并没有真正提供易于上手的示例指南。

是否有 ressources/demos/tutorials 在线讨论关于 React 的主题？

应该涵盖其中的大部分主题（也很高兴收到其他建议...）：

React 应用程序的错误跟踪
收集 React 应用程序的遥测数据
Typescript 去符号化

感谢任何提示！

Answer 1

在 React 中添加应用程序洞察，您可以按照以下步骤操作：

创建您的 Basic React 应用程序

要在 React 应用程序中添加应用程序洞察，您需要在 app.jsx

中添加 Instrumentation key

< BrowserRouter>
    < TelemetryProvider instrumentationKey="INSTRUMENTATION_KEY" after={() => { appInsights = getAppInsights() }}>
        < div >
            < Header />
            < Route exact path="/" component={Home} />
            < Route path="/about" component={About} />
        < /div>
        < div className="App">
            < button onClick={trackException}>Track Exception</button>
            < button onClick={trackEvent}>Track Event</button>
            < button onClick={trackTrace}>Track Trace</button>
            < button onClick={throwError}>Autocollect an Error</button>
            < button onClick={ajaxRequest}>Autocollect a Dependency (XMLHttpRequest)</button>
            < button onClick={fetchRequest}>Autocollect a dependency (Fetch)< /button>
        < /div>
    < /TelemetryProvider>
< /BrowserRouter>

在默认的 React 应用程序中，我们仅更改了 app.jsx 已修改以添加 Application Insights

使用npm Install

安装必要的包

在开发模式下运行应用程序。 Npm start

在 Azure 门户中检查您的应用洞察数据

为 Github 个项目参考 here。

参考here在env文件中添加Instrumentation密钥

使用 Application Insights 做出反应

React with Application Insights

reactjs

typescript

azure-application-insights