nuxt-logrocket
用于 Nuxt.js 的 LogRocket 模块
特性
- 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 | 字符串 | '' | True |
dev | 布尔值 | true | False |
enablePinia | 布尔值 | true | False |
release | 字符串 | null | False |
consoleEnabled | 布尔值 | true | False |
networkEnabled | 布尔值 | true | False |
networkRequestSanitizer | 函数 | - | False |
networkResponseSanitizer | 函数 | - | False |
domEnabled | 布尔值 | true | False |
inputSanitizer | 布尔值 | false | False |
textSanitizer | 布尔值 | false | False |
baseHref | 字符串 | null | False |
shouldCaptureIP | 布尔值 | true | False |
rootHostname | 字符串 | null | False |
shouldDebugLog | 布尔值 | true | False |
mergeIframes | 布尔值 | false | 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 许可证 - 阿里巴巴旅行有限公司