Appxiom Web SDK Integration

Detailed documentation is available at Appxiom Web SDK.

Quick Start

JavaScript

import init from '@appxiom/web';

const ax = await init(
  'YOUR_APP_KEY',
  'YOUR_PLATFORM_KEY',
  'YOUR_APP_VERSION',
  'YOUR_BUILD_IDENTIFIER'
);

TypeScript

@appxiom/web ships first-party TypeScript declarations. No separate @types package is needed.

import init, { type AX } from '@appxiom/web';

const ax: AX = await init(
  'YOUR_APP_KEY',
  'YOUR_PLATFORM_KEY',
  'YOUR_APP_VERSION',
  'YOUR_BUILD_IDENTIFIER',
);

init(...) returns Promise<AX>. The SDK actions available on AX are documented below.

Diagnose Issues with AI Coding Assistants? Connect your IDE and AI agents to Appxiom using MCP Server Integration to inspect real-time crashes, occurrence telemetry, Quality Score metrics, and Goal Friction Impact (GFI) analytics directly within your editor.

Frameworks and SSR

The SDK is framework-neutral and runs in the browser. Initialize it from your application's browser entry point or client-side lifecycle code.

• React: initialize in a client-side application entry point, or use @appxiom/4react for React-specific integrations.
• Vue: initialize from main.ts or another browser-only application entry point.
• Angular: initialize from a browser-only service or application lifecycle path.
• Svelte: initialize from browser code such as onMount.
• Next.js, Nuxt, SvelteKit, and other SSR frameworks: initialize only on the client. Do not import or initialize the SDK from server-rendered code, route handlers, or server components.

For an SSR application, load and initialize the SDK only after the browser is available:

const { default: init } = await import('@appxiom/web');

const ax = await init(
  'YOUR_APP_KEY',
  'YOUR_PLATFORM_KEY',
  'YOUR_APP_VERSION',
  'YOUR_BUILD_IDENTIFIER',
);

Public API

The following APIs are available to client projects.

init(appKey, platformKey, version, buildIdentifier)

Initializes the SDK and returns an AX instance. Both JavaScript and TypeScript forms support values loaded from application configuration.

ax.setCustomId(customId)

Associates your user/account identifier with telemetry.

ax.setCustomId('user-12345');

ax.startGoal(name)

Starts a named goal.

ax.startGoal('checkout-flow');

ax.endGoal(name, properties = {}, value = null)

Ends a named goal.

ax.endGoal('checkout-flow', { cartValue: 120.0 }, 120.0);

ax.logActivity(name, properties = {})

Adds a custom activity entry.

ax.logActivity('Checkout Step Completed', {
  step: 'payment',
  orderId: 'ORD-10023'
});

ax.reportCustomIssue(title, description, severity, data = {}, stacktrace = null)

Reports a custom issue from your application. Severity values are 0 (Minor), 1 (Major), and 2 (Fatal).

ax.reportCustomIssue(
  'Checkout Validation Failed',
  'Payment token was missing.',
  1,
  { module: 'checkout' },
  new Error('Missing payment token').stack
);

Error Types

The SDK categorizes detected problems into a set of structured error types so that telemetry, debugging, and reporting are easier to analyze:

• HTTPStatusError: Non-success HTTP status code (4xx or 5xx).
• HTTPDuplicateRequestError: Same request issued multiple times.
• HTTPDelayedResponseError: HTTP request took longer than expected.
• HTTPExceptionError: Unexpected exceptions during HTTP request.
• MemoryLeak: Suspected memory leak.
• MemoryAnomaly: Abnormal memory behavior.
• MemoryRisk: Potential memory-related issue.
• MemorySpike: Sudden rise in memory consumption.
• AutoCapturedError: Errors captured automatically.
• ResourceLoadError: Critical resource failed to load.
• CustomException / CustomIssue: Application-level errors reported manually.
• FrameDrop: Frame-rate drop or rendering anomaly.

---

Connect to MCP Server

Appxiom provides a Model Context Protocol (MCP) server that connects AI coding assistants and IDEs (such as Claude Code, Cursor, Windsurf, and VS Code) directly to Appxiom's real-time diagnostic engine. Once connected, your AI agents can inspect real-time web application errors, network failures, occurrence telemetry, Quality Score (QS) metrics, and Goal Friction Impact (GFI) analytics directly within your editor.

For setup and configuration instructions, see the MCP Server Integration guide.