Nuxt Rollbar

Yet another Rollbar integration Nuxt module. See the section below, for more details on "why".

• ✨  Release Notes

Why another module for Rollbar?

There are several packages across npm, that provide more or less the same functionality as this one. Though, they are lacking some features, which were critical in my setup, when I was searching for the solution:

• Nuxt 2 Module by Gaël Reyrol - supported only Nuxt 2 version and is no longer maintained.
• Nuxt 3 Module by Jairo Blatt - has a working solution for capturing errors in your nuxt application, but you are not able to use Rollbar in your server application side, like server routes, etc..

These facts considered, a new module was born, that solves mentioned pain points.

This module is "work in progress" thing for now, so it's up to you, which module suits better for your actual needs.

Features

• Setup error tracking for both server- and client-side environments of your Nuxt application;
• Leverage exported composables (e.g. useRollbar) for seamless DX, when interacting with Rollbar;
• (WIP) Sourcemaps uploading.

Quick Setup

Installation

Install module using your favorite package manager:

# Using bun
bun add @lennoximus/nuxt-rollbar

# Using pnpm
pnpm add @lennoximus/nuxt-rollbar

# Using yarn
yarn add @lennoximus/nuxt-rollbar

# Using npm
npm install @lennoximus/nuxt-rollbar

Configuration

Add module to your nuxt.config.ts and provide minimal options:

export default defineNuxtConfig({
  modules: [
    '@lennoximus/nuxt-rollbar'
  ],
  rollbar: {
    clientAccessToken: 'Your client access token.',
    config: {
      /* Rollbar.Configuration options. */
    },
    serverAccessToken: 'Your server access token.',
  },
})

Options

Name	Type	Required	Default	Description
clientAccessToken	string	false	NUXT_ROLLBAR_CLIENT_ACCESS_TOKEN environment variable, if provided.	The client access token for Rollbar. Will be used in client-side of nuxt application.
serverAccessToken	string	false	NUXT_ROLLBAR_SERVER_ACCESS_TOKEN environment variable, if provided.	The server access token for Rollbar. Will be used in server-side of nuxt application, as well as in server routes.
config	Rollbar.Configuration	true	See. If passed, defaults will be merged with them.	Configuration for Rollbar.

Usage

Module exposes composables to use.

In your server routes

// @/server/api/hello.get.ts

export default defineEventHandler((event) => {
  const rollbar = useRollbar(event)

  rollbar.error(new Error('Error from server api route.'))

  return {
    message: 'Hello, world!',
  }
})

In application

<!-- @/components/MyButton.vue -->

<script lang="ts" setup>
defineOptions({
  name: 'MyButton',
})

const rollbar = useRollbar()

function onButtonClick() {
  rollbar.error(new Error('Error from button click.'))
}
</script>

<template>
  <button @click="onButtonClick">
    I will log error to Rollbar.
  </button>
</template>

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release