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: Install the Raygun4JS package
NPM
npm install raygun4js Yarn
yarn add raygun4js Bun
bun add raygun4js Step 2: Enable Crash Reporting
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', } } } }) Make a plugin to configure Raygun
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.