Nuxt

Server-Side Monitoring for Nuxt and Nitro

The official DockRay module for Nuxt integrates Nuxt 3 and 4 applications with the DockRay monitoring platform. It automatically reports server-side errors, monitors request processing times, and can optionally collect Vue and JavaScript errors from the browser.

Server-Side Error Monitoring

DockRay integrates with Nitro and reports unhandled server errors along with information about the matched route.

Reported events can include:

the error type and message,
where the error occurred and the stack trace,
environment and application version information,
context related to the request being processed.

By default, 5xx responses are reported as application errors. Expected 4xx errors, such as 404 responses, are not treated as application failures.

Performance Monitoring

The module measures request processing times and reports transactions after the response has been sent to the user. Transactions are grouped by route pattern, so different IDs do not create separate entries in the dashboard.

The frequency of data collection can be controlled using a sampling rate.

Vue and JavaScript Error Monitoring

You can optionally enable browser-side error collection. The integration supports both standard JavaScript errors and Vue component errors captured through Nuxt hooks.

Browser events are first sent to your own Nuxt application and then forwarded to DockRay, ensuring that your project's private key remains exclusively on the server.

Nitro, Node, and Edge

The integration works through Nitro and supports both Node.js environments and worker-based deployments, including environments compatible with the Fetch API.

Privacy and Security

Sensitive headers such as Authorization, Cookie, Set-Cookie, and X-Api-Key are removed from reported data.

Sending the IP address and user agent is optional and can be controlled in the module configuration.

Installation

Module Installation

Install DockRay using npm:

bash

npm install @dockcodes/dock-ray-nuxt

Configuration

Add the module to your nuxt.config.ts file:

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

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

Then add your DockRay project credentials to your environment variables:

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

You can find your project token and private key in the DockRay dashboard.

Credentials are stored in Nuxt's private runtime configuration and should not be placed in runtimeConfig.public, as the contents of this section are exposed to client-side code.

Without a configured token and private key, the module remains inactive and does not send any data.

Optional JavaScript Error Monitoring

To enable Vue and JavaScript error monitoring in the browser, set:

ray: {
    browser: {
        enabled: true
    }
}