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(browser-utils): Update web-vitals to v4.2.4 #14439

Merged
merged 11 commits into from
Dec 2, 2024

Conversation

Lms24
Copy link
Member

@Lms24 Lms24 commented Nov 22, 2024

This PR updates the vendored web-vitals library from 3.5.2 to 4.2.4
I haven't seen any changes of major concern for us but I think it makes a lot of sense to stay up to date. Especially considering that they seem to be working on a version 5.x already.

Some noteable web-vitals changes:

  • breaking type changes (version 4.0.0)
  • INP fixes and code refactors
  • minor LCP fix for web vitals library being late-initialized. I don't think this applies to us but who knows...

Further changes from our end:

  • The onHidden utility function was NOT updated to 4.2.4 due to the new version no longer triggering correctly for Safari 12.1-14.0 (which we still support). More details in the code comment
  • Added an optional param to getNavigationEntry since ww 4.2.4 only returns the entry if the responseStart time value is plausible. This is a good change for the library but since we also use the function to create other spans and attributes, I opted to leave things as they are for these use cases by passing in the flag to skip the plausibility check. This seems to be primarily a problem with Safari, which reports responseStart: 0 sometimes.
  • Continued to add checks for the existence of WINDOW.document which web-vitals assumes to be present
  • Continued to add longtask to the array of available types in the observe function

@Lms24 Lms24 self-assigned this Nov 22, 2024
Copy link
Contributor

github-actions bot commented Nov 22, 2024

size-limit report 📦

Path Size % Change Change
@sentry/browser 23.13 KB - -
@sentry/browser - with treeshaking flags 21.83 KB - -
@sentry/browser (incl. Tracing) 35.63 KB +0.29% +105 B 🔺
@sentry/browser (incl. Tracing, Replay) 72.53 KB +0.13% +93 B 🔺
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 62.91 KB +0.15% +95 B 🔺
@sentry/browser (incl. Tracing, Replay with Canvas) 76.85 KB +0.13% +95 B 🔺
@sentry/browser (incl. Tracing, Replay, Feedback) 89.31 KB +0.1% +91 B 🔺
@sentry/browser (incl. Feedback) 39.87 KB - -
@sentry/browser (incl. sendFeedback) 27.74 KB - -
@sentry/browser (incl. FeedbackAsync) 32.55 KB - -
@sentry/react 25.8 KB - -
@sentry/react (incl. Tracing) 38.46 KB +0.22% +85 B 🔺
@sentry/vue 27.28 KB - -
@sentry/vue (incl. Tracing) 37.41 KB +0.22% +82 B 🔺
@sentry/svelte 23.28 KB - -
CDN Bundle 24.32 KB - -
CDN Bundle (incl. Tracing) 37.29 KB +0.24% +90 B 🔺
CDN Bundle (incl. Tracing, Replay) 72.15 KB +0.1% +72 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) 77.49 KB +0.11% +82 B 🔺
CDN Bundle - uncompressed 71.45 KB - -
CDN Bundle (incl. Tracing) - uncompressed 110.76 KB +0.24% +261 B 🔺
CDN Bundle (incl. Tracing, Replay) - uncompressed 223.83 KB +0.12% +261 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 237.05 KB +0.11% +261 B 🔺
@sentry/nextjs (client) 38.77 KB +0.19% +74 B 🔺
@sentry/sveltekit (client) 36.14 KB +0.25% +91 B 🔺
@sentry/node 135.08 KB - -
@sentry/node - without tracing 97.14 KB - -
@sentry/aws-serverless 109.43 KB - -

View base workflow run

Copy link

codecov bot commented Nov 22, 2024

❌ 1 Tests Failed:

Tests completed Failed Passed Skipped
313 1 312 122
View the top 1 failed tests by shortest run time
tracing/metrics/web-vitals-ttfb/test.ts should capture TTFB vital.
Stack Traces | 9.34s run time
test.ts:7:11 should capture TTFB vital.

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

Comment on lines -35 to -37
// Used to store the interaction count after a bfcache restore, since p98
// interaction latencies should only consider the current navigation.
const prevInteractionCount = 0;
Copy link
Member Author

Choose a reason for hiding this comment

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

this was extracted to the /lib/interaction.ts file

@Lms24 Lms24 force-pushed the lms/ref-update-web-vitals-lib branch from 2803e51 to fa8a690 Compare November 28, 2024 12:27
@Lms24 Lms24 requested review from mydea, timfish and s1gr1d November 29, 2024 11:35
@Lms24 Lms24 marked this pull request as ready for review November 29, 2024 11:36
@Lms24 Lms24 force-pushed the lms/ref-update-web-vitals-lib branch from eb4eeb4 to e1eff2e Compare November 29, 2024 13:23
Copy link
Member

@s1gr1d s1gr1d left a comment

Choose a reason for hiding this comment

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

Looks good :)

