How to enable auto tracking of API calls made from Next.js server side?

[chr1s1k]

I have tried to setup the AI Node.js SDK for my Next.js app.

In order to initialize the application library early enough, I followed this article https://medium.com/microsoftazure/enabling-the-node-js-application-insights-sdk-in-next-js-746762d92507.

In Azure Portal, I can see all incoming requests made from the browser, but there are no dependencies related to my API calls made from getServerSideProps method of a Next.js page.

Here's my setup:

package.json

"scripts": {
    "dev": "node --require ./scripts/load-app-insights.js ./node_modules/next/dist/bin/next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

load-app-insights.js

const appInsights = require('applicationinsights')

appInsights
  .setup(process.env.APPLICATIONINSIGHTS_CONNECTION_STRING)
  .setAutoCollectConsole(true)
  .setAutoCollectDependencies(true)
  .setAutoCollectExceptions(true)
  .setAutoCollectHeartbeat(true)
  .setAutoCollectPerformance(true, true)
  .setAutoCollectRequests(true)
  .setAutoDependencyCorrelation(true)
  .setDistributedTracingMode(appInsights.DistributedTracingModes.AI_AND_W3C)
  .setSendLiveMetrics(true)
  .setUseDiskRetryCaching(true)

appInsights.start()

Part of the SSR page:

export const getServerSideProps: GetServerSideProps<IProp> = async () => {
  const boookPromise = await fetch('https://www.anapioficeandfire.com/api/books') // <= This is a server-side API call 
  const books = await boookPromise.json()

  return {
    props: {
      books: books.map((x: { name: string }) => ({ name: x.name })),
      date: new Date().toISOString(),
    },
  }
}

However, in the Azure portal I can see just incoming requests:

How can I enable auto-collecting of outgoing API server-side calls? Is it even possible, or do I have to manually call the trackDependency method from the applicationinsights package?

Versions used:

• applicationinsights: 2.7.2
• next: 12.2.4
• Node.js 18.16.0

[chr1s1k]

Most likely related to #1104 .

[hectorhdzg]

@chr1s1k if you are using native fetch added in node,js 17 then that is why you are not seeing the dependency telemetry, like you mentioned you can manually call trackDependency in this case to generate the telemetry, we do have a backlog task to support native fetch but we haven't had the chance to tackle that one yet.

[kevinwedwards]

@hectorhdzg Is this still outstanding?

I've got a similar issue:
nextjs app (client + app-api)
.net core internal APIs
nextjs client <--> nextJs serverside code <----> .NET Core APIs

I get AppInsights tracing from the three different layers, but no correlation in app insights between the three, so no real 'end to end' correlation.

We're using cross-fetch and fetch-retry (but I believe cross-fetch provides a node-fetch impl vs a native fetch impl, and from my reading that 'should work.'

An additional interesting thing is we leverage FullStory's APIs and those calls, are auto-tracked with duration, call status, etc...

nextJs + cross-fetch + fetch-retry feels like it's breaking the appInsights hooks.

additional note:
I did go down the path of manually calling trackDependency, but wasn't ever able to get correlation across layers.

Also, the domain changes:
public domain (x.y.com) then ends up resolving to MSFT azure domains *.azurewebsites.com

[hectorhdzg]

@kevinwedwards we still do not support fetch requests unfortunately, I'm not familiar with cross-fetch or fetch-retry so I will need to debug to understand what is going on, do you have some sample code I can use to try it out?

[kevinwedwards]

@hectorhdzg
If I understand correctly cross-fetch should provide a node-fetch impl vs 'native fetch' cross-fetch

Essentially nextjs 'client' (using applicationinsights-web sdk) page, makes a request to a node.js (running applicationinsights-node), which then makes a request to a .NET core.

We get telemetry logged in all three areas, but no correlation between the three areas. I'm just not sure what headers need to be manually inserted and/or manipulated at the different layers to correlate requests. Is there are documented suggested manner by which to add/manipulate the required headers?

my code/impl is pretty much identical to @chr1s1k above.

[MadhanKumarasamy]

@kevinwedwards @hectorhdzg
I'm also facing the same auto dependency collection issue for Incremental static regeneration in Next js. I have also used the cross-fetch package but still no dependency calls are logged.

Currently, I'm using the trackTrace to log the dependency calls and My application is hosted on the Nelify server.

Code flow: client --> getStaticProps --> Fetch call to Front door --> CMS.

Do we have any workaround to achieve auto dependency collection?

[JacksonWeber]

@MadhanKumarasamy Would it be possible to test making an HTTP/HTTPS call using the native Node.js HTTP/HTTPS library between your services to determine if correlation works as expected between those services. You may also want to upgrade to the latest version of the Application Insights Node.js SDK as we've moved to an OpenTelemetry approach under the hood. Thank you!