Nuxt-logrocket NPM

nuxt-logrocket

LogRocket module for Nuxt.js

Features

Nuxt 3 & Nuxt Bridge
Supports Pinia integration
Ability to run in development mode

Setup

Add nuxt-logrocket dependency using yarn or npm to your project

yarn add nuxt-logrocket

npm install nuxt-logrocket --save

Add nuxt-logrocket to the modules section of your nuxt.config.ts file

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-logrocket'],

  logRocket: {
    id: '',
    dev: false,
    config: {
      //
    }
  }
})

Options

Options can be passed using either Runtime Config or the logRocket section in nuxt.config.ts. Setting a value for the required id option is enough in most cases.

Below is the complete list of options:

Option	Type	Default	Required
id	`String`	`''`	True
dev	`Boolean`	`true`	False
enablePinia	`Boolean`	`true`	False
release	`String`	`null`	False
consoleEnabled	`Boolean`	`true`	False
networkEnabled	`Boolean`	`true`	False
networkRequestSanitizer	`Function`	-	False
networkResponseSanitizer	`Function`	-	False
domEnabled	`Boolean`	`true`	False
inputSanitizer	`Boolean`	`false`	False
textSanitizer	`Boolean`	`false`	False
baseHref	`String`	`null`	False
shouldCaptureIP	`Boolean`	`true`	False
rootHostname	`String`	`null`	False
shouldDebugLog	`Boolean`	`true`	False
mergeIframes	`Boolean`	`false`	False

This is an example containing the default values for the options:

{
  id: '',
  dev: true,
  enablePinia: true,
  config: {
    release: null,
    console: {
      isEnabled: true
    },
    network: {
      isEnabled: true,
      networkRequestSanitizer: () => {},
      networkResponseSanitizer: () => {}
    },
    dom: {
      isEnabled: true,
      inputSanitizer: false,
      textSanitizer: false,
      baseHref: null
    },
    shouldCaptureIP: true,
    rootHostname: null,
    shouldDebugLog: true,
    mergeIframes: false
  }
}

Usage

LogRocket gets automatically injected into your application when it is setup correctly. By default this module works only in production and on client-side events.

In order to use LogRocket's injected functionality in your application, you can use :

const { $logRocket } = useNuxtApp()

Visit LogRocket's website for a full list of features : Docs

Pinia

This module automatically detects Pinia store mutations and attaches them to the LogRocket session.

This functionality is enabled by default, and can be disabled by setting the enablePinia options to false.

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['nuxt-logrocket'],

  logRocket: {
    id: '',
    enablePinia: false
  }
})