1. Home
  2. Language Guides
  3. JavaScript
  4. Crash Reporting
  5. Nuxt.js

Nuxt.js

Nuxt.js is a full-stack framework for JavaScript and TypeScript web applications.
This guide covers setting up 'client-side' Crash Reporting for an existing Nuxt.js application using the Raygun4JS provider. For 'server-side' Crash Reporting, see the Raygun Node.JS provider for more information.

Step 1 - Installation

Use yarn (or npm, bun, etc.) to add the following packages:

yarn add raygun4js
yarn add --dev @types/raygun4js
yarn add raygun

In the nuxt.config.js file in the root of your project, paste in your Raygun API Key:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      raygun:{
        APIkey: 'paste_your_api_key_here',
      }
    }
  }
})

In the <root of you app>/plugins directory (if you don't have one, you can create it), add the following files:

1_raygun.client.ts:

import rg4js from "raygun4js";

export default defineNuxtPlugin((nuxtApp) => {
  rg4js('apiKey', nuxtApp.$config.public.raygun.APIkey);
  rg4js('enableCrashReporting', true);
  rg4js('boot');
	
  // Optional: enable Real User Monitoring
  rg4js('enableRUM', true);

  nuxtApp.vueApp.config.errorHandler = (error, instance, info) => {
    rg4js('send', {
      error: error,
      customData: [{ info: info }]
    });
  };
})

Add 1_raygun.server.ts for server-side error reporting:

import raygun from "raygun";

export default defineNuxtPlugin((nuxtApp) => {
  const raygunClient = new raygun.Client().init({
    apiKey: nuxtApp.$config.public.raygun.APIkey,
    batch: true,
    reportUncaughtExceptions: true
  });

  nuxtApp.hook('vue:error', (error:any) => {
    raygunClient.send(error);
  });

  nuxtApp.hook('app:error', (error) => {
    raygunClient.send(error);
  });
})

Plugins are loaded alphabetically. We start the file names with 1_ to set up error handling as soon as possible.

Step 2 - Release

Deploy Raygun into your production environment. Once we detect your first error event, the Raygun app will automatically update.

The provider is open source and available at the Raygun4js repository.

On this page: