Nuxt Nation 大会即将到来。加入我们,时间为 11 月 12 日至 13 日。

logrocket
nuxt-logrocket

用于 Nuxt 的 LogRocket 模块,帮助您修复错误并了解用户行为。

nuxt-logrocket

nuxt-logrocket

npm (scoped with tag)npmCircleCICodecovjs-standard-style

用于 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布尔值trueFalse
enablePinia布尔值trueFalse
release字符串nullFalse
consoleEnabled布尔值trueFalse
networkEnabled布尔值trueFalse
networkRequestSanitizer函数-False
networkResponseSanitizer函数-False
domEnabled布尔值trueFalse
inputSanitizer布尔值falseFalse
textSanitizer布尔值falseFalse
baseHref字符串nullFalse
shouldCaptureIP布尔值trueFalse
rootHostname字符串nullFalse
shouldDebugLog布尔值trueFalse
mergeIframes布尔值falseFalse

这是一个包含选项默认值的示例

{
  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 许可证 - 阿里巴巴旅行有限公司