npm package: @lennoximus/nuxt-rollbar
Description: Yet another Rollbar integration Nuxt module.
Latest version: 0.0.5

<!--
Get your module up and running quickly.

Find and replace all on all files (CMD+SHIFT+F):
- Name: Nuxt Rollbar
- Package name: @lennoximus/nuxt-rollbar
- Description: Yet another Rollbar integration Nuxt module.
-->

# Nuxt Rollbar

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

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

- [✨ &nbsp;Release Notes](/CHANGELOG.md)

## 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](https://github.com/gaelreyrol/nuxt-rollbar-module) by [Gaël Reyrol](https://github.com/gaelreyrol) - supported only Nuxt 2 version and is no longer maintained.
- [Nuxt 3 Module](https://github.com/jairoblatt/nuxt-rollbar) by [Jairo Blatt](https://github.com/jairoblatt) - 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:

```bash
# 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:

```typescript
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](./src/runtime/defaults.ts#L3). If passed, defaults will be merged with them. | Configuration for Rollbar.                                   |

## Usage

Module exposes composables to use.

### In your server routes

```typescript
// @/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

```vue
<!-- @/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

<details>
  <summary>Local development</summary>

  ```bash
  # 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
  ```

</details>

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/@lennoximus/nuxt-rollbar/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://npmjs.com/package/@lennoximus/nuxt-rollbar

[npm-downloads-src]: https://img.shields.io/npm/dm/@lennoximus/nuxt-rollbar.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://npm.chart.dev/@lennoximus/nuxt-rollbar

[license-src]: https://img.shields.io/npm/l/@lennoximus/nuxt-rollbar.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://npmjs.com/package/@lennoximus/nuxt-rollbar

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com