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.

オープン
#18,791 コメント 10 件 リアクション 0 件 担当者 1 名 @andreiborza が担当を希望しています GitHub で見る
Browser Bug Replays
主要言語
TypeScript
スター
8.7k
フォーク
1.8k
平均マージ
1日 17時間
マージ済み PR(30日)
515

説明

### 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.

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。