透過 100+ 個技巧學習 Nuxt!

rollbar
nuxt-rollbar

用於整合 Rollbar 的 Nuxt 3 模組。

Nuxt Rollbar module

Nuxt Rollbar

npm version

用於整合 RollbarNuxt 3 模組。

設定

# pnpm
pnpm add -D nuxt-rollbar

# npm
npm i -D nuxt-rollbar

# yarn
yarn add -D nuxt-rollbar

基本用法

nuxt-rollbar 加入您的 Nuxt 設定的 modules 區段,並提供您的 Rollbar 伺服器和/或客戶端存取權杖。

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['nuxt-rollbar'],

  rollbar: {
    serverAccessToken: 'SERVER_ACCESS_TOKEN',
    clientAccessToken: 'CLIENT_ACCESS_TOKEN',
  },
});

完成! Rollbar 現在將在您的應用程式中運行。

設定

僅限客戶端

ℹ️ useRollbar 可組合函式在伺服器端會回傳 undefined

export default defineNuxtConfig({
  modules: ['nuxt-rollbar'],

  rollbar: {
    clientAccessToken: 'CLIENT_ACCESS_TOKEN',
    mode: 'client',
    config: {
      // Rollbar configuration
    },
  },
});

僅限伺服器端

ℹ️ useRollbar 可組合函式在客戶端會回傳 undefined

export default defineNuxtConfig({
  modules: ['nuxt-rollbar'],

  rollbar: {
    serverAccessToken: 'SERVER_ACCESS_TOKEN',
    mode: 'server',
    config: {
      // Rollbar configuration
    },
  },
});

同時用於伺服器端和客戶端

export default defineNuxtConfig({
  modules: ['nuxt-rollbar'],

  rollbar: {
    serverAccessToken: 'SERVER_ACCESS_TOKEN',
    clientAccessToken: 'CLIENT_ACCESS_TOKEN',
    config: {
      // Rollbar configuration
    },
  },
});

模組選項

選項類型預設值描述
clientAccessToken字串''Rollbar 客戶端存取權杖。
serverAccessToken字串''字串
mode字串'all'Rollbar 實例運行的環境模式。
configRollbar.ConfigurationnullRollbar 設定。

可組合函式

如同 Nuxt 3 生態系統中的其他可組合函式一樣,它們會自動導入,並可在您應用程式的組件中使用。

ℹ️ 由於 Rollbar 實例在客戶端和伺服器端環境中都可用,因此您可以在任一環境中使用它。

useRollbar

如果 Rollbar 實例可用且已為環境 (客戶端或伺服器端) 設定,則回傳該實例。否則,回傳 undefined

類型宣告

function useRollbar(): Rollbar;

範例

const rollbar = useRollbar();

rollbar.log('Hello, world!');

此可組合函式是簡單的別名,用於

useNuxtApp().$rollbar;

💻 開發

  1. 複製此儲存庫
  2. 使用 corepack enable 啟用 Corepack
  3. 使用 pnpm install 安裝依賴項
  4. 執行 pnpm run dev:prepare
  5. 使用 pnpm run dev 啟動開發伺服器

感謝

特別感謝

感謝所提供的啟發和基礎工作。

許可證

MIT 許可證 © 2023 Jairo Blatt