@parkwebit/ase-nuxt

Nuxt integration for All Seeing Eye browser telemetry.

Supports Nuxt 3.13+ and Nuxt 4.

npm install @parkwebit/ase-nuxt @parkwebit/ase-browser

Environment

Create a .env file in the root of your Nuxt app. The public DSN comes from ASE in the project environment API keys screen.

NUXT_PUBLIC_ASE_DSN=https://api-ase.parkwebit.nl/api/v1/ingest/browser/YOUR_PUBLIC_BROWSER_KEY
ASE_DSN=https://[email protected]/api/v1/ingest/envelope
NUXT_PUBLIC_ASE_ENABLED=true
NUXT_PUBLIC_ASE_ENVIRONMENT=production
NUXT_PUBLIC_ASE_RELEASE=1.0.0

NUXT_PUBLIC_ASE_DSN is used in the browser and must contain a public pk_ase_ key. ASE_DSN is private server-side config and must contain one sk_ase_ secret token. Do not prefix ASE_DSN with NUXT_PUBLIC_.

Use the variables in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@parkwebit/ase-nuxt'],
  ase: {
    publicDsn: process.env.NUXT_PUBLIC_ASE_DSN,
    serverDsn: process.env.ASE_DSN,
    release: process.env.NUXT_PUBLIC_ASE_RELEASE,
    environment: process.env.NUXT_PUBLIC_ASE_ENVIRONMENT || process.env.NODE_ENV,
    enabled: process.env.NUXT_PUBLIC_ASE_ENABLED !== 'false',
    captureServerErrors: true,
    captureWarnings: true,
    captureUnhandledRejections: true,
    sendDefaultPii: false,
    sampleRate: 1,
    sessionReplay: {
      enabled: true,
      captureClicks: true,
      captureNavigation: true,
      captureScroll: true,
      captureTyping: true,
      maskInputs: true,
    },
  },
})

For local development you can either use your production ASE API URL with a development environment key, or point the DSN to your local API:

NUXT_PUBLIC_ASE_DSN=http://localhost:8000/api/v1/ingest/browser/YOUR_LOCAL_PUBLIC_BROWSER_KEY
NUXT_PUBLIC_ASE_ENVIRONMENT=local
NUXT_PUBLIC_ASE_RELEASE=local

If you are configuring the ASE dashboard app itself, use NUXT_PUBLIC_API_BASE instead:

NUXT_PUBLIC_API_BASE=https://api-ase.parkwebit.nl/api/dashboard/v1

NUXT_PUBLIC_ASE_DSN is for sending telemetry from your Nuxt application to ASE. NUXT_PUBLIC_API_BASE is only for the ASE dashboard frontend talking to the ASE API.

Server-side capture:

• Nitro request errors;
• SSR/server route errors reported through Nitro;
• plugin/cache errors reported through Nitro.

Usage:

const { $ase } = useNuxtApp()

$ase.captureException(error)
$ase.captureWarning('Checkout is slow')
$ase.captureMessage('Feature used', 'info')
$ase.setUser({ id: user.id })
$ase.setTag('tenant', tenantId)
$ase.addBreadcrumb({ category: 'checkout', message: 'Payment started' })

Automatic client capture:

• Vue global errors;
• vue:error;
• Nuxt app:error;
• window.onerror;
• unhandledrejection;
• console.warn;
• failed fetch breadcrumbs;
• route/page breadcrumbs;
• optional session behavior breadcrumbs.

Session behavior capture is not video. It sends bounded breadcrumbs such as clicks, navigation, scroll position and masked input activity. Input values are masked by default; passwords, emails, telephone fields and hidden inputs are never captured raw.