I have set up application insigths in next js application, but for some reason I see a lot of noise, as calls to QuickPulseService are tracked in logs:

This is my setup (simplified for clarity):

ApplicationInsights.tsx - I use it in layout.tsx:

const useApplicationInsightsInstance = ({
  enabled,
  connectionString,
}: ApplicationInsightsProps) => {
  const hasMounted = useHasMounted();
  const { status, data } = useSession();

  const [appinsightsData, setAppinsightsData] = useState<{
    reactPlugin: ReactPlugin | null;
    AppInsightsContext: AppInsightsReactContext | null;
  }>({
    reactPlugin: null,
    AppInsightsContext: null,
  });

  const initialize = async () => {
    if (!connectionString || !hasMounted || !enabled) {
      return null;
    }
  const reactPlugin = new AppInsightsJs.ReactPlugin();

  const instance = new ApplicationInsights({
    config: {
      autoTrackPageVisitTime: true,
      enableAutoRouteTracking: true,
      enableUnhandledPromiseRejectionTracking: false,
      isStorageUseDisabled: true,
      loggingLevelConsole: 1,
      disableFetchTracking: false,
      disableAjaxTracking: true,
      connectionString: connectionString,
      extensions: [reactPlugin],
    },
  });
  instance.loadAppInsights();
  setAppinsightsData({
    reactPlugin,
    AppInsightsContext: AppInsightsJs.AppInsightsContext,
  });
  };

  useEffect(() => {
    if (hasMounted) {
      initialize();
    }
  }, [hasMounted, status]);

  return appinsightsData;
};

const AppInsightsProvider = ({
  enabled,
  connectionString,
  children,
}: {
  enabled: boolean;
  connectionString: string | undefined;
  children: React.ReactNode;
}) => {
  const { reactPlugin, AppInsightsContext } = useApplicationInsightsInstance({
    connectionString,
    enabled,
  });

  if (!AppInsightsContext || !reactPlugin || !enabled) return <>{children}</>;

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

export default AppInsightsProvider;

and applicationInsightsInstrumentation.ts - used in instrumentation.ts:

const httpInstrumentationConfig: HttpInstrumentationConfig = {
  enabled: true,
  ignoreIncomingRequestHook: (request: IncomingMessage) => {
    return request.method &&
      ['OPTIONS', 'HEAD', 'TRACE'].includes(request.method)
      ? true
      : false;
  },

};

export async function register() {
    if (!appInsightsConnectionString) return;

    const config: AzureMonitorOpenTelemetryOptions = {
      azureMonitorExporterOptions: {
        connectionString: appInsightsConnectionString,
      },
      resource: new Resource({
        [ATTR_SERVICE_NAME]: appInsightsServiceName,
      }),
      enableLiveMetrics: true,
      enableStandardMetrics: true,
      samplingRatio: SAMPLING_RATE,
      instrumentationOptions: {
        http: httpInstrumentationConfig,
      },
      browserSdkLoaderOptions: { enabled: false },
      enableTraceBasedSamplingForLogs: true,
    };

    useAzureMonitor(config);
}

I have set up application insigths in next js application, but for some reason I see a lot of noise, as calls to QuickPulseService are tracked in logs:

This is my setup (simplified for clarity):

ApplicationInsights.tsx - I use it in layout.tsx:

const useApplicationInsightsInstance = ({
  enabled,
  connectionString,
}: ApplicationInsightsProps) => {
  const hasMounted = useHasMounted();
  const { status, data } = useSession();

  const [appinsightsData, setAppinsightsData] = useState<{
    reactPlugin: ReactPlugin | null;
    AppInsightsContext: AppInsightsReactContext | null;
  }>({
    reactPlugin: null,
    AppInsightsContext: null,
  });

  const initialize = async () => {
    if (!connectionString || !hasMounted || !enabled) {
      return null;
    }
  const reactPlugin = new AppInsightsJs.ReactPlugin();

  const instance = new ApplicationInsights({
    config: {
      autoTrackPageVisitTime: true,
      enableAutoRouteTracking: true,
      enableUnhandledPromiseRejectionTracking: false,
      isStorageUseDisabled: true,
      loggingLevelConsole: 1,
      disableFetchTracking: false,
      disableAjaxTracking: true,
      connectionString: connectionString,
      extensions: [reactPlugin],
    },
  });
  instance.loadAppInsights();
  setAppinsightsData({
    reactPlugin,
    AppInsightsContext: AppInsightsJs.AppInsightsContext,
  });
  };

  useEffect(() => {
    if (hasMounted) {
      initialize();
    }
  }, [hasMounted, status]);

  return appinsightsData;
};

const AppInsightsProvider = ({
  enabled,
  connectionString,
  children,
}: {
  enabled: boolean;
  connectionString: string | undefined;
  children: React.ReactNode;
}) => {
  const { reactPlugin, AppInsightsContext } = useApplicationInsightsInstance({
    connectionString,
    enabled,
  });

  if (!AppInsightsContext || !reactPlugin || !enabled) return <>{children}</>;

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

export default AppInsightsProvider;

and applicationInsightsInstrumentation.ts - used in instrumentation.ts:

const httpInstrumentationConfig: HttpInstrumentationConfig = {
  enabled: true,
  ignoreIncomingRequestHook: (request: IncomingMessage) => {
    return request.method &&
      ['OPTIONS', 'HEAD', 'TRACE'].includes(request.method)
      ? true
      : false;
  },

};

export async function register() {
    if (!appInsightsConnectionString) return;

    const config: AzureMonitorOpenTelemetryOptions = {
      azureMonitorExporterOptions: {
        connectionString: appInsightsConnectionString,
      },
      resource: new Resource({
        [ATTR_SERVICE_NAME]: appInsightsServiceName,
      }),
      enableLiveMetrics: true,
      enableStandardMetrics: true,
      samplingRatio: SAMPLING_RATE,
      instrumentationOptions: {
        http: httpInstrumentationConfig,
      },
      browserSdkLoaderOptions: { enabled: false },
      enableTraceBasedSamplingForLogs: true,
    };

    useAzureMonitor(config);
}

• azure
• next.js
• azure-application-insights

• To reduce noise from QuickPulseService logs, you can either disable enableLiveMetrics in your configuration(enableLiveMetrics: false) or modify ignoreIncomingRequestHook to filter out requests to QuickPulseService, ensuring they are not tracked while keeping other telemetry intact. – Sirra Sneha Commented Mar 19 at 11:31
• @SirraSneha good idea, but I needed to change ignoreOutgoingRequestHook, so it looks like this: ignoreOutgoingRequestHook: (request: RequestOptions) => { if (request.path?.includes('QuickPulseService')) { return true; } return false; } And looks like it fexes a problem. Thanks a lot for advice! – JoeDoe Commented Mar 19 at 14:41
• can I post this as an answer for the benefit of the SO community? – Sirra Sneha Commented Mar 19 at 15:01
• @SirraSneha I was happy too fast, and unfortunatelly it does not fix that, I just unwillingly changed appinsights connection string, so it was logged to different instance. – JoeDoe Commented Mar 19 at 15:27
• please write the code like this and try – Sirra Sneha Commented Mar 19 at 16:07

1 Answer 1

I see a lot of noise, as calls to QuickPulseService are tracked in logs

This happens because Live Metrics Stream is enabled, which continuously sends telemetry data to Azure for real-time monitoring.

• If you don’t need real-time telemetry, you can disable Live Metrics by setting enableLiveMetrics: false in your OpenTelemetry configuration.
• As setting enableAutoRouteTracking: false(mentioned in comments) removes QuickPulseService calls but stops page views, I've manually tracked page views using appInsights.trackPageView()
• Please refer this Msdoc for better understanding of Live metrics.

Here's the complete code:

import { useEffect, useState } from "react";
import { ApplicationInsights } from "@microsoft/applicationinsights-web";
import { ReactPlugin, AppInsightsContext as AppInsightsReactContext } from "@microsoft/applicationinsights-react-js";
import { useSession } from "next-auth/react";
import { useHasMounted } from "@/hooks/useHasMounted";

interface ApplicationInsightsProps {
  enabled: boolean;
  connectionString: string | undefined;
}

const useApplicationInsightsInstance = ({
  enabled,
  connectionString,
}: ApplicationInsightsProps) => {
  const hasMounted = useHasMounted();
  const { status } = useSession();

  const [appinsightsData, setAppinsightsData] = useState<{
    reactPlugin: ReactPlugin | null;
    AppInsightsContext: typeof AppInsightsReactContext | null;
    instance: ApplicationInsights | null;
  }>({
    reactPlugin: null,
    AppInsightsContext: null,
    instance: null,
  });

  const initialize = async () => {
    if (!connectionString || !hasMounted || !enabled) return;

    const reactPlugin = new ReactPlugin();

    const instance = new ApplicationInsights({
      config: {
        autoTrackPageVisitTime: true,
        enableAutoRouteTracking: false, // Disabled to stop QuickPulseService logs
        enableUnhandledPromiseRejectionTracking: false,
        isStorageUseDisabled: true,
        loggingLevelConsole: 1,
        disableFetchTracking: false,
        disableAjaxTracking: true,
        connectionString: connectionString,
        extensions: [reactPlugin],
      },
    });

    instance.loadAppInsights();
    setAppinsightsData({
      reactPlugin,
      AppInsightsContext: AppInsightsReactContext,
      instance,
    });
  };

  useEffect(() => {
    if (hasMounted) {
      initialize();
    }
  }, [hasMounted, status]);

  useEffect(() => {
    if (appinsightsData.instance) {
      appinsightsData.instance.trackPageView();
    }
  }, [appinsightsData.instance]);

  return appinsightsData;
};

const AppInsightsProvider = ({
  enabled,
  connectionString,
  children,
}: {
  enabled: boolean;
  connectionString: string | undefined;
  children: React.ReactNode;
}) => {
  const { reactPlugin, AppInsightsContext } = useApplicationInsightsInstance({
    connectionString,
    enabled,
  });

  if (!AppInsightsContext || !reactPlugin || !enabled) return <>{children}</>;

  return (
    <AppInsightsContext.Provider value={reactPlugin}>
      {children}
    </AppInsightsContext.Provider>
  );
};
export default AppInsightsProvider;

And also UpdateapplicationInsightsInstrumentation.ts to Filter out outgoing requests to QuickPulseService.

add the below lines in your code to filter out QuickPulseService calls.

const httpInstrumentationConfig: HttpInstrumentationConfig = {
  enabled: true,
  ignoreOutgoingRequestHook: (request: RequestOptions) => {
    return request.path?.includes('QuickPulseService') ? true : false;
  },
};

Complete applicationInsightsInstrumentation.ts:

import { HttpInstrumentationConfig } from "@opentelemetry/instrumentation-http";
import { IncomingMessage } from "http";
import { RequestOptions } from "https";

const httpInstrumentationConfig: HttpInstrumentationConfig = {
  enabled: true,
  ignoreIncomingRequestHook: (request: IncomingMessage) => {
    return request.method &&
      ["OPTIONS", "HEAD", "TRACE"].includes(request.method)
      ? true
      : false;
  },
  ignoreOutgoingRequestHook: (request: RequestOptions) => {
    return request.path?.includes("QuickPulseService") ? true : false;
  },
};
export default httpInstrumentationConfig;

Refer this Msdoc to know how to filter out the specific logs

instrumentation.ts:

import { AzureMonitorOpenTelemetryOptions } from "@azure/monitor-opentelemetry";
import { Resource } from "@opentelemetry/resources";
import { ATTR_SERVICE_NAME } from "@opentelemetry/resources";
import httpInstrumentationConfig from "./applicationInsightsInstrumentation";
import { useAzureMonitor } from "./azureMonitor";

export async function register() {
  if (!appInsightsConnectionString) return;

  const config: AzureMonitorOpenTelemetryOptions = {
    azureMonitorExporterOptions: {
      connectionString: appInsightsConnectionString,
    },
    resource: new Resource({
      [ATTR_SERVICE_NAME]: appInsightsServiceName,
    }),
    enableLiveMetrics: true, 
    enableStandardMetrics: true,
    samplingRatio: 1.0,
    instrumentationOptions: {
      http: httpInstrumentationConfig,
    },
    browserSdkLoaderOptions: { enabled: false },
    enableTraceBasedSamplingForLogs: true,
  };
  useAzureMonitor(config);
}

This will remove QuickPulseService logs while keeping useful telemetry.