enhance(telemetry): measure BCD table views, link clicks, cell expansions #12030
+196
−68
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Bundle StatsHey there, this message comes from a github action that helps you and reviewers to understand how these changes affect the size of this project's bundle. As this PR is updated, I'll keep you updated on how the bundle size is impacted. Total
View detailed bundle breakdownAdded No assets were added Removed No assets were removed Bigger No assets were bigger Smaller No assets were smaller Unchanged
|
fiji-flo
reviewed
Oct 24, 2024
caugner
force-pushed
the
MP-1619-measure-bcd-table-usage
branch
from
fbf7105
to
8a60430
Compare
caugner
changed the title
caugner
changed the title
fiji-flo
requested changes
Oct 28, 2024
| @@ -130,6 +163,11 @@ export default function BrowserCompatibilityTable({ | |||
| locale: string; | |||
| }) { | |||
| const location = useLocation(); | |||
| const gleanClick = useGleanClick(); | |||
|
|
|||
| const observedNode = useViewed(() => { | |||
There was a problem hiding this comment.
This will not work for large BCD tables. useViewed only works if 50% of the component fit on the screen. It was made for placements and it also works with the scrims. As it's crucial for us I would suggest we use useIsIntersecting directly, the 1s timeout is not really important for this.
There was a problem hiding this comment.
I looked into using useIsIntersecting(), but it requires significant boilerplate here.
How about observing the header instead? See 1d36f8d.
There was a problem hiding this comment.
I pushed 16a1f26 to allow configuring useViewed
I'm fine with using "just" the header, your choice whether you want to decide on proper options and use the whole table or if the header is good enough.
There was a problem hiding this comment.
Thanks, indeed threshold: 0 resolves the issue with long tables, see: 143719f
fiji-flo
approved these changes
Oct 29, 2024
| @@ -130,6 +163,11 @@ export default function BrowserCompatibilityTable({ | |||
| locale: string; | |||
| }) { | |||
| const location = useLocation(); | |||
| const gleanClick = useGleanClick(); | |||
|
|
|||
| const observedNode = useViewed(() => { | |||
There was a problem hiding this comment.
I pushed 16a1f26 to allow configuring useViewed
I'm fine with using "just" the header, your choice whether you want to decide on proper options and use the whole table or if the header is good enough.
caugner
commented
Oct 30, 2024
| @@ -298,6 +301,7 @@ export function useViewed(callback: Function) { | |||
| timer.current = { | |||
| timeout: window.setTimeout(() => { | |||
| timer.current = { timeout: -1 }; | |||
| setNode(undefined); | |||
There was a problem hiding this comment.
This resolves a performance issue, because the IntersectionObserver was constantly firing when scrolling over the BCD table.
There was a problem hiding this comment.
I feel like it would be better to have a separate useState() to essentially disconnect the IntersectionObserver. It could be const [isViewed, setViewed] = useState(false); and we could have a computed value const observedNode = useMemo(() => isViewed ? undefined : node, [isViewed, node]); and pass observedNode to useIsIntersecting(). Wdyt? @fiji-flo
There was a problem hiding this comment.
Suggested change
| setNode(undefined); |
We please keep it as is. While yes we can do setNode(undefined) here, let's please do this in a separate PR (ideally not now).
This resolves a performance issue, because the IntersectionObserver was constantly firing when scrolling over the BCD table.
Can you elaborate on this. As far as I know the intersection observer fires only when entering or leaving with a threshold [0]. So if you mean that with constantly, that's not an performance issue. I think our dev-server does fancy reloads and this might now play well together.
| | "yes" | ||
| | "partial" | ||
| | "preview" | ||
| | "removed" |
There was a problem hiding this comment.
Note that I added "removed" here to be able to count them separately.
| return getSupportType(currentSupport, browser); | ||
| } | ||
|
|
||
| function getSupportType( |
There was a problem hiding this comment.
To add the "removed" type, I refactored (and simplified) this function.
| className = version_removed ? "removed-partial" : "partial"; | ||
| } | ||
|
|
||
| function getSupportClassName(supportType: SupportType): string { |
There was a problem hiding this comment.
This is for backwards-compatibility, as there is no icon-removed etc
This was referenced Oct 31, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
(MP-1619)
Problem
We don't know how many users use the BCD tables.
Solution
Add measurements for viewing the BCD table, and expanding cells in it.
How did you test this change?
Ran
yarn devwith these.enventries: