From 715b5d60daba66e20b1eab709dd1f0cbe3b624ea Mon Sep 17 00:00:00 2001 From: housseindjirdeh Date: Fri, 5 Jun 2020 17:35:18 -0400 Subject: [PATCH 1/5] adds web vitals lib + documentation --- docusaurus/docs/measuring-performance.md | 65 +++++++++++++++++++ docusaurus/website/sidebars.json | 1 + packages/cra-template/template/src/index.js | 6 ++ .../template/src/reportWebVitals.js | 13 ++++ packages/react-scripts/package.json | 1 + 5 files changed, 86 insertions(+) create mode 100644 docusaurus/docs/measuring-performance.md create mode 100644 packages/cra-template/template/src/reportWebVitals.js diff --git a/docusaurus/docs/measuring-performance.md b/docusaurus/docs/measuring-performance.md new file mode 100644 index 00000000000..2265083a95a --- /dev/null +++ b/docusaurus/docs/measuring-performance.md @@ -0,0 +1,65 @@ +--- +id: measuring-performance +title: Measuring Performance +--- + +By default, Create React App includes a performance relayer that allows you to measure and analyze +the performance of your application using different metrics. + +To measure any of the supported metrics, you only need to pass a function into the `reportWebVitals` +function in `index.js`: + +```js +reportWebVitals(console.log); +``` + +This function is fired when the final values for any of the metrics have finished calculating on the +page. You can use it to log any of the results to the console or send to a particular endpoint. + +## Web Vitals + +[Web Vitals](https://web.dev/vitals/) are a set of useful metrics that aim to capture the user +experience of a web page. In Create React App, a third-party library is used to measure these +metrics ([web-vitals](https://github.com/GoogleChrome/web-vitals)). + +To understand more about the object returned to the function when a metric value is calculated, +refer to the [documentation](https://github.com/GoogleChrome/web-vitals/#types). The [Browser +Support](https://github.com/GoogleChrome/web-vitals/#browser-support) section also explains which browsers are supported. + +## Sending results to analytics + +With the `reportWebVitals` function, you can send any of results to an analytics endpoint to measure and track real user performance on your site. For example: + +```js +function sendToAnalytics(metric) { + const body = JSON.stringify(metric); + const url = 'https://example.com/analytics'; + + // Use `navigator.sendBeacon()` if available, falling back to `fetch()` + if (navigator.sendBeacon) { + navigator.sendBeacon(url, body); + } else { + fetch(url, { body, method: 'POST', keepalive: true }); + } +} + +reportWebVitals(sendToAnalytics); +``` + +> **Note:** If you use Google Analytics, use the `id` value to make it easier to construct metric distributions manually (to calculate percentiles, etc…). +> +> ```js +> function sendToAnalytics({id, name, value}) { +> ga('send', 'event', { +> eventCategory: 'Web Vitals', +> eventAction: name, +> eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers +> eventLabel: id, // id unique to current page load +> nonInteraction: true, // avoids affecting bounce rate +> }); +> } +> +> reportWebVitals(sendToAnalytics);\ +> ``` +> +> Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics). diff --git a/docusaurus/website/sidebars.json b/docusaurus/website/sidebars.json index f51541db097..386a29da1bf 100644 --- a/docusaurus/website/sidebars.json +++ b/docusaurus/website/sidebars.json @@ -36,6 +36,7 @@ "adding-a-router", "adding-custom-environment-variables", "making-a-progressive-web-app", + "measuring-performance", "production-build" ], "Testing": ["running-tests", "debugging-tests"], diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js index f85c4d0ffde..b0ad2fba526 100644 --- a/packages/cra-template/template/src/index.js +++ b/packages/cra-template/template/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import reportWebVitals from './reportWebVitals'; ReactDOM.render( @@ -15,3 +16,8 @@ ReactDOM.render( // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA serviceWorker.unregister(); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(console.log); diff --git a/packages/cra-template/template/src/reportWebVitals.js b/packages/cra-template/template/src/reportWebVitals.js new file mode 100644 index 00000000000..436ab8df817 --- /dev/null +++ b/packages/cra-template/template/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = (onPerfEntry) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +} + +export default reportWebVitals; diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 4fc9412323b..faf739fec31 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -79,6 +79,7 @@ "terser-webpack-plugin": "3.0.2", "ts-pnp": "1.2.0", "url-loader": "4.1.0", + "web-vitals": "^0.2.2", "webpack": "4.43.0", "webpack-dev-server": "3.11.0", "webpack-manifest-plugin": "2.2.0", From de2187d47bc67466a84d79845c32b4eb3812536c Mon Sep 17 00:00:00 2001 From: housseindjirdeh Date: Fri, 5 Jun 2020 17:49:47 -0400 Subject: [PATCH 2/5] removes console log and fixes typo --- docusaurus/docs/measuring-performance.md | 2 +- packages/cra-template/template/src/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docusaurus/docs/measuring-performance.md b/docusaurus/docs/measuring-performance.md index 2265083a95a..b7310c531c9 100644 --- a/docusaurus/docs/measuring-performance.md +++ b/docusaurus/docs/measuring-performance.md @@ -59,7 +59,7 @@ reportWebVitals(sendToAnalytics); > }); > } > -> reportWebVitals(sendToAnalytics);\ +> reportWebVitals(sendToAnalytics); > ``` > > Read more about sending results to Google Analytics [here](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics). diff --git a/packages/cra-template/template/src/index.js b/packages/cra-template/template/src/index.js index b0ad2fba526..bdf2dd80541 100644 --- a/packages/cra-template/template/src/index.js +++ b/packages/cra-template/template/src/index.js @@ -20,4 +20,4 @@ serviceWorker.unregister(); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(console.log); +reportWebVitals(); From c8a84ba6e12538aa82d00ab7ff55e749d506855a Mon Sep 17 00:00:00 2001 From: housseindjirdeh Date: Sat, 6 Jun 2020 16:35:46 -0400 Subject: [PATCH 3/5] moves web-vitals lib to template dependency --- package.json | 3 ++- packages/cra-template-typescript/template.json | 3 ++- packages/cra-template/template.json | 3 ++- packages/react-scripts/package.json | 1 - 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 2af66700b6b..4d3a1ffd243 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,8 @@ "strip-ansi": "^6.0.0", "svg-term-cli": "^2.1.1", "tempy": "^0.2.1", - "wait-for-localhost": "^3.1.0" + "wait-for-localhost": "^3.1.0", + "web-vitals": "^0.2.2" }, "husky": { "hooks": { diff --git a/packages/cra-template-typescript/template.json b/packages/cra-template-typescript/template.json index decd08f1b4e..1599f5b42cf 100644 --- a/packages/cra-template-typescript/template.json +++ b/packages/cra-template-typescript/template.json @@ -8,7 +8,8 @@ "@types/react": "^16.9.0", "@types/react-dom": "^16.9.0", "@types/jest": "^25.0.0", - "typescript": "^3.8.0" + "typescript": "^3.8.0", + "web-vitals": "^0.2.2" } } } diff --git a/packages/cra-template/template.json b/packages/cra-template/template.json index 73f711c4620..7267f168bba 100644 --- a/packages/cra-template/template.json +++ b/packages/cra-template/template.json @@ -3,7 +3,8 @@ "dependencies": { "@testing-library/jest-dom": "^5.5.0", "@testing-library/react": "^10.0.4", - "@testing-library/user-event": "^10.1.0" + "@testing-library/user-event": "^10.1.0", + "web-vitals": "^0.2.2" } } } diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index faf739fec31..4fc9412323b 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -79,7 +79,6 @@ "terser-webpack-plugin": "3.0.2", "ts-pnp": "1.2.0", "url-loader": "4.1.0", - "web-vitals": "^0.2.2", "webpack": "4.43.0", "webpack-dev-server": "3.11.0", "webpack-manifest-plugin": "2.2.0", From b812d970d10b539598e821a4c17035924c64090a Mon Sep 17 00:00:00 2001 From: housseindjirdeh Date: Sun, 7 Jun 2020 15:15:20 -0400 Subject: [PATCH 4/5] adds web-vitals to typescript template --- .../template/src/index.tsx | 6 ++++++ .../template/src/reportWebVitals.ts | 15 +++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 packages/cra-template-typescript/template/src/reportWebVitals.ts diff --git a/packages/cra-template-typescript/template/src/index.tsx b/packages/cra-template-typescript/template/src/index.tsx index f85c4d0ffde..bdf2dd80541 100644 --- a/packages/cra-template-typescript/template/src/index.tsx +++ b/packages/cra-template-typescript/template/src/index.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; +import reportWebVitals from './reportWebVitals'; ReactDOM.render( @@ -15,3 +16,8 @@ ReactDOM.render( // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://cra.link/PWA serviceWorker.unregister(); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/packages/cra-template-typescript/template/src/reportWebVitals.ts b/packages/cra-template-typescript/template/src/reportWebVitals.ts new file mode 100644 index 00000000000..59d81aaab24 --- /dev/null +++ b/packages/cra-template-typescript/template/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +} + +export default reportWebVitals; From ba4ad05012502be174cbeb99abfa71fe675fd330 Mon Sep 17 00:00:00 2001 From: Ian Schmitz Date: Wed, 10 Jun 2020 11:54:10 -0700 Subject: [PATCH 5/5] Add web-vitals to dependency check --- tasks/e2e-installs.sh | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index fa5207cebdd..a430227c2d5 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -51,7 +51,7 @@ function exists { # Check for accidental dependencies in package.json function checkDependencies { if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \ - grep -v -q -E '^\s*"(@testing-library\/.+)|(react(-dom|-scripts)?)"'; then + grep -v -q -E '^\s*"(@testing-library\/.+)|web-vitals|(react(-dom|-scripts)?)"'; then echo "Dependencies are correct" else echo "There are extraneous dependencies in package.json" @@ -62,7 +62,7 @@ function checkDependencies { # Check for accidental dependencies in package.json function checkTypeScriptDependencies { if ! awk '/"dependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \ - grep -v -q -E '^\s*"(@testing-library\/.+)|(@types\/.+)|typescript|(react(-dom|-scripts)?)"'; then + grep -v -q -E '^\s*"(@testing-library\/.+)|web-vitals|(@types\/.+)|typescript|(react(-dom|-scripts)?)"'; then echo "Dependencies are correct" else echo "There are extraneous dependencies in package.json"