Using Application Insights with NextJS 13 app router, client and server-side

[jorupp]

Summary

I have a NextJS 13 application using the app router, and am trying to configure Application Insights to monitor both the client and server side of this application.

In NextJS 12 applications, it's just been a matter of adding some client-side code like this:

    const reactPlugin = new ReactPlugin();
    const appInsights = new ApplicationInsights({
        config: {
            connectionString: connectionString,
            enableAutoRouteTracking: true, // we don't have a browserHistory to pass to this, so it'll have to use automatic route tracking
            extensions: [reactPlugin],
            extensionConfig: {
                [reactPlugin.identifier]: {},
            },
        },
    });
    appInsights.loadAppInsights();
    appInsights.trackPageView(); // Manually call trackPageView to establish the current user/session/pageview

And some server-side code like this:

    appInsights
        .setup(process.env.APPLICATIONINSIGHTS_CONNECTION_STRING!)
        .setAutoDependencyCorrelation(true)
        .setAutoCollectRequests(true)
        .setAutoCollectPerformance(true, true)
        .setAutoCollectExceptions(true)
        .setAutoCollectDependencies(true)
        .setAutoCollectConsole(true, true) // collect console.log calls too
        .setUseDiskRetryCaching(true)
        .setSendLiveMetrics(true)
        .setDistributedTracingMode(appInsights.DistributedTracingModes.AI);

    appInsights.start();

So far, I've hit the following issues:

1. error ./node_modules/applicationinsights-native-metrics/build/Release/native_metrics.node Module parse failed: Unexpected character '�' (1:2)
2. Critical dependency: the request of a dependency is an expression in node_modules/@opentelemetry/instrumentation/build/src/platform/node/instrumentation.js
3. Can't resolve '@azure/functions-core' in '<...>\node_modules\applicationinsights\out\AutoCollection'
4. Calls from a 'use client' component to a function exported from a 'use server' file are using GET instead of POST.

1-3 I was able to avoid by overriding webpack in next.config.js to use webpack.NormalModuleReplacementPlugin to supply dummy implementations of applicationinsights-native-metrics, @opentelemetry/instrumentation, and @azure/functions-core. All three of those appear to be due to Next/Webpack looking at require() calls in modules, even if those are in a try/catch or hidden behind a conditional.

4 though is causing me some problems. I assume it's something related to whatever Application Insights does to track fetch calls as dependencies, but I don't understand enough of what magic Next is doing to make this 'use client' -> 'use server' magic happen to debug why AppInsights is breaking things.

Anyone had luck setting up NextJS 13 w/ app router w/ Application Insights client+server monitoring?

Additional information

`next info`:


    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Enterprise
    Binaries:
      Node: 18.17.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.12
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: standalone

### Example

_No response_

[jorupp]

