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.
- Langage dominant
- TypeScript
- Étoiles
- 8.7k
- Forks
- 1.8k
- Merge moyen
- 1 j 17 h
- PR mergées (30 j)
- 515
Description
### 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.
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.