Developer SDK & Observability API

Understand Every User Session. Replay exactly what your users experienced.

Find bugs faster by watching what your users experienced. High-performance TypeScript SDK and API for session replay, live page heatmaps, developer error tracking, and custom event telemetry in headless and custom ecommerce storefronts.

Pick a Plan Start Free Onboarding Try Live Demo

01. Session Replay — What actually happened?

Watch every user interaction exactly as it happened. Mouse movements, clicks, scrolling, typing, navigation, and page transitions with variable playback speed (1x to 8x) and inactive period skipping.

Pixel-perfect DOM reconstruction without heavy video recording
Dedicated Mobile Portrait fullscreen mode for smartphone sessions
High-contrast glowing click, tap, and double-click ripple bursts

02. JavaScript Errors — Why did the page break?

Automatically capture client-side JavaScript exceptions and unhandled promise rejections with full diagnostic context so developers know why the page broke.

Complete stack trace, source file, and line number
Exact browser, OS, device, and viewport dimensions
1-click jump to the visual moment the error occurred in the replay

03. Network Requests — Was the API working?

Inspect every HTTP fetch and XHR request made during a session to catch slow backend endpoints and failing third-party integrations.

Request URL, HTTP method (GET, POST, PUT, DELETE), and status codes
Response latency duration timings and error flags
Pinpoint checkout API bottlenecks and payment gateway timeouts

04. Console Logs — What did the browser say?

Collect browser console logs automatically (console.error, console.warn, console.log) without ever asking users for screenshots or repro steps.

Search and filter by error level (Errors, Warnings, Info, All)
Expandable multiline stack traces with 1-click copy
Timestamped chronological correlation with user actions

05. Visual Heatmaps — Where do visitors interact?

Understand where shoppers click, tap, scroll, and spend attention across your product catalogs, collection pages, and landing pages.

Real-time radial gradient thermal click density maps
Ranked top-clicked elements with click-share percentages
Desktop vs Mobile Portrait viewport comparison

06. User Journey — How did they get here?

Visualize every page users visited before an issue occurred (Landing Page → Collection → Product Page → Cart → Checkout → Payment → Error).

Step-by-step navigation history and funnel progression
Initial referrer URL and marketing campaign attribution
Detect where customers abandon cart flows

07. Rage Click Detection — Is something frustrating users?

Automatically detect rage clicks, dead clicks, rapid clicking, and broken buttons before customers file complaints or abandon their cart.

Rapid repeat tap (<800ms) automated flagging
Dead click detection on non-interactive UI elements
Instant timeline markers for quick triage

08. User Profiles — Every visitor has a story

Each visitor receives a complete profile linking their sessions, devices, locations, custom traits, and full replay history.

Unified visitor identification via TrynReplay.identify()
Complete device, browser, city, and country breakdown
Historical session archive with conversion tracking

09. Performance Insights — Is your website slow?

Measure Core Web Vitals and load performance to understand if sluggish frontend speeds are hurting your conversion rates.

Track LCP, INP, CLS, FCP, and TTFB metrics
Replay slow sessions instantly to see visual layout shifts
Optimize asset loading and 3D / virtual try-on models

10. Search Everything — Find the exact session in seconds

Filter through thousands of recordings in milliseconds using comprehensive search criteria and custom metadata.

Filter by User ID, Visitor ID, Session ID, or URL path
Filter by error status (Errors Only vs Clean Sessions)
Filter by device type (Desktop, Mobile, Tablet) and country

11. Privacy First — Capture everything without compromising privacy

Built with privacy as a foundational principle. Sensitive customer inputs and passwords never leave the browser.

Automated input, password, and credit card masking
Selective element masking with custom CSS classes
100% GDPR, CCPA, and ePrivacy ready with cookieless options

12. Developer Friendly — TypeScript SDK & REST API

Under 12KB compressed with non-blocking memory buffering. Works seamlessly with JavaScript, React, Next.js, Vue, Nuxt, Angular, Shopify, WordPress, Laravel, and Node.js.

@trynshop/replay-sdk npm package & CDN script
Single-line script embed option with Beacon API sync
Zero main-thread blocking or CPU spikes

Implementation

How to Get Started in Minutes

Install the SDK

Add @trynshop/replay-sdk to your package.json or include via script tag.

Initialize with Key

Pass your API key and configure privacy masking rules in your app bootstrap.

Track Custom Events

Send optical fitting triggers, cart updates, and user metadata.

Analyze in Real-Time

Watch session recordings, query console errors, and view click heatmaps.

npm install @trynshop/replay-sdk

import { initReplay } from "@trynshop/replay-sdk";

// Initialize lightweight session intelligence
const tracker = initReplay({
  apiKey: "pk_live_your_api_key_here",
  maskAllInputs: true,
  captureConsole: true,
  captureNetwork: true,
});

// Identify logged-in customer (optional)
tracker.identify("user_98765", {
  plan: "enterprise",
  email: "[email protected]",
});

FAQ

Frequently Asked Questions

The TypeScript SDK works across all modern web frameworks including React, Next.js (App & Pages router), Remix, Vue, Nuxt, Angular, Svelte, Shopify Hydrogen, and vanilla JavaScript.

Related Guides & Integrations