Nuxt

Das offizielle DockRay-Modul für Nuxt integriert Nuxt-3- und Nuxt-4-Anwendungen mit der DockRay-Monitoring-Plattform. Es meldet automatisch serverseitige Fehler, überwacht die Verarbeitungszeit von Anfragen und kann optional Vue- und JavaScript-Fehler aus dem Browser erfassen.

Monitoring serverseitiger Fehler

DockRay integriert sich in Nitro und meldet unbehandelte Serverfehler zusammen mit Informationen über die zugeordnete Route.

Gemeldete Ereignisse können unter anderem folgende Informationen enthalten:

• Typ und Beschreibung des Fehlers,
• Ort des Auftretens und Stack Trace,
• Informationen über die Umgebung und Anwendungsversion,
• Kontext der verarbeiteten Anfrage.

Standardmäßig werden 5xx-Antworten als Anwendungsfehler gemeldet. Erwartete 4xx-Fehler wie 404 werden nicht als Ausfälle der Anwendung behandelt.

Performance-Monitoring

Das Modul misst die Verarbeitungszeit von Anfragen und meldet Transaktionen, nachdem die Antwort an den Benutzer gesendet wurde. Transaktionen werden anhand des Routenmusters gruppiert, sodass unterschiedliche IDs keine separaten Einträge im Dashboard erzeugen.

Die Häufigkeit der Datenerfassung kann über eine Sampling-Rate gesteuert werden.

Monitoring von Vue- und JavaScript-Fehlern

Optional kann die Erfassung von Fehlern aktiviert werden, die im Browser auftreten. Die Integration unterstützt sowohl standardmäßige JavaScript-Fehler als auch Fehler in Vue-Komponenten, die über Nuxt-Hooks erfasst werden.

Ereignisse aus dem Browser werden zunächst an die eigene Nuxt-Anwendung gesendet und anschließend an DockRay weitergeleitet. Dadurch verbleibt der private Schlüssel des Projekts ausschließlich auf dem Server.

Nitro, Node und Edge

Die Integration arbeitet über Nitro und unterstützt sowohl Node.js-Umgebungen als auch Worker-basierte Deployments, einschließlich Lösungen, die mit der Fetch API kompatibel sind.

Datenschutz und Sicherheit

Sensible Header wie Authorization, Cookie, Set-Cookie und X-Api-Key werden aus den gemeldeten Daten entfernt.

Die Übermittlung der IP-Adresse und des User-Agents ist optional und kann in der Modulkonfiguration gesteuert werden.

Installation des Moduls

Installieren Sie DockRay mit npm:

npm install @dockcodes/dock-ray-nuxt

Konfiguration

Fügen Sie das Modul zur Datei nuxt.config.ts hinzu:

export default defineNuxtConfig({
    modules: ['@dockcodes/dock-ray-nuxt'],

    ray: {
        tracesSampleRate: 0.2,
        browser: {
            enabled: false
        }
    }
});

Fügen Sie anschließend die DockRay-Projektdaten zu den Umgebungsvariablen hinzu:

NUXT_RAY_TOKEN=project-token
NUXT_RAY_PRIVATE_KEY=project-private-key

Den Projekt-Token und den privaten Schlüssel finden Sie im DockRay-Dashboard.

Die Zugangsdaten werden in der privaten Runtime-Konfiguration von Nuxt gespeichert und sollten nicht unter runtimeConfig.public abgelegt werden, da der Inhalt dieses Bereichs in den clientseitigen Code übernommen wird.

Ohne konfigurierten Projekt-Token und privaten Schlüssel bleibt das Modul inaktiv und sendet keine Daten.

Optionale JavaScript-Fehler

Um das Monitoring von Vue- und JavaScript-Fehlern im Browser zu aktivieren, setzen Sie:

ray: {
    browser: {
        enabled: true
    }
}