getsentry / getsentry/sentry-javascript
Capture Document Picture-in-Picture windows in Replay
- Ngôn ngữ chính
- TypeScript
- Star
- 8.7k
- Fork
- 1.8k
- Merge trung bình
- 1 ngày 17 giờ
- Pull request đã merge (30 ngày)
- 523
Mô tả
We have a use case where a modal is shown in Document Picture-in-Picture mode. That opens a separate window where the modal UI is rendered. With Sentry we can capture network requests, logs, errors, and related telemetry from that PiP window, but Session Replay does not capture the PiP window itself, so the modal UI is missing from the replay.
### Current behavior
- Replay/rrweb attaches to the opener document.
- A Document PiP window is a separate same-origin `Window`/`document` created via `documentPictureInPicture.requestWindow()` ([MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Picture-in-Picture_API)).
- The SDK does not hook `documentPictureInPicture` / `requestWindow`, and only one `replayIntegration()` instance is supported per page.
- Manual `start()` / `stop()` / `flush()` and canvas `snapshot()` / `addWindow` do not record PiP DOM into Session Replay playback.
- Related multi-document work is iframe-scoped only (e.g. `_experiments.recordCrossOriginIframes`, #7279, #14008, #14809, #16173, discussion #11858).
### Gap
- Product UI hosted in Document PiP is missing from replays, even when other Sentry signals from that window are present.
- Native `` PiP is browser chrome (not app DOM) and is a different surface; media is also typically blocked by default privacy settings.
### Impact
- Debugging and support workflows break when the relevant UI only exists in the PiP window.
- Customers cannot recover that visual context with current Replay APIs or config.
Requested by **david.quintas**.
--
[View Junior Session](https://junior-prod.sentry.dev/conversations/slack%3AC0B7D5XDYCD%3A1788257480.804779) [[Sentry]](https://sentry.sentry.io/explore/conversations/slack%3AC0B7D5XDYCD%3A1788257480.804779/?project=4510944073809921)
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu từ replayIntegration và phần đính kèm tài liệu rrweb được mô tả trong issue, sau đó theo dõi cách documentPictureInPicture.requestWindow() tạo tài liệu same-origin riêng biệt. So sánh điều này với phần triển khai nhiều tài liệu hiện có trong phạm vi iframe và ràng buộc một instance duy nhất. Được xem là hoàn thành khi DOM của modal PiP xuất hiện trong quá trình phát lại Session Replay mà không phụ thuộc vào các lệnh gọi thủ công tới start, stop, flush, snapshot hoặc addWindow.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- typescript
- Lĩnh vực
- frontend, observability
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- Mức độ hoạt động
- Sôi nổi
- Độ rõ ràng
- Cần làm rõ
- Mức phù hợp với người mới
- 32/100