nuxt-logrocket
LogRocket Nuxt.js 模块
特性
- Nuxt 3 & Nuxt Bridge
- 支持 Pinia 集成
- 能够在开发模式下运行
安装
- 使用 yarn 或 npm 将
nuxt-logrocket
依赖项添加到您的项目
yarn add nuxt-logrocket
或
npm install nuxt-logrocket --save
- 将
nuxt-logrocket
添加到您的nuxt.config.ts
文件的modules
部分
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-logrocket'],
logRocket: {
id: '',
dev: false,
config: {
//
}
}
})
选项
可以使用 运行时配置 或 nuxt.config.ts
中的 logRocket
部分传递选项。在大多数情况下,只需设置必需的 id
选项值即可。
以下是完整的选项列表
选项 | 类型 | 默认值 | 必需 |
---|---|---|---|
id | String | '' | 是 |
dev | Boolean | true | 否 |
enablePinia | Boolean | true | 否 |
release | String | null | 否 |
consoleEnabled | Boolean | true | 否 |
networkEnabled | Boolean | true | 否 |
networkRequestSanitizer | Function | - | 否 |
networkResponseSanitizer | Function | - | 否 |
domEnabled | Boolean | true | 否 |
inputSanitizer | Boolean | false | 否 |
textSanitizer | Boolean | false | 否 |
baseHref | String | null | 否 |
shouldCaptureIP | Boolean | true | 否 |
rootHostname | String | null | 否 |
shouldDebugLog | Boolean | true | 否 |
mergeIframes | Boolean | false | 否 |
这是一个包含选项默认值的示例
{
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
}
}
用法
正确设置后,LogRocket 会自动注入到您的应用程序中。默认情况下,此模块仅在 production
环境和客户端事件中工作。
为了在您的应用程序中使用 LogRocket 注入的功能,您可以使用
const { $logRocket } = useNuxtApp()
访问 LogRocket 网站以获取完整的功能列表:文档
Pinia
此模块自动检测 Pinia 存储突变并将它们附加到 LogRocket 会话。
此功能默认启用,可以通过将 enablePinia
选项设置为 false
来禁用。
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-logrocket'],
logRocket: {
id: '',
enablePinia: false
}
})
开发
- 克隆此仓库
- 使用
yarn install
安装依赖项 - 使用
yarn run dev
启动开发服务器 - 将您的浏览器指向
https://127.0.0.1:3000
许可证
MIT 许可证 - Alibaba Travels Co