README.md in quilt_rails-1.9.1 vs README.md in quilt_rails-1.9.2

- old
+ new

@@ -418,13 +418,13 @@ protect_from_forgery with: :null_session def create process_report - render json: { result: 'success' }, status: 200 + render(json: { result: 'success' }, status: 200) rescue ActionController::ParameterMissing => error - render json: { error: error.message, status: 422 } + render(json: { error: error.message }, status: 422) end end ``` 2. Add a route pointing at the controller. @@ -437,24 +437,21 @@ # rest of routes ``` ### Add annotations -Add a [`<PerformanceMark />`](https://github.com/Shopify/quilt/tree/master/packages/react-performance#performancemark) to each of your route-level components. +Add a [`usePerformanceMark`](https://github.com/Shopify/quilt/tree/master/packages/react-performance#useperformancemark) call to each of your route-level components. ```tsx // app/ui/features/Home/Home.tsx -import {PerformanceMark} from '@shopify/react-performance'; +import {usePerformanceMark} from '@shopify/react-performance'; export function Home() { - return ( - <div> - My Cool Home Page - {/* tell the library the page has finished rendering completely */} - <PerformanceMark stage="complete" id="Home" /> - </div> - ); + // tell the library the page has finished rendering completely + usePerformanceMark('complete', 'Home'); + + return <>{/* your Home page JSX goes here*/}</>; } ``` ### Send the report @@ -590,19 +587,46 @@ } ] } ``` -the above controller would send the following metrics: +given the the above controller input, the library would send the following metrics: ```ruby -StatsD.distribution('time_to_first_byte', 2, ['browser_connection_type:3g']) -StatsD.distribution('time_to_first_byte', 2, ['browser_connection_type:3g']) -StatsD.distribution('navigation_complete', 23924, ['browser_connection_type:3g']) -StatsD.distribution('navigation_usable', 23924, ['browser_connection_type:3g']) +StatsD.distribution('time_to_first_byte', 2, tags: { + browser_connection_type:'3g', +}) +StatsD.distribution('time_to_first_byte', 2, tags: { + browser_connection_type:'3g' , +}) +StatsD.distribution('navigation_complete', 23924, tags: { + browser_connection_type:'3g' , +}) +StatsD.distribution('navigation_usable', 23924, tags: { + browser_connection_type:'3g' , +}) ``` +##### Default Metrics + +The full list of metrics sent by default are as follows: + +###### For full-page load + +- `AppName.time_to_first_byte`, representing the time from the start of the request to when the server began responding with data. +- `AppName.time_to_first_paint`, representing the time from the start of the request to when the browser rendered anything to the screen. +- `AppName.time_to_first_contentful_paint` representing the time from the start of the request to when the browser rendered meaningful content to the screen. +- `AppName.dom_content_loaded` representing the time from the start of the request to when the browser fired the [DOMContentLoaded](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) event. +- `AppName.dom_load` representing the time from the start of the request to when the browser fired the [window.load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) event. + +###### For both full-page navigations and client-side page transitions + +- `AppName.navigation_usable`, representing the time it took before for the page to be rendered in a usable state. Usually this does not include data fetching or asynchronous tasks. +- `AppName.navigation_complete` representing the time it took for the page to be fully loaded, including any data fetching which blocks above-the-fold content. +- `AppName.navigation_download_size`, representing the total weight of all client-side assets (eg. CSS, JS, images). This will only be sent if there are any events with a `type` of `script` or `style`. +- `AppName.navigation_cache_effectiveness`, representing what percentage of client-side assets (eg. CSS, JS, images) were returned from the browser's cache. This will only be sent if there are any events with a `type` of `script` or `style`. + ##### Customizing `process_report` with a block The behaviour of `process_report` can be customized by manipulating the `Quilt::Performance::Client` instance yielded into its implicit block parameter. ```ruby @@ -637,9 +661,13 @@ client.on_navigation do |navigation, tags| # add tags to be sent with each distribution for this navigation tags[:connection_rtt] = navigation.connection.rtt tags[:connection_type] = navigation.connection.type tags[:navigation_target] = navigation.target + + # add a tag to allow filtering out navigations that are too long + # this is useful when you are unable to rule out missing performance marks on some pages + tags[:too_long_dont_read] = navigation.duration > 30.seconds.in_milliseconds end ``` It can also be used to compute and send entirely custom metrics.