Monitor Anything Trae

A local frontend monitoring tool that captures errors, logs, network requests, session replay, and custom events — all stored in the browser's IndexedDB. No network requests, no remote server required.

Features

• Session Replay: DOM-based high-fidelity recording of user interactions (powered by rrweb)
• Error Monitoring: Captures window.onerror, unhandled promise rejections, and manually reported errors
• Console Logs: Records all console output (console.log, console.error, etc.)
• Network Requests: Intercepts Fetch, XHR, and WebSocket requests with full headers and body
• Custom Events: Track custom events via M.track() and identify users via M.identify()
• Web Vitals: Measures CLS, FCP, FID, LCP, TTFB, and INP
• Local Viewer: Built-in HTML viewer to browse and inspect all collected data

Quick Start

Installation

pnpm add monitor-anything-trae

Basic Usage

import { M } from 'monitor-anything-trae'

// Initialize in local mode — all data stays in IndexedDB
M.init('my-app', {
  localMode: true,
  environment: 'development',
  version: '1.0.0',
})

Query Local Data

// Get all sessions
const sessions = await M.getLocalSessions()

// Get errors for a session
const errors = await M.getLocalErrors(sessionSecureID)

// Get all errors across sessions
const allErrors = await M.getAllLocalErrors()

// Get network requests
const networkRequests = await M.getLocalNetworkRequests(sessionSecureID)

// Get console logs
const logs = await M.getLocalLogs(sessionSecureID)

// Get custom track events
const trackEvents = await M.getLocalTrackEvents(sessionSecureID)

// Get storage statistics
const stats = await M.getLocalStorageStats()

// Clear all local data
await M.clearLocalData()

Local Viewer

Open packages/local-viewer/index.html in a browser to view all collected data with a dark-themed UI.

Architecture

Browser → Listeners (14) → MonitorAnythingTrae Class → Web Worker → IndexedDB
                                                              ↓
                                              Local Viewer (HTML)

All data flows through a Web Worker that writes to IndexedDB. No data is sent over the network.

SDKs

• monitor-anything-trae — Core SDK (framework-agnostic)
• @monitor-anything-trae/react — React bindings (ErrorBoundary, ReportDialog)
• @monitor-anything-trae/vue — Vue 3 bindings (ErrorBoundary, Plugin, Composable)

Vue Integration

Install

pnpm add monitor-anything-trae @monitor-anything-trae/vue

Option 1: Vue Plugin (Recommended)

Automatically iInitializes MonitorAnythingTrae and captures errors via app.config.errorHandler:

import { createApp } from 'vue'
import { MonitorAnythingTraePlugin } from '@monitor-anything-trae/vue'
import App from './App.vue'

const app = createApp(App)
app.use(MonitorAnythingTraePlugin, {
  projectID: 'my-app',
  localMode: true,
  environment: 'development',
  version: '1.0.0',
})
app.mount('#app')

Option 2: ErrorBoundary Component

Wraps a component tree and captures rendering errors with a fallback UI:

<script setup>
import { ErrorBoundary } from '@monitor-anything-trae/vue'
</script>

<template>
  <ErrorBoundary v-slot="{ error, resetError }">
    <div v-if="error">
      <p>Something went wrong: {{ error.message }}</p>
      <button @click="resetError">Retry</button>
    </div>
    <MyComponent v-else />
  </ErrorBoundary>
</template>

With a custom fallback function:

<template>
  <ErrorBoundary
    :fallback="(error, reset) => h('div', [h('p', error.message), h('button', { onClick: reset }, 'Retry')])"
    :show-dialog="true"
    :on-error="(err, info) => console.error('Captured:', err, info)"
  >
    <MyComponent />
  </ErrorBoundary>
</template>

Option 3: Composable

For finer control inside any component:

<script setup>
import { useMonitorAnythingTraeErrorBoundary } from '@monitor-anything-trae/vue'

const { error, componentStack, resetError } = useMonitorAnythingTraeErrorBoundary()
</script>

<template>
  <div v-if="error">
    <p>Error: {{ error.message }}</p>
    <button @click="resetError">Reset</button>
  </div>
  <slot v-else />
</template>

License

Apache-2.0