getsentry / getsentry/sentry-javascript

Sentry Replay Recording is interacting with AlpineJS Focus Plugin to pop a new blank browser tab when Laravel Livewire tries to update a closed modal.

Đang mở
#18,791 10 bình luận 0 reaction 1 người được giao Được @andreiborza nhận Xem trên GitHub
Browser Bug Replays
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)
515

Mô tả

### Is there an existing issue for this?

- [x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- [x] I have reviewed the documentation https://docs.sentry.io/
- [x] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

### How do you use Sentry?

Sentry Saas (sentry.io)

### Which SDK are you using?

@sentry/browser

### SDK Version

10.32.1

### Framework Version

AlpineJS 3.15.0 w/packages @alpinejs/focus 3.15.0, PHP Laravel Livewire 3.6.4

### Link to Sentry event

_No response_

### Reproduction Example/SDK Setup

```javascript
import {
init,
replayIntegration,
httpClientIntegration,
browserTracingIntegration,
} from '@sentry/browser';

replayOptions = {
"maskAllText":false,
"blockAllMedia":false,
"maskAllInputs":false,
"networkDetailAllowUrls":"window.location.origin,https://127.0.0.1:41951"
};

initArgs = {
debug: false,
release:"someGitHash"
dsn: "https://myhash@myorg.ingest.us.sentry.io/projectid",
environment: "test-env",
tracesSampleRate:0.1
replaysSessionSampleRate:"0.1"
initalScope: {
tags: {
clientID: 1234,
edition: "v3",
clientName: "Some Client"
},
user: {
id: 4321,
email: "someclient@somemail.com",
name: "Some Person"
},
integrations: [
replayIntegration(replayOptions),
httpClientIntegration(),
browserTracingIntegration(),
]
};
init(initArgs);
window.Sentry = Sentry;
```

### Steps to Reproduce

1. Using Google Chrome (tested on 143.0.7499.193) only (Safari is unaffected)
2. Open a modal with annotation of `x-trap.inert="open"`. With alpine JS this should keep the background from getting focus on scroll.
3. Do something, that involves a lot of server work, but closes the modal first.
4. OBSERVE: New blank tab opens in client.

NOTE: This only happens with Sentry.replay configured, if replay configuration is omitted, it does not happen.

### Expected Result

The modal closes and no new tab is opened up in Chromium, user can continue using the site without interruption.

### Actual Result

A new tab opens up, you must close it or switch back to the still open tab with the site to continue on it.

### Additional Context

I believe this happens when the livewire server response arrives AFTER the modal is gone, and Alpine JS is trying to manipulate a now gone component. I have been unable to really norrow it down or reproduce it outside of my sizable app.

If you want a preview of it, hit me up on Sentry discord user "kassah", I can show you a recording or if you give me an hour or two heads up (during US Pacific working hours), I can provision a test environment where we can debug it together.

Thank you for your attention on this issue.

### Priority

React with 👍 to help prioritize this issue. Please use comments to provide useful context, avoiding `+1` or `me too`, to help us triage it.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.