Skip to content
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.

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

feat: Add metrics to A and Button on click #2863

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

ajay-sentry
Copy link
Contributor

Description

This PR aims to give us insight into click events occurring in the DOM for both the A and Button elements. We're using the existing Sentry metrics configuration to increment a metric on each click by hydrating the onClick event with this metric increment call.

Instead of doing each individually, this will give us a framework to get it for all A's and Buttons for free, and when our new event system is built out we can just swap out these for those instead.

Screenshots

Screen.Recording.2024-05-08.at.1.53.40.PM.mov
  • In the above video we can see the event metric names being pushed to the console

Link to Sample Entry

Legal Boilerplate

Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. In 2022 this entity acquired Codecov and as result Sentry is going to need some rights from me in order to utilize my contributions in this PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms.

Copy link
Contributor

@nicholas-codecov nicholas-codecov left a comment

Choose a reason for hiding this comment

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

Some concerns here that these will break typesafety if converted to TS

src/ui/A/A.jsx Outdated Show resolved Hide resolved
src/ui/Button/Button.jsx Outdated Show resolved Hide resolved
@codecov-staging
Copy link

codecov-staging bot commented May 8, 2024

Test Failures Detected: Due to failing tests, we cannot provide coverage reports at this time.

❌ Failed Test Results:

Completed 1589 tests with 2 failed, 1587 passed and 0 skipped.

View the full list of failed tests
Test Description Failure message
Testsuite:
ContextSwitcher

Test name:
ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation::ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation

Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"input": {"username": "codecov"}}

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div />
</body>
</html>
at callback (.../ui/ContextSwitcher/ContextSwitcher.spec.jsx:596:26)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)
Testsuite:
ExpiredBanner

Test name:
ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage::ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage

Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "dismissed-top-banners", "{&quot;global-top-expired-trial-banner&quot;:&quot;true&quot;}"

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div>
<div
class="h-fit w-full px-4 py-2 lg:inline-flex lg:min-h-[38px] bg-ds-gray-primary"
data-testid="top-banner-root"
>
<div
class="flex grow-0 items-center gap-1 pb-2 md:pb-0"
>
<span>
<p
class="font-semibold"
>
<span
class="pr-2 text-xl"
>
🎉
</span>
The organization's 14-day free Codecov Pro trial has ended.

<a
class="
font-sans cursor-pointer

hover:underline

focus:ring-2
text-ds-blue inline-flex items-center gap-1"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Add payment method
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
chevron-right.svg
</svg>
</a>
</p>
</span>
</div>
<div
class="flex flex-1 items-center justify-end gap-2"
>
<a
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-white bg-ds-blue-darker border-ds-blue-quinary
border-solid border shadow

hover:bg-ds-blue-quinary
"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Upgrade
</a>
<button
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-ds-gray-quaternary

hover:text-ds-gray-octonary
"
data-cy="dismiss-global-top-expired-trial-banner"
data-marketing="dismiss-global-top-expired-trial-banner"
data-testid="dismiss-global-top-expired-trial-banner"
>
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
x.svg
</svg>
</button>
</div>
</div>
</div>
</body>
</html>
at callback (.../GlobalTopBanners/TrialBanner/ExpiredBanner.spec.tsx:66:33)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)

1 similar comment
@codecov-qa
Copy link

codecov-qa bot commented May 8, 2024

Test Failures Detected: Due to failing tests, we cannot provide coverage reports at this time.

❌ Failed Test Results:

Completed 1589 tests with 2 failed, 1587 passed and 0 skipped.

View the full list of failed tests
Test Description Failure message
Testsuite:
ContextSwitcher

Test name:
ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation::ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation

Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"input": {"username": "codecov"}}

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div />
</body>
</html>
at callback (.../ui/ContextSwitcher/ContextSwitcher.spec.jsx:596:26)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)
Testsuite:
ExpiredBanner

