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: initial web vitals instrumentation #84

Merged
merged 10 commits into from
Feb 27, 2024

Conversation

pkanal
Copy link
Contributor

@pkanal pkanal commented Feb 21, 2024

Which problem is this PR solving?

Adds basic web vitals span based auto-instrumentation. Heavily based on what will be available upstream, with the main difference being that the upstream instrumentation will be based on events, we'll have to support that down the line as well.

Should align very closely with the spec laid out in #61

Short description of the changes

  • Adds web vitals auto-instrumentation based on the web-vitals package
  • Adds option to specify which vitals should be tracked as well as a default of tracking CLS, LCP and INP.
  • Adds tests to check spans created have the attributes we expect

Out of scope for this PR

This PR is really aimed at getting the base instrumentation into the package so there will be follow up work to:

  • Add more options based on the options available for configuring web-vitals in the main package
  • Automatically initializing web vitals and the config to make that happen
  • Smoke tests

How to verify that this has the expected result

  • Run the example app to see web vitals spans being sent.

@pkanal pkanal changed the title Purvi/web vitals instrumentation feat: initial web vitals instrumentation Feb 21, 2024
@pkanal pkanal added the type: enhancement New feature or request label Feb 21, 2024
@pkanal pkanal self-assigned this Feb 21, 2024
@pkanal pkanal added this to the Beta milestone Feb 21, 2024
@pkanal pkanal marked this pull request as ready for review February 26, 2024 16:20
@pkanal pkanal requested review from a team as code owners February 26, 2024 16:20

if (this.vitalsToTrack.includes('LCP')) {
onLCP((vital) => {
this.onReportLCP(vital);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I went back and forth a lot on whether to make these separate onReport functions, or whether to make a single generic one. I found that the types and tests worked out a lot better with them all being more specific.

Copy link
Contributor

Choose a reason for hiding this comment

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

i ❤️ the separate functions

SimpleSpanProcessor,
} from '@opentelemetry/sdk-trace-base';

describe('Web Vitals Instrumentation Tests', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

For tests, decided to focus on the spans being generated instead of whether the web vitals functions fire when they're supposed to since that's covered in the tests for the web-vitals library. Will eventually want to write smoke tests for this but will make that a separate PR.

Copy link
Contributor

@ahrbnsn ahrbnsn left a comment

Choose a reason for hiding this comment

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

beautiful!

@pkanal pkanal merged commit 018e1d3 into main Feb 27, 2024
9 checks passed
@pkanal pkanal deleted the purvi/web-vitals-instrumentation branch February 27, 2024 15:15
Copy link
Contributor

@JamieDanielson JamieDanielson left a comment

Choose a reason for hiding this comment

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

This is great!

},
) {
super('@honeycombio/instrumentation-web-vitals', '0.0.1', {
// NOTE: this is an unfortunate necessity to initially set
Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you for adding a detailed note here!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Web Vitals autoinstrumentation
3 participants