Nuxt•10mo ago

Is anyone using application insights with Nuxt 3?

Does anyone have applications insights working with Nuxt to track and log on the client and server? I'm having problems to setup it for the server and I'm not sure if it's related to the fact that the package doens't have support for ESM I have created a nitro plugin, but when running the build preview I get an error saying that cannot find the module 'applicationinsights' This is how we import the module and it's works on our Vue 3 SSR project

import { createRequire } from 'module';
// common js import, of appinsights. no esm support for now
const isomorphicRequire = createRequire(import.meta.url);
const appInsights = isomorphicRequire('applicationinsights');

import { createRequire } from 'module';
// common js import, of appinsights. no esm support for now
const isomorphicRequire = createRequire(import.meta.url);
const appInsights = isomorphicRequire('applicationinsights');

` Thanks

8 Replies

Victor NevesOP•10mo ago

here's the full code

import { createRequire } from 'module';
// common js import, of appinsights. no esm support for now
const isomorphicRequire = createRequire(import.meta.url);
const appInsights = isomorphicRequire('applicationinsights');

export default defineNitroPlugin(() => {
    if (!process.client) {
        // Access instrumentation key from environment variable
        const instrumentationKey = process.env.VITE_APPINSIGHTS_CONNECTION_STRING;

        if (!instrumentationKey) {
            console.warn('Application Insights instrumentation key not found.');
            return;
        }

        // Initialize appInsights on server-side
        appInsights.setup(instrumentationKey).setAutoCollectConsole(true, true).start();

        // Add custom telemetry processor (optional)
        appInsights.defaultClient.addTelemetryProcessor((envelope, context) => {
            const user = context['correlationContext']?.user;

            if (user) {
                const data = envelope.data.baseData;

                for (const [key, value] of Object.entries(user)) {
                    data.properties[key] = value;
                }
            }

            return true;
        });
    }
});

import { createRequire } from 'module';
// common js import, of appinsights. no esm support for now
const isomorphicRequire = createRequire(import.meta.url);
const appInsights = isomorphicRequire('applicationinsights');

export default defineNitroPlugin(() => {
    if (!process.client) {
        // Access instrumentation key from environment variable
        const instrumentationKey = process.env.VITE_APPINSIGHTS_CONNECTION_STRING;

        if (!instrumentationKey) {
            console.warn('Application Insights instrumentation key not found.');
            return;
        }

        // Initialize appInsights on server-side
        appInsights.setup(instrumentationKey).setAutoCollectConsole(true, true).start();

        // Add custom telemetry processor (optional)
        appInsights.defaultClient.addTelemetryProcessor((envelope, context) => {
            const user = context['correlationContext']?.user;

            if (user) {
                const data = envelope.data.baseData;

                for (const [key, value] of Object.entries(user)) {
                    data.properties[key] = value;
                }
            }

            return true;
        });
    }
});

manniL•10mo ago

I'd use @chakraecho's module for that - https://github.com/huang-julien/nitro-applicationinsights

GitHub

GitHub - huang-julien/nitro-applicationinsights: Application insigh...

Application insights plugin for nitro. Contribute to huang-julien/nitro-applicationinsights development by creating an account on GitHub.

Victor NevesOP•10mo ago

thanks @manniL / TheAlexLichter

Julien•10mo ago

@Victor Neves there's also a nuxt integration with client + server support : nuxt-applicationinsights

Victor NevesOP•10mo ago

thanks @chakraecho @chakraecho If I correctly understood, the one that @manniL / TheAlexLichter mentioned is a module just for the server side, while the one that you mention can handle server and client, right?

Julien•10mo ago

yup, nuxt-applicationinsights just provides nitro-applicationinsights + @microsoft/application-insihgts-web

Victor NevesOP•10mo ago

@chakraecho I think I have checked everywhere but I don't see where/how I pass the instrumentationKey and other parameters as IngestionEndpoint and LiveEndpoint ApplicationInsights:An invalid instrumentation key was provided. There may be resulting telemetry loss [ undefined ]

Julien•10mo ago

We currently only accept connection strings. You can set it into the nuxt config applicationInsights.connectionString

Gaming

Programming

Is anyone using application insights with Nuxt 3?