Test name:
ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage::ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage

Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "dismissed-top-banners", "{&quot;global-top-expired-trial-banner&quot;:&quot;true&quot;}"

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div>
<div
class="h-fit w-full px-4 py-2 lg:inline-flex lg:min-h-[38px] bg-ds-gray-primary"
data-testid="top-banner-root"
>
<div
class="flex grow-0 items-center gap-1 pb-2 md:pb-0"
>
<span>
<p
class="font-semibold"
>
<span
class="pr-2 text-xl"
>
🎉
</span>
The organization's 14-day free Codecov Pro trial has ended.

<a
class="
font-sans cursor-pointer

hover:underline

focus:ring-2
text-ds-blue inline-flex items-center gap-1"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Add payment method
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
chevron-right.svg
</svg>
</a>
</p>
</span>
</div>
<div
class="flex flex-1 items-center justify-end gap-2"
>
<a
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-white bg-ds-blue-darker border-ds-blue-quinary
border-solid border shadow

hover:bg-ds-blue-quinary
"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Upgrade
</a>
<button
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-ds-gray-quaternary

hover:text-ds-gray-octonary
"
data-cy="dismiss-global-top-expired-trial-banner"
data-marketing="dismiss-global-top-expired-trial-banner"
data-testid="dismiss-global-top-expired-trial-banner"
>
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
x.svg
</svg>
</button>
</div>
</div>
</div>
</body>
</html>
at callback (.../GlobalTopBanners/TrialBanner/ExpiredBanner.spec.tsx:66:33)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)

Copy link

codecov bot commented May 8, 2024

Test Failures Detected: Due to failing tests, we cannot provide coverage reports at this time.

❌ Failed Test Results:

Completed 1589 tests with 2 failed, 1587 passed and 0 skipped.

  • Total ❄️7 flaky tests.
View the full list of failed tests
Test Description Failure message
Testsuite:
ContextSwitcher

Test name:
ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation::ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation

Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"input": {"username": "codecov"}}

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div />
</body>
</html>
at callback (.../ui/ContextSwitcher/ContextSwitcher.spec.jsx:596:26)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)
Testsuite:
ExpiredBanner

Test name:
ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage::ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage

Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "dismissed-top-banners", "{&quot;global-top-expired-trial-banner&quot;:&quot;true&quot;}"

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div>
<div
class="h-fit w-full px-4 py-2 lg:inline-flex lg:min-h-[38px] bg-ds-gray-primary"
data-testid="top-banner-root"
>
<div
class="flex grow-0 items-center gap-1 pb-2 md:pb-0"
>
<span>
<p
class="font-semibold"
>
<span
class="pr-2 text-xl"
>
🎉
</span>
The organization's 14-day free Codecov Pro trial has ended.

<a
class="
font-sans cursor-pointer

hover:underline

focus:ring-2
text-ds-blue inline-flex items-center gap-1"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Add payment method
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
chevron-right.svg
</svg>
</a>
</p>
</span>
</div>
<div
class="flex flex-1 items-center justify-end gap-2"
>
<a
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-white bg-ds-blue-darker border-ds-blue-quinary
border-solid border shadow

hover:bg-ds-blue-quinary
"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Upgrade
</a>
<button
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-ds-gray-quaternary

hover:text-ds-gray-octonary
"
data-cy="dismiss-global-top-expired-trial-banner"
data-marketing="dismiss-global-top-expired-trial-banner"
data-testid="dismiss-global-top-expired-trial-banner"
>
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
x.svg
</svg>
</button>
</div>
</div>
</div>
</body>
</html>
at callback (.../GlobalTopBanners/TrialBanner/ExpiredBanner.spec.tsx:66:33)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)

Copy link

codecov-public-qa bot commented May 8, 2024

Test Failures Detected: Due to failing tests, we cannot provide coverage reports at this time.

❌ Failed Test Results:

Completed 1589 tests with 2 failed, 1587 passed and 0 skipped.

View the full list of failed tests
Test Description Failure message
Testsuite:
ContextSwitcher
Test name:
ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation::ContextSwitcher when custom modal component is passed when user clicks on an org fires update org mutation
Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: {"input": {"username": "codecov"}}

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div />
</body>
</html>
at callback (.../ui/ContextSwitcher/ContextSwitcher.spec.jsx:596:26)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)
Testsuite:
ExpiredBanner
Test name:
ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage::ExpiredBanner rendering banner rendering upgrade button user clicks the button calls local storage
Envs:
- default
Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "dismissed-top-banners", "{&quot;global-top-expired-trial-banner&quot;:&quot;true&quot;}"

Number of calls: 0

Ignored nodes: comments, script, style
<html>
<head />
<body>
<div>
<div
class="h-fit w-full px-4 py-2 lg:inline-flex lg:min-h-[38px] bg-ds-gray-primary"
data-testid="top-banner-root"
>
<div
class="flex grow-0 items-center gap-1 pb-2 md:pb-0"
>
<span>
<p
class="font-semibold"
>
<span
class="pr-2 text-xl"
>
🎉
</span>
The organization's 14-day free Codecov Pro trial has ended.

<a
class="
font-sans cursor-pointer

hover:underline

focus:ring-2
text-ds-blue inline-flex items-center gap-1"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Add payment method
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
chevron-right.svg
</svg>
</a>
</p>
</span>
</div>
<div
class="flex flex-1 items-center justify-end gap-2"
>
<a
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-white bg-ds-blue-darker border-ds-blue-quinary
border-solid border shadow

hover:bg-ds-blue-quinary
"
data-cy="upgradeOrgPlan"
data-marketing="upgradeOrgPlan"
href=".../plan/gh/upgrade"
>
Upgrade
</a>
<button
class="
flex items-center gap-1
rounded py-1 px-4
transition-colors duration-150 motion-reduce:transition-none

focus:outline-none focus:ring

disabled:cursor-not-allowed
disabled:text-ds-gray-quaternary disabled:border-ds-gray-tertiary disabled:bg-ds-gray-primary
justify-center font-semibold
text-ds-gray-quaternary

hover:text-ds-gray-octonary
"
data-cy="dismiss-global-top-expired-trial-banner"
data-marketing="dismiss-global-top-expired-trial-banner"
data-testid="dismiss-global-top-expired-trial-banner"
>
<svg
class="w-4 h-4"
data-icon=""
data-testid=""
>
x.svg
</svg>
</button>
</div>
</div>
</div>
</body>
</html>
at callback (.../GlobalTopBanners/TrialBanner/ExpiredBanner.spec.tsx:66:33)
at runWithExpensiveErrorDiagnosticsDisabled (.../gazebo/gazebo/node_modules/@.../dom/dist/config.js:47:12)
at checkCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:123:76)
at checkRealTimersCallback (.../gazebo/gazebo/node_modules/@.../dom/dist/wait-for.js:117:16)
at Timeout.task [as _onTimeout] (.../gazebo/gazebo/node_modules/jsdom/lib/jsdom/browser/Window.js:516:19)
at listOnTimeout (node:internal/timers:573:17)
at processTimers (node:internal/timers:514:7)

@codecov-staging
Copy link

Bundle Report

Changes will decrease total bundle size by 37.13kB ⬇️

Bundle name Size Change
gazebo-staging-array-push 6.53MB 37.13kB ⬇️

Copy link

codecov bot commented May 8, 2024

Bundle Report

Changes will decrease total bundle size by 37.13kB ⬇️

Bundle name Size Change
gazebo-production-array-push 6.53MB 37.13kB ⬇️

@codecov-releaser
Copy link
Contributor

codecov-releaser commented May 8, 2024

✅ Deploy preview for gazebo ready!

Previews expire after 1 month automatically.

Commit Created Cloud Enterprise
97cb9b3 Wed, 08 May 2024 18:30:06 GMT Expired Expired
97cb9b3 Wed, 08 May 2024 18:31:34 GMT Cloud Enterprise

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants