Skip to content

TypeError: Cannot read properties of undefined (reading 'contains') #905

@reintroducing

Description

@reintroducing

We're using Sentry to log errors in our production application and I randomly see this error pop up from time to time. I haven't been able to figure out why it is happening so I've mostly ignored it, but I actually was able to reproduce it locally today by complete accident. I have a custom Modal component that uses focus-trap-react and I believe that is where the error originates. I'm using the latest version of Chrome on the latest version of MacOS so I don't think this is specific to any certain browser (I've seen the Sentry error come through in Chrome on Windows 10 as well from our production app users).

This is the error I'm seeing:
Screenshot 2023-01-24 at 8 29 15 AM
It is interesting how/why its happening. For this particular case, I have the modal open and all I'm doing is automatically calling a download link for a PDF (and a dummy PDF at that) as the modal is closing:

const onDownloadPdf = () => {
    const a = document.createElement('a');

    a.href =
        'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';
    a.target = '_blank';

    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
};

While the download is happening and opening a new tab with the PDF, the modal is closing in the other tab at the same time. This seems to be an important distinction because if I comment out the code inside of onDownloadPdf but still call the method, it does not error. It's almost as if the concept of opening a new tab with a PDF in it is causing this error, but I can't figure out the correlation nor track it down further (it just doesn't make much sense to me as to why this would be happening).

I'm posting here in hopes of possibly triggering something in your mind, since you know the internals of the codebase, that may register as a possible issue based on the above information so that hopefully we can get to the bottom of this. I know this is pretty vague but perhaps it may be helpful in trying to resolve this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions