Skip to content

fix(browser): Fix memory leak in addEventListener instrumentation #5147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
Parent: Sentry JavaScript SDK Version 7.0
merged 6 commits into from
May 24, 2022
Merged

fix(browser): Fix memory leak in addEventListener instrumentation #5147

merged 6 commits into from
May 24, 2022

Conversation

@lforst
Copy link
Contributor

@lforst lforst commented May 20, 2022 •
edited
Loading

We currently have a memory leak in the instrumentation of addEventListener in @sentry/browser. It happens when users provide an object as event listener to addEventListener. The handleEvent function gets wrapped and instrumented each time the listener is attached somewhere.

This PR:

  • Aims to get rid of the memory leak
  • Adds some integration tests that tests for potential issues with the instrumentation of addEventListener in the future

Fixes #2957
Ref: https://getsentry.atlassian.net/browse/WEB-916

Reproduction of the memory leak

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://browser.sentry-cdn.com/6.19.7/bundle.min.js"></script>
  </head>
  <body>
    <h1>Listener memory leak repro</h1>
    <p>
      Instructions:<br />
      1) Open console<br />
      2) Press "add listener" a bunch of times<br />
      3) Press "trigger listener"<br />
      4) Repeat step 2 and 3<br />
      5) Examine trace<br />
    </p>
    <button onclick="addListener()">add listener</button>
    <button id="trigger">trigger listener</button>

    <script>
      Sentry.init({
        dsn: "https://[email protected]/0",
      });

      const listener = {
        handleEvent() {
          console.trace("listener called");
        },
      };

      function addListener() {
        console.log("adding listener");
        document.getElementById("trigger").addEventListener("click", listener);
      }
    </script>
  </body>
</html>

@github-actions
Copy link
Contributor

github-actions bot commented May 20, 2022 •
edited
Loading

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 19.32 KB (-4.07% 🔽)
@sentry/browser - ES5 CDN Bundle (minified) 59.9 KB (-7.3% 🔽)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 18.18 KB (-3.63% 🔽)
@sentry/browser - ES6 CDN Bundle (minified) 53.58 KB (-7.57% 🔽)
@sentry/browser - Webpack (gzipped + minified) 19.87 KB (-14.49% 🔽)
@sentry/browser - Webpack (minified) 63.03 KB (-22.87% 🔽)
@sentry/react - Webpack (gzipped + minified) 19.89 KB (-14.53% 🔽)
@sentry/nextjs Client - Webpack (gzipped + minified) 43.7 KB (-9.06% 🔽)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 25.33 KB (-2.87% 🔽)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 23.88 KB (-2.46% 🔽)

@lforst lforst force-pushed the lforst/event-fixes branch from b3f526f to 9818be5 Compare May 23, 2022 13:43
@lforst lforst marked this pull request as ready for review May 23, 2022 13:44
@lforst lforst requested review from Lms24 and kamilogorek May 23, 2022 13:44
Lms24
Lms24 approved these changes May 24, 2022
View reviewed changes
Copy link
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome stuff!

kamilogorek
kamilogorek approved these changes May 24, 2022
View reviewed changes
Copy link
Contributor

@kamilogorek kamilogorek left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simple fix, yet so much value-added through great tests. Thanks 🙏

@lforst lforst merged commit bbc9d3d into 7.x May 24, 2022
@lforst lforst deleted the lforst/event-fixes branch May 24, 2022 11:28
@lforst lforst mentioned this pull request May 24, 2022
Closed
9 tasks
AbhiPrasad pushed a commit that referenced this pull request May 30, 2022
@AbhiPrasad
fix(browser): Fix memory leak in addEventListener instrumentation (#…
9b74870 
…5147)
@AbhiPrasad AbhiPrasad added this to the 7.0.0 milestone May 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Lms24 Lms24 Lms24 approved these changes

+1 more reviewer

@kamilogorek kamilogorek kamilogorek approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

7.0.0

Development

Successfully merging this pull request may close these issues.

4 participants

@lforst @kamilogorek @Lms24 @AbhiPrasad