如何将 Azure 应用程序见解与 nextjs 应用程序结合使用

Question

我想将 Azure 应用程序洞察与 nextjs 一起使用，但无法做到这一点，有人可以帮助我吗？

Answer 1

您可以通过使用默认的 React 插件将 azure app Insight 与 nextjs 结合使用，并且您必须为 nextjs 创建自己的历史对象，在页面加载后您可以使该历史对象 = window.history 对象。之后，您可以借助该历史对象启动应用程序洞察。这将解决您的问题。我写了一篇关于相同内容的文章，您可以查看此链接以供参考。 https://medium.com/@nirbhayluthra/integrating-azure-application-insights-with-next-js-the-easy-way-afc83596afad

Answer 2

我想将 Azure 应用程序洞察与 nextjs 一起使用，但无法做到这一点，有人可以帮助我吗？

您可以使用

next-applicationinsights

（由 goenning 创建的包）通过 Azure Application Insights 自动跟踪 Next.js 应用程序上的页面视图、依赖项调用和异常，请尝试按照

 中的安装步骤和代码片段进行操作next-applicationinsights

：

安装：

npm install next-applicationinsights

示例：

import App, { Container } from 'next/app'
import { withApplicationInsights } from 'next-applicationinsights';
 
class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props
 
    return (
      <Container>
        <Component {...pageProps} />
      </Container>
    )
  }
}
 
export default withApplicationInsights({ 
  instrumentationKey: 'YOUR_KEY_GOES_HERE',
  isEnabled: true //process.env.NODE_ENV === 'production'
})(MyApp)

您可以参考Application Insights 使用 NextJS 、在 Next.js 中启用 Node.js Application Insights SDK 和如何在 Nextjs 中使用该库？

Answer 3

从13.4.14版本开始，NextJS创建了多个用于路由、页面渲染等的进程。并且appInsights设置需要在instrumentation hook中实现。

https://nextjs.org/docs/app/building-your-application/optimizing/instrumentation

这是一个使用示例https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry