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.

Abierto
#18,791 10 comentarios 0 reacciones 1 asignado Reclamado por @andreiborza Ver en GitHub
Browser Bug Replays
Lenguaje dominante
TypeScript
Estrellas
8.7k
Forks
1.8k
Merge medio
1 d 17 h
PR fusionados (30 d)
523

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.