nuxt-logrocket

nuxt-logrocket
LogRocket module for Nuxt.js
Features
- Nuxt 3 & Nuxt Bridge
- Supports Pinia integration
- Ability to run in development mode
Setup
- Add
nuxt-logrocketdependency using yarn or npm to your project
yarn add nuxt-logrocket
OR
npm install nuxt-logrocket --save
- Add
nuxt-logrocketto themodulessection of yournuxt.config.tsfile
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
}
})
Development
- Clone this repository
- Install dependencies using
yarn install - Start development server using
yarn run dev - Point your browser to
http://localhost:3000
License
MIT License - Alibaba Travels Co