Building a Nuxt Application Monitoring Dashboard

Building a Nuxt Application Monitoring Dashboard

Nuxt applications need monitoring across both server-rendered and client-side execution. Here's how to build complete visibility.

Server-Side Performance Monitoring

Create a server middleware to track SSR performance:

// server/middleware/metrics.ts
export default defineEventHandler((event) => {
  const start = performance.now();

  event.node.res.on('finish', () => {
    const duration = performance.now() - start;
    const route = getRequestURL(event).pathname;

    console.log(JSON.stringify({
      type: 'ssr_request',
      route,
      duration_ms: Math.round(duration),
      status: event.node.res.statusCode,
      timestamp: new Date().toISOString(),
    }));
  });
});

Client-Side Performance

Track Core Web Vitals with a composable:

// composables/useWebVitals.ts
export function useWebVitals() {
  if (process.client) {
    import('web-vitals').then(({ onCLS, onFID, onLCP, onTTFB }) => {
      const report = (metric) => {
        console.log(JSON.stringify({
          type: 'web_vital',
          name: metric.name,
          value: metric.value,
          rating: metric.rating,
        }));
      };
      onCLS(report);
      onFID(report);
      onLCP(report);
      onTTFB(report);
    });
  }
}

Error Tracking Setup

// plugins/error-tracking.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('vue:error', (error, instance, info) => {
    console.error('Vue error:', { error: error.message, info });
    // Report to Bugsly
  });

  nuxtApp.hook('app:error', (error) => {
    console.error('App error:', error.message);
  });
});

Key Metrics Dashboard Panels

• SSR render time — p50, p95, p99 by route
• Client-side Core Web Vitals — LCP, CLS, FID distributions
• Error rate — server errors and client-side exceptions
• API response times — for useFetch and useAsyncData calls
• Cache hit ratio — Nuxt's built-in caching effectiveness

Health Endpoint

// server/routes/health.get.ts
export default defineEventHandler(async () => {
  return {
    status: 'healthy',
    version: process.env.APP_VERSION || 'unknown',
    uptime: process.uptime(),
  };
});

Combine metrics with Bugsly's error tracking to correlate performance degradation with specific errors. When SSR render time spikes, Bugsly shows exactly which errors are occurring during rendering.