@Lms24 Lms24 merged commit 87b789c into develop Dec 2, 2024
120 checks passed
@Lms24 Lms24 deleted the lms/ref-update-web-vitals-lib branch December 2, 2024 09:55
alexandresoro pushed a commit to alexandresoro/ouca that referenced this pull request Dec 8, 2024
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@sentry/node](https://github.com/getsentry/sentry-javascript/tree/master/packages/node) ([source](https://github.com/getsentry/sentry-javascript)) | dependencies | minor | [`8.40.0` -> `8.42.0`](https://renovatebot.com/diffs/npm/@sentry%2fnode/8.40.0/8.42.0) |
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | dependencies | minor | [`8.40.0` -> `8.42.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/8.40.0/8.42.0) |

---

### Release Notes

<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/node)</summary>

### [`v8.42.0`](https://github.com/getsentry/sentry-javascript/blob/HEAD/CHANGELOG.md#8420)

[Compare Source](getsentry/sentry-javascript@8.41.0...8.42.0)

##### Important Changes

-   **feat(react): React Router v7 support (library) ([#&#8203;14513](getsentry/sentry-javascript#14513

    This release adds support for [React Router v7 (library mode)](https://reactrouter.com/home#react-router-as-a-library).
    Check out the docs on how to set up the integration: [Sentry React Router v7 Integration Docs](https://docs.sentry.io/platforms/javascript/guides/react/features/react-router/v7/)

##### Deprecations

-   **feat: Warn about source-map generation ([#&#8203;14533](getsentry/sentry-javascript#14533

    In the next major version of the SDK we will change how source maps are generated when the SDK is added to an application.
    Currently, the implementation varies a lot between different SDKs and can be difficult to understand.
    Moving forward, our goal is to turn on source maps for every framework, unless we detect that they are explicitly turned off.
    Additionally, if we end up enabling source maps, we will emit a log message that we did so.

    With this particular release, we are emitting warnings that source map generation will change in the future and we print instructions on how to prepare for the next major.

-   **feat(nuxt): Deprecate `tracingOptions` in favor of `vueIntegration` ([#&#8203;14530](getsentry/sentry-javascript#14530

    Currently it is possible to configure tracing options in two places in the Sentry Nuxt SDK:

    -   In `Sentry.init()`
    -   Inside `tracingOptions` in `Sentry.init()`

    For tree-shaking purposes and alignment with the Vue SDK, it is now recommended to instead use the newly exported `vueIntegration()` and its `tracingOptions` option to configure tracing options in the Nuxt SDK:

    ```ts
    // sentry.client.config.ts
    import * as Sentry from '@&#8203;sentry/nuxt';

    Sentry.init({
      // ...
      integrations: [
        Sentry.vueIntegration({
          tracingOptions: {
            trackComponents: true,
          },
        }),
      ],
    });
    ```

##### Other Changes

-   feat(browser-utils): Update `web-vitals` to v4.2.4 ([#&#8203;14439](getsentry/sentry-javascript#14439))
-   feat(nuxt): Expose `vueIntegration` ([#&#8203;14526](getsentry/sentry-javascript#14526))
-   fix(feedback): Handle css correctly in screenshot mode ([#&#8203;14535](getsentry/sentry-javascript#14535))

### [`v8.41.0`](https://github.com/getsentry/sentry-javascript/blob/HEAD/CHANGELOG.md#8410)

[Compare Source](getsentry/sentry-javascript@8.40.0...8.41.0)

##### Important Changes

-   **meta(nuxt): Require minimum Nuxt v3.7.0 ([#&#8203;14473](getsentry/sentry-javascript#14473

    We formalized that the Nuxt SDK is at minimum compatible with Nuxt version 3.7.0 and above.
    Additionally, the SDK requires the implicit `nitropack` dependency to satisfy version `^2.10.0` and `ofetch` to satisfy `^1.4.0`.
    It is recommended to check your lock-files and manually upgrade these dependencies if they don't match the version ranges.

##### Deprecations

We are deprecating a few APIs which will be removed in the next major.

The following deprecations will *potentially* affect you:

-   **feat(core): Update & deprecate `undefined` option handling ([#&#8203;14450](getsentry/sentry-javascript#14450

    In the next major version we will change how passing `undefined` to `tracesSampleRate` / `tracesSampler` / `enableTracing` will behave.

    Currently, doing the following:

    ```ts
    Sentry.init({
      tracesSampleRate: undefined,
    });
    ```

    Will result in tracing being *enabled* (although no spans will be generated) because the `tracesSampleRate` key is present in the options object.
    In the next major version, this behavior will be changed so that passing `undefined` (or rather having a `tracesSampleRate` key) will result in tracing being disabled, the same as not passing the option at all.
    If you are currently relying on `undefined` being passed, and and thus have tracing enabled, it is recommended to update your config to set e.g. `tracesSampleRate: 0` instead, which will also enable tracing in v9.

    The same applies to `tracesSampler` and `enableTracing`.

-   **feat(core): Log warnings when returning `null` in `beforeSendSpan` ([#&#8203;14433](getsentry/sentry-javascript#14433

    Currently, the `beforeSendSpan` option in `Sentry.init()` allows you to drop individual spans from a trace by returning `null` from the hook.
    Since this API lends itself to creating "gaps" inside traces, we decided to change how this API will work in the next major version.

    With the next major version the `beforeSendSpan` API can only be used to mutate spans, but no longer to drop them.
    With this release the SDK will warn you if you are using this API to drop spans.
    Instead, it is recommended to configure instrumentation (i.e. integrations) directly to control what spans are created.

    Additionally, with the next major version, root spans will also be passed to `beforeSendSpan`.

-   **feat(utils): Deprecate `@sentry/utils` ([#&#8203;14431](getsentry/sentry-javascript#14431

    With the next major version the `@sentry/utils` package will be merged into the `@sentry/core` package.
    It is therefore no longer recommended to use the `@sentry/utils` package.

-   **feat(vue): Deprecate configuring Vue tracing options anywhere else other than through the `vueIntegration`'s `tracingOptions` option ([#&#8203;14385](getsentry/sentry-javascript#14385

    Currently it is possible to configure tracing options in various places in the Sentry Vue SDK:

    -   In `Sentry.init()`
    -   Inside `tracingOptions` in `Sentry.init()`
    -   In the `vueIntegration()` options
    -   Inside `tracingOptions` in the `vueIntegration()` options

    Because this is a bit messy and confusing to document, the only recommended way to configure tracing options going forward is through the `tracingOptions` in the `vueIntegration()`.
    The other means of configuration will be removed in the next major version of the SDK.

-   **feat: Deprecate `registerEsmLoaderHooks.include` and `registerEsmLoaderHooks.exclude` ([#&#8203;14486](getsentry/sentry-javascript#14486

    Currently it is possible to define `registerEsmLoaderHooks.include` and `registerEsmLoaderHooks.exclude` options in `Sentry.init()` to only apply ESM loader hooks to a subset of modules.
    This API served as an escape hatch in case certain modules are incompatible with ESM loader hooks.

    Since this API was introduced, a way was found to only wrap modules that there exists instrumentation for (meaning a vetted list).
    To only wrap modules that have instrumentation, it is recommended to instead set `registerEsmLoaderHooks.onlyIncludeInstrumentedModules` to `true`.

    Note that `onlyIncludeInstrumentedModules: true` will become the default behavior in the next major version and the `registerEsmLoaderHooks` will no longer accept fine-grained options.

The following deprecations will *most likely* not affect you unless you are building an SDK yourself:

-   feat(core): Deprecate `arrayify` ([#&#8203;14405](getsentry/sentry-javascript#14405))
-   feat(core): Deprecate `flatten` ([#&#8203;14454](getsentry/sentry-javascript#14454))
-   feat(core): Deprecate `urlEncode` ([#&#8203;14406](getsentry/sentry-javascript#14406))
-   feat(core): Deprecate `validSeverityLevels` ([#&#8203;14407](getsentry/sentry-javascript#14407))
-   feat(core/utils): Deprecate `getNumberOfUrlSegments` ([#&#8203;14458](getsentry/sentry-javascript#14458))
-   feat(utils): Deprecate `memoBuilder`, `BAGGAGE_HEADER_NAME`, and `makeFifoCache` ([#&#8203;14434](getsentry/sentry-javascript#14434))
-   feat(utils/core): Deprecate `addRequestDataToEvent` and `extractRequestData` ([#&#8203;14430](getsentry/sentry-javascript#14430))

##### Other Changes

-   feat: Streamline `sentry-trace`, `baggage` and DSC handling ([#&#8203;14364](getsentry/sentry-javascript#14364))
-   feat(core): Further optimize debug ID parsing ([#&#8203;14365](getsentry/sentry-javascript#14365))
-   feat(node): Add `openTelemetryInstrumentations` option ([#&#8203;14484](getsentry/sentry-javascript#14484))
-   feat(nuxt): Add filter for not found source maps (devtools) ([#&#8203;14437](getsentry/sentry-javascript#14437))
-   feat(nuxt): Only delete public source maps ([#&#8203;14438](getsentry/sentry-javascript#14438))
-   fix(nextjs): Don't report `NEXT_REDIRECT` from browser ([#&#8203;14440](getsentry/sentry-javascript#14440))
-   perf(opentelemetry): Bucket spans for cleanup ([#&#8203;14154](getsentry/sentry-javascript#14154))

Work in this release was contributed by [@&#8203;NEKOYASAN](https://github.com/NEKOYASAN) and [@&#8203;fmorett](https://github.com/fmorett). Thank you for your contributions!

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC4xNDIuNyIsInVwZGF0ZWRJblZlciI6IjM4LjE0Mi43IiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJkZXBlbmRlbmNpZXMiXX0=-->

Reviewed-on: https://git.tristess.app/alexandresoro/ouca/pulls/374
Reviewed-by: Alexandre Soro <code@soro.dev>
Co-authored-by: renovate <renovate@git.tristess.app>
Co-committed-by: renovate <renovate@git.tristess.app>
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.

3 participants