Vue e Nuxt

L’SDK JavaScript ha adattatori facoltativi Vue e Nuxt dalla versione 0.12.0, che espone /vue, /nuxt/client e /nuxt/server.

Le versioni precedenti, fino alla 0.11.4, non hanno questi adattatori: installa @bussolabs/closeyourit-js@^0.12.0 prima di usare la ricetta seguente.

Cosa raccoglie

• Errori del browser dagli eventi Nuxt vue:error e app:error.
• Passaggi di navigazione riusciti, con il modello del percorso e senza i parametri reali.
• Errori Nitro, con un contesto separato per ogni richiesta.
• Durata della funzione e log collegati quando avvolgi esplicitamente una funzione del server.

Questi adattatori non creano tracce OpenTelemetry. Per quel percorso separato, solo lato server, vedi OpenTelemetry. La cronologia di navigazione non equivale al conteggio delle pagine viste.

Plugin del browser

Dichiara le cinque impostazioni pubbliche seguenti in runtimeConfig.public. Qui può stare solo la chiave pubblica. In Nuxt 4 crea app/plugins/monitoring.client.ts; in Nuxt 3 usa la cartella sorgente configurata.

import { init } from '@bussolabs/closeyourit-js'
import { instrumentNuxtClient } from '@bussolabs/closeyourit-js/nuxt/client'

export default defineNuxtPlugin((app) => {
  const config = useRuntimeConfig()
  const client = init({
    endpointUrl: config.public.monitoringEndpoint,
    projectId: config.public.monitoringProject,
    publicKey: config.public.monitoringPublicKey,
    environment: config.public.applicationEnvironment,
    release: config.public.applicationVersion,
    autoInstall: false,
  })
  const monitoring = instrumentNuxtClient(app.hooks, client, useRouter())
  app.vueApp.onUnmount(monitoring.uninstall)
})

L’adattatore conserva la gestione degli errori di Nuxt. Esclude reindirizzamenti e risposte previste con stato 300–499. Usa lo stesso client per eventuali altre raccolte globali, per evitare doppie segnalazioni.

Server Nitro

Questa integrazione richiede Node e Nitro 2. Non copre Edge. Il token segreto resta nell’ambiente del server in esecuzione, fuori da runtimeConfig.public e dalla configurazione di compilazione.

Crea server/utils/monitoring.ts:

import { getClient, init } from '@bussolabs/closeyourit-js'
import { createNitroInstrumentation } from '@bussolabs/closeyourit-js/nuxt/server'

export function getMonitoring() {
  const client = getClient() ?? init({
    endpointUrl: process.env.CLOSEYOURIT_ENDPOINT_URL,
    projectId: process.env.CLOSEYOURIT_PROJECT_ID,
    token: process.env.CLOSEYOURIT_TOKEN,
    environment: process.env.NODE_ENV,
    release: process.env.APP_VERSION,
    autoInstall: false,
  })
  return createNitroInstrumentation(client)
}

Collega gli eventi all’avvio del server in server/plugins/monitoring.ts:

import { getMonitoring } from '../utils/monitoring'

export default defineNitroPlugin((app) => {
  const monitoring = getMonitoring()
  monitoring.install(app.hooks)
  app.hooks.hook('close', () => monitoring.uninstall())
})

Mantieni l’SDK esterno nella configurazione nitro esistente, così i suoi moduli condividono lo stesso client: externals: { external: ['@bussolabs/closeyourit-js'] }.

Avvolgi le funzioni che richiedono log collegati o durata. Per server/api/items/[id].ts:

import { getMonitoring } from '../../utils/monitoring'

export default defineEventHandler((event) =>
  getMonitoring().withRequest(event, '/api/items/:id', async () => {
    return { ok: true }
  }),
)

Usa un modello fisso del percorso, mai un indirizzo con valori dell’utente. La durata finisce quando termina la funzione, non quando viene inviato l’intero flusso della risposta. I soli eventi non misurano tutta la generazione delle pagine sul server. Per gli errori Vue gestiti durante quella fase, inoltra vue:error da un plugin Nuxt solo server a app.ssrContext?.event.captureError(error, { tags: ['vue'] }).

Verifica e rimozione

Invia un errore di prova dal browser e uno dal server. Controlla che siano conservati nel progetto giusto, con la versione corretta e senza valori riservati. Un invio o una compilazione riusciti non dimostrano da soli il salvataggio.

uninstall() rimuove solo gli eventi collegati dall’adattatore. L’applicazione gestisce ancora il client e deve svuotarne la coda e chiuderlo al proprio arresto. Rimuovi i plugin per disattivare la raccolta al prossimo avvio.

La versione 0.12.0 ha prove di compilazione ed esecuzione per Nuxt 3.21.11 e 4.5.2, Vue 3.5.43, Nitro 2.13.4, su Node 24.21.0 e 26.9.0. Queste combinazioni non certificano tutte le versioni intermedie, l’invio dal browser o l’attivazione in produzione.