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.

npm install raygun4js

yarn add raygun4js

bun add raygun4js

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');
	
  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.

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

On this page: