Auto-instrumentation, distributed tracing, PII protection, and resilient delivery in a single TypeScript package. Like Sentry + LogRocket, but with full control.
Three steps. Any framework. Under 30 seconds.
npm install apperioyarn add apperiopnpm add apperioimport { Apperio } from "apperio";
const logger = new Apperio({
apiKey: "your-api-key",
projectId: "your-project-id",
environment: "production",
serviceName: "my-web-app",
});// Manual logging (optional)
logger.info("User signed up", {
plan: "pro",
});
// Auto-capture is already active:
// Errors, performance, network,
// page views, console, interactionsEverything captured automatically. Toggle each category on or off.
errors: trueperformance: trueperformance: truenetworkRequests: trueconsoleMessages: truepageViews: trueuserInteractions: trueEach metric auto-rated. Data includes URL, element, and navigation type.
const logger = new Apperio({
apiKey: "your-api-key",
projectId: "your-project-id",
autoCapture: {
errors: true, // Uncaught errors + promise rejections
performance: true, // Navigation, resource, paint timing + Web Vitals
networkRequests: true, // fetch/XHR with timing and size
pageViews: true, // SPA route changes via History API
consoleMessages: false, // console.error/warn (can be noisy)
userInteractions: false, // click/scroll tracking (verbose)
},
});W3C Trace Context propagation. Start spans, link operations, and follow requests from browser to backend.
// Start a span for a database query
const spanId = logger.startSpan("db-query", {
db: "users",
operation: "findById",
});
// ... perform the operation ...
const user = await db.users.findById(id);
// End the span (duration auto-calculated)
logger.endSpan(spanId);
// Nested spans for complex operations
const parentSpan = logger.startSpan("checkout");
const validateSpan = logger.startSpan("validate-cart");
// ... validate ...
logger.endSpan(validateSpan);
const paymentSpan = logger.startSpan("process-payment");
// ... charge ...
logger.endSpan(paymentSpan);
logger.endSpan(parentSpan);// TracePropagator automatically injects
// W3C traceparent headers into outgoing requests:
//
// traceparent: 00-{traceId}-{spanId}-01
//
// This links frontend spans to backend spans,
// enabling full request waterfall visualization.
// The SDK patches fetch() to auto-inject headers.
// No manual instrumentation needed.Request Waterfall
9 built-in patterns, 3 presets, custom rules, and a full audit trail. GDPR-friendly by default.
All 9 patterns + URL sanitization
Email, phone, SSN, credit card, passwords
Only passwords and credit cards
const logger = new Apperio({
apiKey: "your-api-key",
projectId: "your-project-id",
sanitization: {
preset: "BALANCED",
customRules: [
{
pattern: /ACCT-\d{8}/g,
replacement: "[ACCOUNT_ID]",
},
],
},
});
// Audit trail access:
const trail = logger
.getSanitizationAuditTrail();
// [{field, pattern, action, ts}]Circuit breaker, offline queue, payload compression, and real-time health metrics
const logger = new Apperio({
apiKey: "your-api-key",
projectId: "your-project-id",
// Circuit breaker configuration
circuitBreaker: {
failureThreshold: 5, // Open after 5 failures
resetTimeout: 30000, // Try again after 30s
halfOpenRequests: 1, // Test with 1 request
},
});
// SDK handles state transitions automatically:
// CLOSED -> normal operation, sending logs
// OPEN -> API failing, logs buffered locally
// HALF_OPEN -> testing if API recoveredNormal operation. Logs sent to API. Failure counter tracks errors.
API unreachable. Logs buffered in memory. No requests sent until timeout.
Testing recovery. One probe request sent. Success closes, failure reopens.
Transitions are automatic. Zero developer intervention needed.
Pattern detection, remote configuration, breadcrumbs, and the enhanced logger factory
const logger = new Apperio({
apiKey: "your-api-key",
projectId: "your-project-id",
patternDetection: {
recurringErrors: {
window: 60000, // 1 minute window
threshold: 5, // 5 occurrences
},
errorSpikes: {
baselineWindow: 300000, // 5 min baseline
spikeMultiplier: 3, // 3x normal rate
},
},
onPatternDetected: (pattern) => {
console.warn("Pattern:", pattern.type);
// "recurring-error" | "error-spike"
},
});const logger = new Apperio({
apiKey: "your-api-key",
projectId: "your-project-id",
// Remote config polling
remoteConfigUrl: "https://your-api/config",
remoteConfigInterval: 300000, // 5 minutes
// Changes applied at runtime:
// - Log level (trace -> warn)
// - Sampling rate (100% -> 10%)
// - Auto-capture toggles
// - Custom rules
// No restart needed!
});// Add breadcrumbs manually
logger.addBreadcrumb(
"User clicked checkout",
"user-action",
{ cartItems: 3, total: 99.99 }
);
logger.addBreadcrumb(
"Navigated to /checkout",
"navigation"
);
logger.addBreadcrumb(
"POST /api/orders succeeded",
"network",
{ status: 201, duration: 342 }
);
// Breadcrumbs auto-included in error reports
// Categories: user-action, navigation,
// network, console, error, customimport { createEnhancedLogger } from "apperio";
const {
logger,
contextManager, // Scoped context management
sessionManager, // Auto session tracking
eventTracker, // Custom business events
featureFlagLogger,// Feature flag tracking
abTestLogger, // A/B test variant logging
performanceMonitor,// Custom perf measurements
} = createEnhancedLogger({
apiKey: "your-api-key",
projectId: "your-project-id",
});
// Track business events
eventTracker.track("purchase", {
amount: 99.99, plan: "pro"
});
// Log A/B test variants
abTestLogger.logVariant(
"pricing-test", "variant-b"
);Send manual logs and simulate auto-captured events in real-time
Simulate Auto-Capture
Application started
{
"version": "1.2.2",
"environment": "demo"
}High memory usage detected
{
"usage": "85%",
"threshold": "80%"
}Dedicated packages for React and Next.js with idiomatic APIs
React Context Provider, hooks, and Error Boundary
import { ApperioProvider } from "@apperio/react";
// Wrap your app root
<ApperioProvider config={{
apiKey: "your-api-key",
projectId: "your-project-id",
environment: "production",
}}>
<App />
</ApperioProvider>import {
useApperio,
useLogError,
useTrackEvent,
usePerformance,
} from "@apperio/react";
function MyComponent() {
const logger = useApperio(); // Core logger
const logError = useLogError(); // Error logging
const track = useTrackEvent(); // Event tracking
const perf = usePerformance(); // Perf measurement
const handleSubmit = async () => {
perf.start("form-submit");
try {
await submitForm();
track("form_submitted", { form: "signup" });
} catch (err) {
logError(err, { form: "signup" });
}
perf.end("form-submit");
};
}import { ApperioErrorBoundary }
from "@apperio/react";
<ApperioErrorBoundary
fallback={<ErrorPage />}
>
<FeatureComponent />
</ApperioErrorBoundary>
// Automatically captures:
// - Error name, message, stack
// - Component tree (componentStack)
// - Breadcrumbs at time of crashMiddleware wrapper, server logger, and API route handler
// middleware.ts
import { withApperioMiddleware }
from "@apperio/nextjs";
import { NextResponse } from "next/server";
const middleware = (request) => {
return NextResponse.next();
};
export default withApperioMiddleware(
middleware,
{
apiKey: process.env.APPERIO_API_KEY!,
projectId: "your-project-id",
}
);
// Automatically logs every request:
// method, path, status, duration, user-agent// lib/logger.ts
import { createServerLogger }
from "@apperio/nextjs";
export const logger = createServerLogger({
apiKey: process.env.APPERIO_API_KEY!,
projectId: "your-project-id",
environment: process.env.NODE_ENV,
});
// Use in any server component or route:
import { logger } from "@/lib/logger";
export async function GET() {
logger.info("Fetching users");
const users = await db.users.findAll();
return Response.json(users);
}import { withApperio } from "@apperio/nextjs";
// Wraps route with auto error catching
export const GET = withApperio(
async (request) => {
const data = await fetchData();
return Response.json(data);
},
{
apiKey: process.env.APPERIO_API_KEY!,
projectId: "your-project-id",
}
);
// Errors auto-captured with:
// route, method, headers, request bodyEvery option in LoggerConfig, documented
1interface LoggerConfig {2 // Required3 apiKey: string; // Your project API key4 projectId: string; // Your project ID56 // Identity & Environment7 environment?: string; // "production" | "staging" | "development"8 serviceName?: string; // Service identifier910 // Log Control11 minLogLevel?: LogLevel; // Minimum level to capture (default: TRACE)12 batchSize?: number; // Logs per batch (default: 10)13 flushInterval?: number; // Flush interval in ms (default: 5000)14 maxRetries?: number; // Max retry attempts (default: 3)15 maxBreadcrumbs?: number; // Breadcrumb trail size (default: 50)1617 // Auto-Capture18 autoCapture?: {19 errors?: boolean; // Uncaught errors (default: true)20 performance?: boolean; // Performance + Web Vitals (default: true)21 networkRequests?: boolean; // fetch/XHR monitoring (default: true)22 pageViews?: boolean; // SPA route changes (default: true)23 consoleMessages?: boolean; // console.error/warn (default: false)24 userInteractions?: boolean; // click/scroll tracking (default: false)25 };2627 // Resilience28 circuitBreaker?: {29 failureThreshold?: number; // Failures before open (default: 5)30 resetTimeout?: number; // Recovery timeout ms (default: 30000)31 halfOpenRequests?: number; // Probe requests (default: 1)32 };33 offlineQueue?: {34 maxSize?: number; // Max queued logs (default: 500)35 priorityEviction?: boolean; // Priority-based eviction (default: true)36 };37 compression?: boolean; // Gzip payloads (default: false)3839 // Privacy40 sanitization?: {41 preset?: "STRICT" | "BALANCED" | "LENIENT";42 customRules?: Array<{43 pattern: RegExp;44 replacement: string;45 }>;46 };4748 // Pattern Detection49 patternDetection?: {50 recurringErrors?: { window: number; threshold: number };51 errorSpikes?: { baselineWindow: number; spikeMultiplier: number };52 };53 onPatternDetected?: (pattern: DetectedPattern) => void;5455 // Remote Config56 remoteConfigUrl?: string; // Config endpoint URL57 remoteConfigInterval?: number; // Poll interval ms (default: 300000)5859 // Callbacks60 onError?: (error: Error) => void; // SDK error handler61 debug?: boolean; // Enable SDK debug logs (default: false)62}Every method on the Apperio logger instance, organized by domain
trace(message, data?)Trace-level log
debug(message, data?)Debug-level log
info(message, data?)Info-level log
warn(message, data?)Warning-level log
error(message, error?)Error-level log
fatal(message, error?)Fatal-level log
captureException(error, ctx?)Structured error capture
captureMessage(msg, level, data?)Structured message
addBreadcrumb(msg, cat?, data?)Add breadcrumb
startSpan(name, attrs?)Start a trace span
endSpan(spanId)End a trace span
setContext(context)Set global context
clearContext()Clear global context
flush()Force flush buffer
destroy()Cleanup and shutdown
getHealthMetrics()SDK health stats
getSanitizationAuditTrail()PII audit log
Source code and issues
Package registry
Full guides and reference
Get help from the team
Install Apperio SDK and start capturing errors, performance, network requests, and user interactions automatically.