-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(rum): Add measurements support and web vitals (#2909)
- Loading branch information
Showing
16 changed files
with
558 additions
and
75 deletions.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| # web-vitals | ||
|
|
||
| > A modular library for measuring the [Web Vitals](https://web.dev/vitals/) metrics on real users. | ||
| This was vendored from: https://github.com/GoogleChrome/web-vitals | ||
|
|
||
| The commit SHA used is: [56c736b7c4e80f295bc8a98017671c95231fa225](https://github.com/GoogleChrome/web-vitals/tree/56c736b7c4e80f295bc8a98017671c95231fa225) | ||
|
|
||
| Current vendored web vitals are: | ||
|
|
||
| - LCP (Largest Contentful Paint) | ||
| - FID (First Input Delay) | ||
|
|
||
| # License | ||
|
|
||
| [Apache 2.0](https://github.com/GoogleChrome/web-vitals/blob/master/LICENSE) |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| /* | ||
| * Copyright 2020 Google LLC | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * https://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { bindReporter } from './lib/bindReporter'; | ||
| import { getFirstHidden } from './lib/getFirstHidden'; | ||
| import { initMetric } from './lib/initMetric'; | ||
| import { observe, PerformanceEntryHandler } from './lib/observe'; | ||
| import { onHidden } from './lib/onHidden'; | ||
| import { ReportHandler } from './types'; | ||
|
|
||
| interface FIDPolyfillCallback { | ||
| (value: number, event: Event): void; | ||
| } | ||
|
|
||
| interface FIDPolyfill { | ||
| onFirstInputDelay: (onReport: FIDPolyfillCallback) => void; | ||
| } | ||
|
|
||
| declare global { | ||
| interface Window { | ||
| perfMetrics: FIDPolyfill; | ||
| } | ||
| } | ||
|
|
||
| // https://wicg.github.io/event-timing/#sec-performance-event-timing | ||
| interface PerformanceEventTiming extends PerformanceEntry { | ||
| processingStart: DOMHighResTimeStamp; | ||
| cancelable?: boolean; | ||
| target?: Element; | ||
| } | ||
|
|
||
| export const getFID = (onReport: ReportHandler): void => { | ||
| const metric = initMetric('FID'); | ||
| const firstHidden = getFirstHidden(); | ||
|
|
||
| const entryHandler = (entry: PerformanceEventTiming): void => { | ||
| // Only report if the page wasn't hidden prior to the first input. | ||
| if (entry.startTime < firstHidden.timeStamp) { | ||
| metric.value = entry.processingStart - entry.startTime; | ||
| metric.entries.push(entry); | ||
| metric.isFinal = true; | ||
| report(); | ||
| } | ||
| }; | ||
|
|
||
| const po = observe('first-input', entryHandler as PerformanceEntryHandler); | ||
| const report = bindReporter(onReport, metric, po); | ||
|
|
||
| if (po) { | ||
| onHidden(() => { | ||
| po.takeRecords().map(entryHandler as PerformanceEntryHandler); | ||
| po.disconnect(); | ||
| }, true); | ||
| } else { | ||
| if (window.perfMetrics && window.perfMetrics.onFirstInputDelay) { | ||
| window.perfMetrics.onFirstInputDelay((value: number, event: Event) => { | ||
| // Only report if the page wasn't hidden prior to the first input. | ||
| if (event.timeStamp < firstHidden.timeStamp) { | ||
| metric.value = value; | ||
| metric.isFinal = true; | ||
| metric.entries = [ | ||
| { | ||
| entryType: 'first-input', | ||
| name: event.type, | ||
| target: event.target, | ||
| cancelable: event.cancelable, | ||
| startTime: event.timeStamp, | ||
| processingStart: event.timeStamp + value, | ||
| } as PerformanceEventTiming, | ||
| ]; | ||
| report(); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| }; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| /* | ||
| * Copyright 2020 Google LLC | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * https://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { bindReporter } from './lib/bindReporter'; | ||
| import { getFirstHidden } from './lib/getFirstHidden'; | ||
| import { initMetric } from './lib/initMetric'; | ||
| import { observe, PerformanceEntryHandler } from './lib/observe'; | ||
| import { onHidden } from './lib/onHidden'; | ||
| import { whenInput } from './lib/whenInput'; | ||
| import { ReportHandler } from './types'; | ||
|
|
||
| export const getLCP = (onReport: ReportHandler, reportAllChanges = false): void => { | ||
| const metric = initMetric('LCP'); | ||
| const firstHidden = getFirstHidden(); | ||
|
|
||
| let report: ReturnType<typeof bindReporter>; | ||
|
|
||
| const entryHandler = (entry: PerformanceEntry): void => { | ||
| // The startTime attribute returns the value of the renderTime if it is not 0, | ||
| // and the value of the loadTime otherwise. | ||
| const value = entry.startTime; | ||
|
|
||
| // If the page was hidden prior to paint time of the entry, | ||
| // ignore it and mark the metric as final, otherwise add the entry. | ||
| if (value < firstHidden.timeStamp) { | ||
| metric.value = value; | ||
| metric.entries.push(entry); | ||
| } else { | ||
| metric.isFinal = true; | ||
| } | ||
|
|
||
| report(); | ||
| }; | ||
|
|
||
| const po = observe('largest-contentful-paint', entryHandler); | ||
|
|
||
| if (po) { | ||
| report = bindReporter(onReport, metric, po, reportAllChanges); | ||
|
|
||
| const onFinal = (): void => { | ||
| if (!metric.isFinal) { | ||
| po.takeRecords().map(entryHandler as PerformanceEntryHandler); | ||
| metric.isFinal = true; | ||
| report(); | ||
| } | ||
| }; | ||
|
|
||
| void whenInput().then(onFinal); | ||
| onHidden(onFinal, true); | ||
| } | ||
| }; |
45 changes: 45 additions & 0 deletions
45
packages/tracing/src/browser/web-vitals/lib/bindReporter.ts
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| /* | ||
| * Copyright 2020 Google LLC | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * https://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| import { Metric, ReportHandler } from '../types'; | ||
|
|
||
| export const bindReporter = ( | ||
| callback: ReportHandler, | ||
| metric: Metric, | ||
| po: PerformanceObserver | undefined, | ||
| observeAllUpdates?: boolean, | ||
| ): (() => void) => { | ||
| let prevValue: number; | ||
| return () => { | ||
| if (po && metric.isFinal) { | ||
| po.disconnect(); | ||
| } | ||
| if (metric.value >= 0) { | ||
| if (observeAllUpdates || metric.isFinal || document.visibilityState === 'hidden') { | ||
| metric.delta = metric.value - (prevValue || 0); | ||
|
|
||
| // Report the metric if there's a non-zero delta, if the metric is | ||
| // final, or if no previous value exists (which can happen in the case | ||
| // of the document becoming hidden when the metric value is 0). | ||
| // See: https://github.com/GoogleChrome/web-vitals/issues/14 | ||
| if (metric.delta || metric.isFinal || prevValue === undefined) { | ||
| callback(metric); | ||
| prevValue = metric.value; | ||
| } | ||
| } | ||
| } | ||
| }; | ||
| }; |
Oops, something went wrong.