It looks to me like the fetch hook that Application Insights installs (https://github.com/microsoft/ApplicationInsights-JS/blob/c6c27fc3b5fe0e7743ace5cd5180581fb0b808f5/extensions/applicationinsights-dependencies-js/src/ajax.ts#L662) calls, where a falsy input (ie. '' like is used for server actions)
https://github.com/microsoft/ApplicationInsights-JS/blob/c6c27fc3b5fe0e7743ace5cd5180581fb0b808f5/extensions/applicationinsights-dependencies-js/src/ajax.ts#L413 is treated as "not calling fetch", so an undefined is returned to be used as the second arg for the real fetch call, which loses headers, body, and method, causing it to make a GET with no data instead of the intended post.

[jorupp]

So, the conflict is between these lines of code:

• next.js/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts

  Line 51 in 14145c8

  const res = await fetch('', {

• https://github.com/microsoft/ApplicationInsights-JS/blob/c6c27fc3b5fe0e7743ace5cd5180581fb0b808f5/extensions/applicationinsights-dependencies-js/src/ajax.ts#L413

[jorupp]

Filed microsoft/ApplicationInsights-JS#2149 with the AI SDK since that seems to be incorrect behavior - https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters doesn't say anything about an empty string being invalid. Though I figure it's rare to use fetch this way for this bug to have existed this long in the AI SDK.

[jorupp]

PR accepted for the microsoft/ApplicationInsights-JS#2149 issue - fix should be in the next release of the v2 and v3 client-side SDKs.

[shansanira]

Hey @jorupp I faced this issue when I tried to implement the app-insight with nextJS 13 app router,

TypeError: Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

Can I know the file structure you used for yours, should the ApplicationInsights config be inside the instrumentation.ts file they explain here?

[jorupp]

@shansanira I ran into issues loading it from instrumentation.ts, especially with NextJS 13.4. Part of my issue was re: multiple processes - since 13.5 moves away from that, so it's likely to work better there now, though you may still have some issues re: the library being loaded via webpack.

What I did instead (with NextJS 13.5) was loading the server part if the tracking using https://www.npmjs.com/package/applicationinsights directly from a custom server.js (so I could "hide" it from webpack), and loading the client part of this from a 'use client' component using https://www.npmjs.com/package/@microsoft/applicationinsights-web and https://www.npmjs.com/package/@microsoft/applicationinsights-react-js.

[CMeeg]

@jorupp I'm just looking at adding App Insights to a Next 13 app and stumbled across this discussion. I thought I would add another possible option for monitoring on the server is using OpenTelemetry.

The app I'm adding it to is just the create next app output so I don't have anything "real world" to test this with yet, but I can at least see data coming through into app insights OK by using the Azure Monitor OpenTelemetry library from inside instrumentation.ts so it's something I'm going to continue working with for now.

Here's the commit where I added it to my app if you're interested - no worries if not, I just thought I would add to this discussion as it was good to see other people working on this problem too! If you do look into it and have some thoughts it'd be great to hear what you think.

On the client I think I will do as you suggested with a client component and the @microsoft/applicationinsights-* libraries. I don't suppose you have your implementation in a public-facing repo anywhere that I can take a look at?

[jorupp]

...another possible option for monitoring on the server is using OpenTelemetry.

I saw that, and I've been meaning to look at that too, but haven't gotten a chance yet. The interesting part will be what will be required to hook up full dependency monitoring with that. I'm interested in hearing your experience as you get further with it. With the AppInsights Node SDK, I specifically had issues with the way some of the Azure SDK's dependencies were being tracked - ie. they weren't. The Node AppInsights SDK relies on monkey-patching something with OpenTelemetry I think (been a few days, may be wrong about this) in order to hook requests sent by something from @azure-core I think (again, may be wrong about this). I hit a wall there and just left it for the moment.

I just thought I would add to this discussion as it was good to see other people working on this problem too! If you do look into it and have some thoughts it'd be great to hear what you think.

Thanks for sharing - that's way less code than what I ended up with :)

On the client I think I will do as you suggested with a client component and the @microsoft/applicationinsights-* libraries. I don't suppose you have your implementation in a public-facing repo anywhere that I can take a look at?

Unfortunately not. Though I may have overcomplicated it a bit (especially if you don't hit the hot-reload-reinit issue I was on 13.4.19), but it was a server component (wrapping my app) that called the client provider component. Using that pattern let me avoid needing a NEXT_PUBLIC_ prefix and get it's value at runtime instead of build-time - https://gist.github.com/jorupp/97bfcb4b00a2e6278e697aa14fd257a1.

I meant to sit down and try to get a simple sample running somewhere, plug in several of the Azure SDKs, and try to get it all figured out there, but haven't gotten the chance yet.

[shansanira]

take a look at this sample implementation guys. codesandbox.
Try and change the connectionString. I think it's working, let me know if it makes sense. I'm pretty new to Azure, and trying to figure out how to test my implementation with the application-insight.

[CMeeg]

@jorupp After doing a bit more reading it seems that the Azure Otel package does include instrumentation for some dependencies, but as my app is not "real world" I don't use any of the things listed so I'm not able to verify if this actually works as advertised! If not it seems you can add community instrumentation packages or go custom, but again I've not tried either.

That doc did also mention that applicationinsights v3 uses the Otel package internally, but also provides some automated collection of logs and allows you to use the TelemetryClient for tracking custom events, exceptions and logs.

So for now I've decided to stick with applicationinsights v3 as it is collecting the data I need and will allow me to write a simple logger for capturing server side logs and events via wrapping TelemetryClient. I've tested the TelemetryClient by logging exceptions and events from a page route and that does work as advertised!

Thanks for sharing the Gist - I will take a look at that as I am going to tackle client side next, but maybe that's for another day!

@shansanira Thanks for the code sample. It's a different approach to what I've gone for, but to be honest I think if it's working for you and you're getting the metrics that you need for your app I would stick with it. I can't say at this point what the "best" approach is and based on this discussion it seems there are many questions still to be answered! Plus, the applicationinsights v3 package I've switched to using is in a beta state so is fine for my template app, but might not be ideal if your app is in production. There are limitations that may or may not be an issue for you.

[CMeeg]

@jorupp Thanks again for that Gist - that really helped me get the client side monitoring in place pretty painlessly. I think I'm finally in a good place on client and server now. Hope you've managed to do the same.

It seems maybe timing is not on our side with some of these packages going through some fairly significant changes at the moment (especially the node one) and there not being (m)any examples of using them with Next 13. This discussion has been very helpful though so thank you.

[mike-jarosch-aw]

@jorupp I am looking to setup AppInsights in a NextJS 12 app, where do you initialize the server side analytics?

[jorupp]

I don't have access to any of the codebase of any of the Next 12 apps I worked on, but I think it was just in something high up, like app.js or the like, probably inside a if (typeof window === 'undefined')

[cherealnice]

I am adding Application Insights to my nextjs13+ app and for the client side, it seems to work to render a component like this inside my main layout:

"use client";

import { useEffect } from "react";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
import { ReactPlugin } from "@microsoft/applicationinsights-react-js";
import { ClickAnalyticsPlugin } from "@microsoft/applicationinsights-clickanalytics-js";

export function AppInsights() {
  useEffect(() => {
    const reactPlugin = new ReactPlugin();
    const clickPluginInstance = new ClickAnalyticsPlugin();
    const clickPluginConfig = {
      autoCapture: true,
    };
    const appInsights = new ApplicationInsights({
      config: {
        connectionString: process.env.NEXT_PUBLIC_APPLICATION_INSIGHTS_CONNECTION_STRING,
        extensions: [reactPlugin, clickPluginInstance],
        extensionConfig: {
          [reactPlugin.identifier]: {},
          [clickPluginInstance.identifier]: clickPluginConfig,
        },
      },
    });
    appInsights.loadAppInsights();

    return () => {
      // Not sure if this is needed, or if there's more I should do here
      appInsights.unload();
    };
  }, []);

  return null;
}

[cherealnice]

I wound up making this return a provider

"use client";

import { ReactNode, useEffect } from "react";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
import { ReactPlugin, AppInsightsContext } from "@microsoft/applicationinsights-react-js";
import { ClickAnalyticsPlugin } from "@microsoft/applicationinsights-clickanalytics-js";

export function AppInsightsProvider({ children }: { children: ReactNode }) {
  const reactPlugin = new ReactPlugin();
  useEffect(() => {
    const clickPluginInstance = new ClickAnalyticsPlugin();
    const clickPluginConfig = {
      autoCapture: true,
    };
    const appInsights = new ApplicationInsights({
      config: {
        connectionString: process.env.NEXT_PUBLIC_APPINSIGHTS_CONNECTION_STRING,
        extensions: [reactPlugin, clickPluginInstance],
        extensionConfig: {
          [reactPlugin.identifier]: {},
          [clickPluginInstance.identifier]: clickPluginConfig,
        },
      },
    });
    appInsights.loadAppInsights();

    return () => {
      appInsights.unload();
    };
  }, []);

  return <AppInsightsContext.Provider value={reactPlugin}>{children}</AppInsightsContext.Provider>;
}