Logrocket · Nuxt モジュール

nuxt-logrocket

Nuxt.js用LogRocketモジュール

機能

Nuxt 3 & Nuxt Bridge対応
Pinia連携に対応
開発モードでの実行が可能

設定

yarnまたはnpmを使用してプロジェクトにnuxt-logrocket依存関係を追加します。

yarn add nuxt-logrocket

または

npm install nuxt-logrocket --save

nuxt.config.tsファイルのmodulesセクションにnuxt-logrocketを追加します。

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ライセンス - Alibaba Travels Co