Auto-Instrumentation

Automatic event capture for errors, performance, network, console, pageviews, and interactions.

What Gets Captured

When auto-instrumentation is enabled, the Apperio SDK patches browser APIs to capture events without any manual code. Each category can be independently toggled.

Category	Browser API Patched	Data Captured
Errors	`window.onerror`	Error name, message, stack trace, source URL, line/column
Errors	`unhandledrejection`	Promise rejection reason, stack trace
Performance	`PerformanceObserver`	LCP, FID, CLS, TTFB, INP values
Network	`XMLHttpRequest`	URL, method, status, duration, request/response size
Network	`fetch()`	URL, method, status, duration, headers
Console	`console.*`	Log level, message, arguments
Pageviews	`History API`	URL, referrer, page title, navigation type
Interactions	`addEventListener`	Element tag, text, CSS selector, event type

Error Capture

The SDK listens for unhandled errors and promise rejections at the window level. Captured errors include full stack traces when available.

TypeScript

class="syntax-comment">// These errors are captured automatically:

class="syntax-comment">// class="syntax-number">1. Runtime errors
function processData(data) {
  class="syntax-comment">// TypeError: Cannot read properties of undefined
  return data.items.map(item => item.name);
}

class="syntax-comment">// class="syntax-number">2. Unhandled promise rejections
fetch(class="syntax-string">"/api/data")
  .then(res => res.json())
  .then(data => processData(data));
  class="syntax-comment">// No .catch() - rejection captured automatically

class="syntax-comment">// class="syntax-number">3. Explicit throws
throw new Error(class="syntax-string">"Something went wrong");

The captured error log entry includes:

JSON

{
  "level": "error",
  "message": "Uncaught TypeError: Cannot read properties of undefined",
  "eventType": "error",
  "error": {
    "name": "TypeError",
    "message": "Cannot read properties of undefined(reading 'map')",
    "stack": "TypeError: Cannot read properties...\n    at processData(app.js:42:15)",
    "url": "https://example.com/app.js",
    "lineNumber": 42,
    "columnNumber": 15
  }
}

Performance Capture

Performance auto-capture uses the PerformanceObserver API to measure Core Web Vitals. Metrics are captured once per page load.

Metric	Full Name	What It Measures
LCP	Largest Contentful Paint	Time until the largest visible element renders
FID	First Input Delay	Delay between first user interaction and browser response
CLS	Cumulative Layout Shift	Total unexpected visual movement of page elements
TTFB	Time to First Byte	Time from navigation start to first response byte
INP	Interaction to Next Paint	Latency of all user interactions during page lifecycle

Network Capture

The SDK intercepts XMLHttpRequest and fetch to record all network requests with timing data:

TypeScript

class="syntax-comment">// All of these are captured automatically:
fetch(class="syntax-string">"/api/users");
axios.get(class="syntax-string">"/api/products");

const xhr = new XMLHttpRequest();
xhr.open(class="syntax-string">"POST", class="syntax-string">"/api/orders");
xhr.send(JSON.stringify({ item: class="syntax-string">"widget" }));

Captured network log entry:

JSON

{
  "level": "info",
  "message": "GET /api/users 200",
  "eventType": "network",
  "responseTime": 145,
  "data": {
    "method": "GET",
    "url": "/api/users",
    "status": 200,
    "duration": 145
  }
}

Info

Network capture automatically sanitizes query parameters that may contain sensitive data (tokens, API keys). The request body is not captured to avoid PII exposure.

Console Capture

When enabled, the SDK intercepts console.log, console.warn, and console.error calls and forwards them as log entries.

TypeScript

class="syntax-comment">// With console capture enabled:
console.log(class="syntax-string">"User loaded", user);
class="syntax-comment">// -> Captured as info log with eventType: class="syntax-string">"console"

console.warn(class="syntax-string">"Deprecated API used");
class="syntax-comment">// -> Captured as warn log

console.error(class="syntax-string">"Failed to render component");
class="syntax-comment">// -> Captured as error log

Warning

Console capture is disabled by default. The SDK avoids recursive capture by not intercepting its own console calls, but enabling this in high-volume logging environments may increase data volume significantly.

Pageview Capture

Pageview tracking captures navigation events including initial page loads and client-side route changes (via the History API):

JSON

{
  "level": "info",
  "message": "Pageview: /dashboard/analytics",
  "eventType": "pageview",
  "url": "https://example.com/dashboard/analytics",
  "referrer": "https://example.com/dashboard",
  "userAgent": "Mozilla/5.0 ..."
}

Interaction Capture

When enabled, the SDK tracks click events and form submissions, capturing the target element context:

JSON

{
  "level": "info",
  "message": "User clicked: Submit Order",
  "eventType": "interaction",
  "data": {
    "type": "click",
    "element": "button",
    "text": "Submit Order",
    "selector": "#checkout-form > button.submit"
  }
}

Selective Configuration

Enable only the categories you need. Every combination is valid:

TypeScript

class="syntax-comment">// Errors only - minimal overhead
Apperio.init({
  projectId: class="syntax-string">"...",
  apiKey: class="syntax-string">"...",
  autoCapture: {
    errors: true,
    performance: false,
    network: false,
    console: false,
    pageviews: false,
    interactions: false,
  },
});

class="syntax-comment">// Full observability - maximum data
Apperio.init({
  projectId: class="syntax-string">"...",
  apiKey: class="syntax-string">"...",
  autoCapture: {
    errors: true,
    performance: true,
    network: true,
    console: true,
    pageviews: true,
    interactions: true,
  },
});