@glasspane/sdk

GlassPane is a plug-and-play frontend observability SDK that captures:

• ✅ JavaScript errors & unhandled promise rejections
• ✅ Performance metrics (TTFB, DOM load, etc.)
• ✅ Rage clicks & dead clicks
• ✅ SPA navigation & DOM interaction tracking
• ✅ Element visibility & scroll impressions
• 🔒 (Pro) Long tasks, heatmaps, replay support, and more

🚀 Installation

npm install @glasspane/sdk

🧠 Usage

🆓 Free Tier Example

import { init } from "@glasspane/sdk";

init({
  projectId: "glp_free_abc123",
});

You get automatic tracking of:

• JavaScript errors
• Performance metrics
• SPA route changes
• DOM click interactions

💳 Pro Tier Example

import { init } from "@glasspane/sdk";

init({
  projectId: "glp_pro_xyz789",
  licenseKey: "glp_live_12345-67890-ABCDE",
});

This unlocks additional advanced features:

• Rage click detection
• Dead click detection
• Long task reporting
• Scroll & element visibility impressions

📦 What It Tracks Automatically

| Event Type | Free | Pro | | ------------------ | ---- | --- | | error | ✅ | ✅ | | promiseRejection | ✅ | ✅ | | performance | ✅ | ✅ | | click | ✅ | ✅ | | navigation | ✅ | ✅ | | console logs | ✅ | ✅ | | rageClick | ❌ | ✅ | | deadClick | ❌ | ✅ | | longTask | ❌ | ✅ | | elementVisible | ❌ | ✅ |

🛠️ Custom Event Tracking

You can also manually send events:

import { track } from "@glasspane/sdk";

track({
  eventType: "custom",
  severity: "info",
  message: "User clicked upgrade",
  tags: { source: "pricing-page" },
});

📌 Setup Requirements

• You’ll need a projectId (free or pro)
• For pro features, also request a licenseKey
• All events are sent to https://glasspane-api.fly.dev/track (built-in)

🔐 Security & Control

• All access control is server-side
• SDK does not expose internal config
• Feature gating is enforced by your backend via projectId or licenseKey

🧾 License

MIT © Daniel Selga

🌍 Learn More

Visit https://glasspane.io for documentation, dashboard access, and pricing.