--- title: "Azure Application Insights using Javascript SDK in Next.js" url: "https://www.bekk.christmas/post/2022/15/azure-application-insights-using-javascript-sdk-in-next-js" authors: ["Toralf Frich"] published: "2022-12-15" updated: "2024-11-07T13:05:28Z" language: "en-US" type: "article" tags: ["JavaScript", "React"] keywords: ["Azure", "Application Insights", "Nextjs", "Javascript SDK"] --- # Azure Application Insights using Javascript SDK in Next.js Do you need help with the Javascript SDK for Application Insights? Look no further! This guide will help you go from zero to hero in no time 📈 ## In short Application Insights can be wired into a Next.js app with the JavaScript SDK by creating a client-side initialization flow that only runs once and by passing the connection string from server-side props to the component that needs it. The result is a setup where you can initialize the SDK safely in Next.js and then track things like page views. - **For:** Next.js developers who want to use Application Insights - **Good to know beforehand:** Basic Next.js, React hooks, and environment variables _AI-generated_ Enabling the [Javascript SDK for enabling Application Insights](https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript?tabs=snippet) in a [Next.js](https://nextjs.org/) application is not as easy as it may sound. This guide will show you how to do it (so that you don’t have to spend as much time as I did on it) ⏳. Next.js has a [problem](https://github.com/vercel/next.js/discussions/15341) with not enabling execution of code prior to starting your application (unless you create your own custom server). Hence, there are no obvious files to place the code that is needed to create an Application Insights-instance in you app. In this article, a small workaround is presented along with a step-by-step guide on how to enable Application Insights in your Next.js application 🚶. ### Step-by-step guide🚶 1. Install `@microsoft/applicationinsights-web` using npm or yarn 2. Create a file where you can initialise and retrieve an _appInsights-_instance. 3. Create a component that uses a _useEffect_ to only initialise the appInsights_-_instance once. 4. Retrieve the environment variables needed to initialise the appInsights_-_instance and ensure that the instance is set up the first time a user navigates to any application page. 5. Track what you want! 🎉 #### Step 1: Install `@microsoft/applicationinsights-web` in node_modules using npm or yarn (I use yarn below) 💻: ``` yarn add @microsoft/applicationinsights-web ``` #### Step 2: Create a file that initialises an _appInsights_-instance and returns the initialised appInsights-instance when you need it for tracking. Below is the code that is given to us in [the azure documentation](https://learn.microsoft.com/en-us/azure/azure-monitor/app/javascript?tabs=snippet) 📄 ```tsx import { ApplicationInsights } from '@microsoft/applicationinsights-web' const appInsights = new ApplicationInsights({ config: { connectionString: 'Copy connection string from Application Insights Resource Overview' /* ...Other Configuration Options... */ } }); appInsights.loadAppInsights(); ``` But! Where to place this code? If you place it in __app.js,_ it will be run every time a file in the _pages_ directory is loaded, moreover, creating new appInsights instances all the time! This is bad. We want it to run only once (because otherwise we would be creating a lot of unnecessary appInsights-instances) 🤔. Hence, we create this modified version where it is possible to run _initAI_ to initialise the appInsights-instance and _get_ the appInsights-instance by running _getAppInsights_: ```tsx import { ApplicationInsights } from '@microsoft/applicationinsights-web'; let ai: ApplicationInsights; export const ai = () => { const initAI = (cS: string) => { ai = new ApplicationInsights({ config: { connectionString: cS } }); ai.loadAppInsights(); }; return { ai, initAI }; }; export const getAppInsights = () => ai; ``` #### Step 3: Ensure that we only initialise the appInsights-instance once. We do this by making use of a _useEffect,_ creating a file with a react component looking something like below. ```tsx import { useEffect, useState } from 'react'; import { ai } from './appInsightsSetup'; interface AppInsightsProps { connectionString?: string; children?: React.ReactNode; } const AppInsights = ({ children, connectionString }: AppInsightsProps) => { const [activated, setActivated] = useState(false); useEffect(() => { if (!activated && connectionString) { ai().initAI(connectionString); setActivated(true); } }, [activated, connectionString]); return <>{children}; }; ``` #### Step 4: Retrieving the connectionString from the _environment-variables_ so that the appInsights-instance can be initialised. As all the code that we have written is client-side, we do not have access to the connectionString (as it is most likely an [environment variable](https://en.wikipedia.org/wiki/Environment_variable)). Hence, we need to retrieve it and then drill it down to the component and the functions that we have created—allowing us to initialise the appInsights-instance 🙌. Below, we use Next.Js’ _getInitialProps_ to retrieve the connectionString-environment-variable (this might change with the introduction of [Next.Js 13](https://nextjs.org/blog/next-13)). ```tsx import App from 'next/app'; import AppInsightsProvider from '../utils/appInsights/AppInsightsProvider'; function MyApp({ Component, pageProps, environment, cS }) { return (
); } MyApp.getInitialProps = async (appContext) => { const appProps = await App.getInitialProps(appContext); return { ...appProps, cS: process.env.CONNECTION_STRING as string; }; }; export default MyApp; ``` #### Step 5: That should be it! You can now track whatever you want. E.g., tracking a page view 📄 👀 ```tsx import { getAppInsights } from 'utils/appInsights/appInsightsSetup'; const appInsights = getAppInsights(); appInsights.trackPageView({ name: page }); ``` ### The end That should be it. And your resulting file structure should look something like this: ``` - Pages - _app.js - utils - appInsights - appInsightsHelpers.ts - appInsightsSetup.ts - AppInsights.tsx ``` Bye 👋