Add performance relayer + documentation (web-vitals) (facebook#9116)

Co-authored-by: Brody McKee <mrmckeb@users.noreply.github.com>
Co-authored-by: Ian Schmitz <ianschmitz@gmail.com>

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).

packages/cra-template/template.json

@@ -3,9 +3,9 @@
     "dependencies": {
       "@material-ui/core": "^4.9.8",
       "@material-ui/icons": "^4.9.1",
-      "@testing-library/jest-dom": "^5.5.0",
-      "@testing-library/react": "^10.0.4",
-      "@testing-library/user-event": "^10.1.0",
+      "@testing-library/jest-dom": "^5.9.0",
+      "@testing-library/react": "^10.2.1",
+      "@testing-library/user-event": "^11.3.2",
       "axios": "^0.19.2",
       "eslint-config-airbnb": "^18.0.1",
       "eslint-config-prettier": "^6.10.0",
@@ -16,7 +16,8 @@
       "prettier": "^1.19.1",
       "react-styleguidist": "^10.6.0",
       "react-toastify": "^5.5.0",
-      "typeface-roboto": "0.0.75"
+      "typeface-roboto": "0.0.75",
+      "web-vitals": "^0.2.2"
     }
   }
 }

packages/cra-template/template/src/index.js

@@ -4,6 +4,7 @@ import "typeface-roboto"
 import App from "./App"
 import * as serviceWorker from "./serviceWorker"
 import ErrorBoundary from "./ErrorBoundary"
+import reportWebVitals from './reportWebVitals';
 
 const Root = () => (
   <React.StrictMode>
@@ -19,3 +20,8 @@ ReactDOM.render(<Root />, document.getElementById("root"))
 // 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();

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;