CODEWITHSUNDEEP
azurenext.jsazure-application-insights
akshay bhatia
akshay bhatia

Reputation: 73

How to use Azure application insights with nextjs app

I want to use Azure app insight with nextjs but unable to do it , can anyoe help me with that?

Upvotes: 6

Views: 11359

Answers (4)

Mateen Kiani
Mateen Kiani

Reputation: 3303

Create ApplicationInsightsService.js file like this:

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';

const reactPlugin = new ReactPlugin();
const appInsights = new ApplicationInsights({
  config: {
    connectionString: 'instrumentationKey=your-key',
    extensions: [reactPlugin],
    enableAutoRouteTracking: true,
    disableAjaxTracking: false,
    autoTrackPageVisitTime: true,
    enableCorsCorrelation: true,
    enableRequestHeaderTracking: true,
    enableResponseHeaderTracking: true,
  },
});
appInsights.loadAppInsights();

appInsights.addTelemetryInitializer((env) => {
  env.tags = env.tags || [];
  env.tags['ai.cloud.role'] = 'testTag';
});

export { reactPlugin, appInsights };

wrap your app.js / layout.js file with provider:

export default function Layout({ children, params: { lang } }) {
  return (
    <html lang={lang}>
      <body>
        <AppInsightsContext.Provider value={reactPlugin}>
          {children}
        </AppInsightsContext.Provider>          
      </body>
    </html>
  );
}

To track custom events:

import {
  useAppInsightsContext,
  useTrackEvent,
} from '@microsoft/applicationinsights-react-js';

export default function Message() {
 const appInsights = useAppInsightsContext();
 const trackSendMessageEvent = useTrackEvent(
   appInsights,
   'send_message_event',
   { message: '' },
   true,
 );

 const sendMessage = () => {
   trackSendMessageEvent({ message: 'updated message' });
 }

  return (
    <button onClick={sendMessage}>sendMessage</button>
  );
}

Upvotes: 0

Igor Pchelko
Igor Pchelko

Reputation: 318

From the version 13.4.14 NextJS creates multiple processes for routing, page rendering etc. And appInsights setup needs to be implemented in the instrumentation hook.

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

Here is an usage example https://github.com/vercel/next.js/tree/canary/examples/with-opentelemetry

Upvotes: 1

Ecstasy
Ecstasy

Reputation: 1864

I want to use Azure app insight with nextjs but unable to do it , can anyoe help me with that?

You can use next-applicationinsights (package created by goenning) to automatically track page views, dependency calls, and exceptions on your Next.js applications by using Azure Application Insights, try following installation step and code snippet from next-applicationinsights:

Installation:

npm install next-applicationinsights

Example:

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)

You can refer to Application Insights Usage with NextJS , Enabling the Node.js Application Insights SDK in Next.js and How to use the library with Nextjs?

Upvotes: 3

YouKnowWho1801
YouKnowWho1801

Reputation: 86

You can use azure app insight with nextjs by using the default react plug-in and you have to create your own history object for nextjs , after the page loads you can make that history object = window.history object. after that you can initiate app insight with the help of that history object . This will solve your problem. I wrote an article regarding the same and you can see this link for refernce. https://medium.com/@nirbhayluthra/integrating-azure-application-insights-with-next-js-the-easy-way-afc83596afad

Upvotes: 7

Related Questions