{"_id":"@arwars/simplebug-capture","name":"@arwars/simplebug-capture","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@arwars/simplebug-capture","version":"0.1.1","description":"Embeddable browser capture SDK for collecting bug reports from websites.","license":"AGPL-3.0-only","bugs":{"url":"https://github.com/ArWars/SimpleBug/issues"},"repository":{"type":"git","url":"git+https://github.com/ArWars/SimpleBug.git","directory":"sdks/capture"},"keywords":["bug-reporting","capture-sdk","debugging","feedback-widget","react","screen-recording","screenshot"],"type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","publishConfig":{"access":"public"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./browser":{"types":"./dist/browser.d.ts","import":"./dist/browser.js","default":"./dist/browser.js"},"./react":{"types":"./react.d.ts","import":"./react.js","default":"./react.js"}},"sideEffects":["./dist/browser.js","./dist/capture.css","./dist/launcher.css"],"scripts":{"build":"bun run ./scripts/build.ts","prepack":"bun run build","dev":"bun run ./scripts/build.ts --watch","check-types":"tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.scripts.json","test":"bun test test"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"@tailwindcss/postcss":"catalog:","@simplebug/capture-core":"workspace:*","@simplebug/config":"workspace:*","@simplebug/shared":"workspace:*","@types/react":"catalog:","@types/react-dom":"catalog:","postcss":"catalog:","react":"catalog:","react-dom":"catalog:","tailwindcss":"catalog:","typescript":"catalog:"},"gitHead":"610311aa0fed4ba63f0ec9e147e71f194c3b0f74","_id":"@arwars/simplebug-capture@0.1.1","homepage":"https://github.com/ArWars/SimpleBug#readme","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-1lT6+GMFXxlkdcjCQ5GYfuhcdIH+/Q2DJWG4SdsaSkteiV/KgI5piCnUC4rh2v9Pdrw9TynHSj7uEgcMdXW+RQ==","shasum":"542ba9114c3e55b8767c7775232727393226f5c6","tarball":"https://registry.npmjs.org/@arwars/simplebug-capture/-/simplebug-capture-0.1.1.tgz","fileCount":73,"unpackedSize":450625,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCkcOBQ4prPO1sMdPsztsJmD6jYy0PBJhto7Q9SzpP1dwIhAPUjg21Jp9XGQANVdah5bnK7ROE4NW3xVP37fJp/yu61"}]},"_npmUser":{"name":"arwars","email":"ariieelesteban@gmail.com"},"directories":{},"maintainers":[{"name":"arwars","email":"ariieelesteban@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/simplebug-capture_0.1.1_1780566308154_0.6105277324771954"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-04T09:45:07.960Z","0.1.1":"2026-06-04T09:45:08.357Z","modified":"2026-06-04T09:45:08.648Z"},"maintainers":[{"name":"arwars","email":"ariieelesteban@gmail.com"}],"description":"Embeddable browser capture SDK for collecting bug reports from websites.","homepage":"https://github.com/ArWars/SimpleBug#readme","keywords":["bug-reporting","capture-sdk","debugging","feedback-widget","react","screen-recording","screenshot"],"repository":{"type":"git","url":"git+https://github.com/ArWars/SimpleBug.git","directory":"sdks/capture"},"bugs":{"url":"https://github.com/ArWars/SimpleBug/issues"},"license":"AGPL-3.0-only","readme":"# @arwars/simplebug-capture\n\nEmbeddable capture SDK for collecting bug reports from websites.\n\n## Install\n\n```bash\nnpm install @arwars/simplebug-capture\n```\n\n```bash\nbun add @arwars/simplebug-capture\n```\n\n## Quick Start\n\n### 1. Create a public key\n\nIn Simplebug, go to `Settings` -> `Public Keys`.\n\nCreate one public key per owned website or app surface, then add the exact\norigins where the widget is allowed to run, for example:\n\n- `https://example.com`\n- `https://www.example.com`\n- `http://localhost:3000`\n\nCopy the generated public key after saving. Public keys are safe to embed in\nclient-side code.\n\n### 2. Initialize the widget on your site\n\nCall `init()` from a browser entrypoint in your app:\n\n```ts\nimport { init } from \"@arwars/simplebug-capture\"\n\ninit({\n  key: \"crk_your_public_key\",\n  host: \"https://simplebug.example.com\",\n})\n```\n\nIf you are using Simplebug Cloud, `host` defaults to `https://simplebug.example.com`.\nIf you are self-hosting Simplebug, pass your own app origin:\n\n```ts\nimport { init } from \"@arwars/simplebug-capture\"\n\ninit({\n  key: \"crk_your_public_key\",\n  host: \"https://simplebug.your-company.com\",\n})\n```\n\nThat mounts the floating launcher and lets users capture a screenshot or screen\nrecording, fill out the report form, and submit directly from your site.\n\n## Usage\n\n### `init()` in any browser app\n\nUse `init()` when you want the smallest integration surface. Run it once in a\nbrowser-only entrypoint.\n\n```ts\nimport { init } from \"@arwars/simplebug-capture\"\n\ninit({\n  key: \"crk_your_public_key\",\n  host: \"https://simplebug.example.com\",\n})\n```\n\nAvailable options:\n\n- `key`: required public key from Simplebug `Settings` -> `Public Keys`\n- `host`: optional Simplebug API origin; defaults to `https://simplebug.example.com`\n- `autoMount`: mount automatically on init; defaults to `true`\n- `mountTarget`: custom element to mount into; defaults to `document.body`\n- `submitPath`: custom bug report base path; defaults to `/api/embed/bug-reports`\n- `zIndex`: custom widget stacking order\n\n`submitPath` is used as the base path for the capture control-plane flow. By\ndefault the SDK derives these routes from `/api/embed/bug-reports`:\n\n- `/api/embed/capture-token`\n- `/api/embed/bug-report-upload-session`\n- `/api/embed/bug-report-finalize`\n\nThe package also exports runtime controls if you need them:\n\n```ts\nimport { close, init, open } from \"@arwars/simplebug-capture\"\n\ninit({\n  key: \"crk_your_public_key\",\n})\n\nopen()\nclose()\n```\n\n### Next.js 15.3+ with `instrumentation-client.ts`\n\nFor Next.js 15.3 and newer, initialize the SDK once in\n`instrumentation-client.ts` so it runs globally in the browser.\n\n```ts\nimport { init } from \"@arwars/simplebug-capture\"\n\nconst capturePublicKey = process.env.NEXT_PUBLIC_SIMPLEBUG_KEY\n\nif (capturePublicKey) {\n  init({\n    key: capturePublicKey,\n    host: process.env.NEXT_PUBLIC_SIMPLEBUG_HOST ?? \"https://simplebug.example.com\",\n  })\n}\n```\n\nExample file:\n\n```ts\n// instrumentation-client.ts\nimport { init } from \"@arwars/simplebug-capture\"\n\nconst capturePublicKey = process.env.NEXT_PUBLIC_SIMPLEBUG_KEY\n\nif (capturePublicKey) {\n  init({\n    key: capturePublicKey,\n    host: process.env.NEXT_PUBLIC_SIMPLEBUG_HOST ?? \"https://simplebug.example.com\",\n  })\n}\n```\n\nRecommended environment variables:\n\n```bash\nNEXT_PUBLIC_SIMPLEBUG_KEY=crk_your_public_key\nNEXT_PUBLIC_SIMPLEBUG_HOST=https://simplebug.example.com\n```\n\nIf you are using Simplebug Cloud, you can omit\n`NEXT_PUBLIC_SIMPLEBUG_HOST` and just pass the public key.\n\n### React integration\n\nIf you prefer a React-native integration point, use the plugin from\n`@arwars/simplebug-capture/react` and mount it once near your app root.\n\n```tsx\n\"use client\"\n\nimport { CapturePlugin } from \"@arwars/simplebug-capture/react\"\n\nexport function AppProviders(): React.JSX.Element {\n  return (\n    <>\n      <CapturePlugin\n        host=\"https://simplebug.example.com\"\n        publicKey=\"crk_your_public_key\"\n      />\n      {/* rest of your app */}\n    </>\n  )\n}\n```\n\nWith environment variables:\n\n```tsx\n\"use client\"\n\nimport { CapturePlugin } from \"@arwars/simplebug-capture/react\"\n\nexport function CaptureProvider(): React.JSX.Element | null {\n  const publicKey = process.env.NEXT_PUBLIC_SIMPLEBUG_KEY\n\n  if (!publicKey) {\n    return null\n  }\n\n  return (\n    <CapturePlugin\n      host={process.env.NEXT_PUBLIC_SIMPLEBUG_HOST ?? \"https://simplebug.example.com\"}\n      publicKey={publicKey}\n    />\n  )\n}\n```\n\n`CapturePlugin` accepts the same options as `init()`, except it uses\n`publicKey` instead of `key`.\n\n## Notes\n\n- Public keys should be scoped per website or app surface.\n- Allowed origins should be exact HTTP(S) origins, including local development\n  origins you want to permit.\n- The SDK must run in a browser environment.\n- Browser permission prompts for screen capture are expected platform behavior.\n","readmeFilename":"README.md","_rev":"1-bd2b7030e2a9e5d50f068e957cb9d7ac"}