Web (CatchDev)

@catch.dev/feedback is the web feedback SDK for catch.dev. It drops a small button into the corner of your app; when a user clicks it they can capture a screenshot of the current tab, draw on it to highlight the problem, add a note, and submit — and it lands in your dashboard under App → Feedback.

It's the web sibling of the native iOS and Android feedback SDKs and speaks the same wire contract. Zero runtime dependencies, framework-agnostic, and rendered inside a Shadow DOM so it never collides with your app's styles.

Screenshot capture needs a secure context (HTTPS or localhost) and a user gesture. This SDK captures user feedback, not crashes — for error tracking, use the @catch.dev/* error SDKs.

1. Install

Early access: @catch.dev/feedback is not on the public npm registry yet — it publishes (npm + unpkg) at public launch. Contact us for early access.

npm

npm install @catch.dev/feedback

import { CatchDev } from '@catch.dev/feedback';

CatchDev.start('ck_your_key');

CDN (<script>, at public launch)

<script
  src="https://unpkg.com/@catch.dev/feedback/dist/feedback.iife.js"
  data-key="ck_your_key"
></script>

The script auto-starts from data-key and exposes window.CatchDev.

2. Get your access key

In the dashboard, open your app and go to API Keys. Create a key and copy it.

3. Start the SDK

import { CatchDev } from '@catch.dev/feedback';

CatchDev.start('ck_your_key');

A floating button appears in the bottom-right corner. Web has no shake gesture, so the button is the default trigger — you can also open the reporter yourself from any click handler:

myButton.addEventListener('click', () => CatchDev.presentReporter());

Pass options as a second argument (or use the object form CatchDev.start({ apiKey, ... })):

CatchDev.start('ck_your_key', {
  endpoint: 'https://api.catch.dev', // override for self-hosted / local
  environment: 'production',
  appVersion: '1.4.0',               // your release (no reliable web source)
  launcher: true,                    // show the floating button (default)
  shortcut: 'ctrl+shift+f',          // optional keyboard shortcut to open
});

4. Options

CatchDev.setUser('123', 'user@example.com');   // attach an identity
CatchDev.setMetadata({ screen: 'Checkout' });  // custom key/values (sent as JSON meta)
CatchDev.putMetadata('cartId', '42');          // merge a single key
CatchDev.setEnvironment('production');         // tag the environment
CatchDev.isLauncherEnabled = false;            // hide the floating button
CatchDev.presentReporter();                    // open the reporter manually
CatchDev.onFeedbackSent = (result) => {        // delivery callback
  if (result.ok) console.log('sent', result.id);
};
CatchDev.isDebugLoggingEnabled = true;         // console diagnostics

5. View feedback

Submitted reports appear in the dashboard under App → Feedback, with the annotated screenshot, the message, and device context.

Privacy

Screenshots are captured with the browser's built-in screen-capture API (getDisplayMedia), which requires a secure context (HTTPS or localhost), a user gesture, and a one-time "share this tab" permission prompt — nothing is captured or sent until the user opts in and taps Send. Where capture isn't available (the user declines, an insecure context, or a mobile browser) the reporter still sends a text-only report. Captured frames may contain personal data; consider masking sensitive fields before your users report from secure screens.