search

Azure / static-web-apps

Azure Static Web Apps. For bugs and feature requests, please create an issue in this repo. For community discussions, latest updates, kindly refer to the Discussions Tab. To know what's new in Static Web Apps, visit https://aka.ms/swa/ThisMonth
https://aka.ms/swa
MIT License
320 stars 53 forks source link

Preloading app insights in nextjs #1165

Open georgibakken opened 1 year ago

georgibakken commented 1 year ago

Describe the bug

I am trying to enable logging with nextjs and app insights, where I have followed this guide.

If I run the application locally with preloading app insights , I can see the improved logging in app insight from localhost. See screenshot below.

However, after deploying, I can't see the same type of logs as from my localhost.

This is my start script

"start": "node --require ./load-appinsights.js .next/standalone/server.js",

Have also tried with

node --require ./load-appinsights.js node_modules/next/dist/bin/next start

To Reproduce Steps to reproduce the behavior:

  1. Follow the app insight guide
  2. Deploy app to azure static web app
  3. Go to app insights
  4. Call API endpoint in the app
  5. See no API requests in app insights

Expected behavior Would expect to see the API request, as the screenshot below from localhost.

Screenshots image

Additional context Add any other context about the problem here.

mateubo commented 10 months ago

@georgibakken were you able to find a solution for this? I'm facing the same problem.

georgibakken commented 10 months ago

@mateubo : No unfortunately not, seems like the article resources are a bit out of date. Or there needs to be an example on how to deploy it to static web apps.

rbourdon commented 9 months ago

I was able to preload it using Next.js's instrumentation.

For example

load-appinsights.js

const appInsights = require("applicationinsights");
appInsights
  .setup(process.env.APPINSIGHTS_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();

instrumentation.ts

export async function register() {
  if (process.env.NEXT_RUNTIME === "nodejs") {
    await import("src/utils/load-appinsights.js");
  }
}

next.config.js

//...rest of your config
experimental: {
    instrumentationHook: true,
}
x1c0 commented 1 month ago

@rbourdon ty for the config. how do you test this locally? is it possible?

I have this when running next dev

image