Skip to content

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

@kassah

Description

@kassah

Is there an existing issue for this?

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

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.

Metadata

Metadata

Assignees

No one assigned

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions