{"_id":"@dysonic/web-replay-sdk-pc","_rev":"2-a826df7a6e0eb6403dc2390e83eda11a","name":"@dysonic/web-replay-sdk-pc","dist-tags":{"beta":"0.1.0-beta.0","latest":"0.1.0"},"versions":{"0.1.0-beta.0":{"name":"@dysonic/web-replay-sdk-pc","version":"0.1.0-beta.0","license":"MIT","_id":"@dysonic/web-replay-sdk-pc@0.1.0-beta.0","maintainers":[{"name":"yuanhongboo","email":"yuanhongboo@gmail.com"}],"dist":{"shasum":"d51bc27df0932911bcc2db44961d3eaa3294149e","tarball":"https://registry.npmjs.org/@dysonic/web-replay-sdk-pc/-/web-replay-sdk-pc-0.1.0-beta.0.tgz","fileCount":5,"integrity":"sha512-GQm7ankzrpLkMQbQwU0OFCHRgJs8ZZr3NlPa7bARGkHWMcBRmreUfIVnFJt/DAVzxnkTFRX57kqNdnnnzoEYHQ==","signatures":[{"sig":"MEUCIGO/RjLJ/P3usFS9MYahhVsT4+wfLSrlorzcy9mIXJM0AiEA8P63xJJJTnbt30hP4muvTov+6pWu61KrZdpmvt5VhGc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":24166},"main":"dist/index.cjs.js","_from":"file:dysonic-web-replay-sdk-pc-0.1.0-beta.0.tgz","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"test":"ts-node-script ../../tools/scripts/test.ts --verbose --color","build":"npm run build:cjs && npm run build:esm","clean":"rimraf dist && rimraf coverage","prebuild":"rimraf dist","build:cjs":"ts-node-script ../../tools/scripts/build.ts --mode cjs","build:esm":"ts-node-script ../../tools/scripts/build.ts --mode esm","test:coverage":"ts-node-script ../../tools/scripts/test.ts --coverage"},"_npmUser":{"name":"yuanhongboo","email":"yuanhongboo@gmail.com"},"_resolved":"/private/var/folders/81/zd5db0kd52j_qlwm_kvz2zzc0000gn/T/700f4996882fe0694bf0847cf5875831/dysonic-web-replay-sdk-pc-0.1.0-beta.0.tgz","_integrity":"sha512-GQm7ankzrpLkMQbQwU0OFCHRgJs8ZZr3NlPa7bARGkHWMcBRmreUfIVnFJt/DAVzxnkTFRX57kqNdnnnzoEYHQ==","_npmVersion":"10.8.2","description":"PC/browser replay SDK with rrweb integration and viewer helpers","directories":{},"sideEffects":false,"_nodeVersion":"18.20.8","dependencies":{"rrweb":"2.0.0-alpha.4","rrweb-player":"1.0.0-alpha.4","@dysonic/web-replay-core":"0.1.0-beta.0"},"publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/web-replay-sdk-pc_0.1.0-beta.0_1773427489707_0.8900185023843785","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@dysonic/web-replay-sdk-pc","version":"0.1.0","description":"PC/browser replay SDK with rrweb integration and viewer helpers","license":"MIT","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","sideEffects":false,"publishConfig":{"registry":"https://registry.npmjs.org"},"dependencies":{"rrweb":"2.0.0-alpha.4","rrweb-player":"1.0.0-alpha.4","@dysonic/web-replay-core":"0.1.0"},"scripts":{"build":"npm run build:cjs && npm run build:esm","build:cjs":"ts-node-script ../../tools/scripts/build.ts --mode cjs","build:esm":"ts-node-script ../../tools/scripts/build.ts --mode esm","test":"ts-node-script ../../tools/scripts/test.ts --verbose --color","test:coverage":"ts-node-script ../../tools/scripts/test.ts --coverage","clean":"rimraf dist && rimraf coverage","prebuild":"rimraf dist"},"_id":"@dysonic/web-replay-sdk-pc@0.1.0","_integrity":"sha512-p+Rg2jkwHr0viuxrnETaClLsFeTK5eJQ26ncDQMsOiYYv4gRA0CgbKanbz+rAsZY2t0u3ZL/1r4MpDNLJYhNVw==","_resolved":"/tmp/c0fa7ad73bfb9b44acece3647e6cd089/dysonic-web-replay-sdk-pc-0.1.0.tgz","_from":"file:dysonic-web-replay-sdk-pc-0.1.0.tgz","_nodeVersion":"20.20.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-p+Rg2jkwHr0viuxrnETaClLsFeTK5eJQ26ncDQMsOiYYv4gRA0CgbKanbz+rAsZY2t0u3ZL/1r4MpDNLJYhNVw==","shasum":"f624a8e10fef75a47d0777fa649bbeca209c386e","tarball":"https://registry.npmjs.org/@dysonic/web-replay-sdk-pc/-/web-replay-sdk-pc-0.1.0.tgz","fileCount":5,"unpackedSize":24152,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBd7F8C+GlKWPbiwfDcgKIcOwuqoKgd5+UYIj1rDo7w0AiBNB8JHMmrTFB2g2WD3FJqlwUE18tCHC68kAoNANuAh/g=="}]},"_npmUser":{"name":"yuanhongboo","email":"yuanhongboo@gmail.com"},"directories":{},"maintainers":[{"name":"yuanhongboo","email":"yuanhongboo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/web-replay-sdk-pc_0.1.0_1773430617445_0.5226737774915715"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-13T18:44:49.621Z","modified":"2026-03-13T19:36:57.760Z","0.1.0-beta.0":"2026-03-13T18:44:49.878Z","0.1.0":"2026-03-13T19:36:57.617Z"},"license":"MIT","description":"PC/browser replay SDK with rrweb integration and viewer helpers","maintainers":[{"name":"yuanhongboo","email":"yuanhongboo@gmail.com"}],"readme":"# @dysonic/web-replay-sdk-pc\n\nPC/browser replay SDK. Records user sessions via [rrweb](https://github.com/rrweb-io/rrweb), captures network requests, route changes, and errors automatically, then exports a `ReplayEnvelope` that can be played back in a browser viewer.\n\n## Installation\n\n```bash\nnpm install @dysonic/web-replay-sdk-pc\n```\n\n## Quick Start\n\n```typescript\nimport { createLiveWebSdk } from '@dysonic/web-replay-sdk-pc';\n\nconst sdk = createLiveWebSdk({\n  appName: 'my-app',\n  appVersion: '1.0.0',\n  maxMinutes: 5,\n  reporter: {\n    async report({ envelope, reason, extra }) {\n      await fetch('/api/replay', {\n        method: 'POST',\n        body: JSON.stringify({ envelope, reason, extra }),\n      });\n    },\n  },\n});\n\nsdk.init();\n\n// Later, when a user reports a bug:\nconst envelope = await sdk.reportIssue('User clicked submit but nothing happened');\n```\n\n## API\n\n### `createLiveWebSdk(config)`\n\nCreates and returns a `BrowserSdkInstance`. Recording does not begin until `init()` is called.\n\n```typescript\ninterface LiveWebSdkConfig {\n  appName: string;\n  appVersion: string;\n  maxMinutes?: number;          // default: 5, max: 10\n  maxBytes?: number;            // default: 5 MB\n  maskRules?: MaskRule[];       // CSS-selector-based field masking\n  now?: () => number;           // injectable clock (useful in tests)\n  reporter?: Reporter;          // called by reportIssue()\n  // rrweb options:\n  recordCanvas?: boolean;\n  inlineStylesheet?: boolean;\n  maskAllInputs?: boolean;\n  sampling?: Record<string, unknown>;\n}\n```\n\n#### Instance methods\n\n| Method | Description |\n|---|---|\n| `init()` | Start rrweb recording and browser hook registration. Idempotent. |\n| `pause()` | Pause buffering (rrweb keeps running). |\n| `resume()` | Resume buffering. |\n| `reportIssue(reason?, extra?)` | Flush the buffer, call the reporter, and return the `ReplayEnvelope`. |\n| `destroy()` | Tear down all hooks, stop rrweb, clear the buffer. |\n\n#### Automatic instrumentation\n\n`init()` registers the following browser hooks transparently:\n\n- **`window.fetch`** — records method, URL, HTTP status, and duration.\n- **`XMLHttpRequest`** — records method, URL, HTTP status, and duration.\n- **`history.pushState` / `replaceState` / `popstate`** — records route changes.\n- **`window.error`** — records uncaught exceptions.\n- **`unhandledrejection`** — records unhandled promise rejections.\n- **`document.visibilitychange`** — records tab visibility transitions.\n\nAll hooks are fully removed on `destroy()`.\n\n---\n\n### rrweb adapter\n\nIf you need lower-level control, create a standalone rrweb adapter:\n\n```typescript\nimport { createLiveRrwebAdapter, createRrwebAdapter } from '@dysonic/web-replay-sdk-pc';\nimport { record } from 'rrweb';\n\n// Convenience wrapper — uses the live rrweb record() function\nconst liveAdapter = createLiveRrwebAdapter({ maskAllInputs: true });\n\n// Generic wrapper — supply your own record() implementation\nconst customAdapter = createRrwebAdapter({ record, rrwebOptions: { maskAllInputs: true } });\n```\n\n---\n\n### Viewer utilities\n\n#### `mountReplayPlayer(target, envelope, options?)`\n\nMounts an `rrweb-player` instance into a DOM element.\n\n```typescript\nimport { mountReplayPlayer } from '@dysonic/web-replay-sdk-pc';\n\nmountReplayPlayer(document.getElementById('player')!, envelope, {\n  width: 1024,\n  height: 576,\n  autoPlay: false,\n  showController: true,\n});\n```\n\n#### `createReplayHtml(envelope, options?)`\n\nGenerates a self-contained HTML string that embeds the session and an rrweb-player. Useful for exporting standalone replay files.\n\n```typescript\nimport { createReplayHtml } from '@dysonic/web-replay-sdk-pc';\n\nconst html = createReplayHtml(envelope, {\n  title: 'Bug Report — Checkout Flow',\n  rrwebPlayerScriptUrl: 'https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js',\n  rrwebPlayerStyleUrl: 'https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css',\n});\n```\n\n#### File utilities\n\n```typescript\nimport {\n  parseReplayFile,\n  exportReplayFile,\n  createOfflineViewerDocument,\n} from '@dysonic/web-replay-sdk-pc';\n\nconst envelope = parseReplayFile(jsonString);   // JSON string → ReplayEnvelope\nconst json = exportReplayFile(envelope);         // ReplayEnvelope → formatted JSON string\nconst html = createOfflineViewerDocument(envelope); // ReplayEnvelope → standalone HTML\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}