@shopify/react-performance - npm Package Compare versions

Comparing version 0.0.0-snapshot-20230329183100 to 0.0.0-snapshot-20230330173702

build/cjs/performance-report.js

@@ -6,2 +6,3 @@ 'use strict';
 var React = require('react');
+var performance = require('@shopify/performance');
 var network = require('@shopify/network');
@@ -13,3 +14,4 @@ var navigationListener = require('./navigation-listener.js');
   locale = undefined,
-  onError = noop
+  onError = noop,
+  finishedNavigationsOnly = true
 } = {}) {
@@ -60,5 +62,9 @@ const navigations = React.useRef([]);
   const onNavigation = React.useCallback(navigation => {
+    if (finishedNavigationsOnly && navigation.result !== performance.NavigationResult.Finished) {
+      return;
+    }
+
     navigations.current.push(navigation);
     sendReport();
-  }, [sendReport]);
+  }, [sendReport, finishedNavigationsOnly]);
   const onLifeCycleEvent = React.useCallback(event => {
@@ -65,0 +71,0 @@ events.current.push(event);

build/cjs/PerformanceReport.js

@@ -10,7 +10,9 @@ 'use strict';
   onError,
-  locale
+  locale,
+  finishedNavigationsOnly
 }) {
   performanceReport.usePerformanceReport(url, {
     onError,
-    locale
+    locale,
+    finishedNavigationsOnly
   });
@@ -17,0 +19,0 @@ return null;

build/ts/performance-report.d.ts

 export interface ErrorHandler {
     (error: any): void;
 }
-export declare function usePerformanceReport(url: string, { locale, onError, }?: {
+export interface UsePerformanceReportOptions {
     locale?: string;
     onError?: ErrorHandler;
-}): void;
+    finishedNavigationsOnly?: boolean;
+}
+export declare function usePerformanceReport(url: string, { locale, onError, finishedNavigationsOnly, }?: UsePerformanceReportOptions): void;
 //# sourceMappingURL=performance-report.d.ts.map

build/ts/PerformanceReport.d.ts

@@ -6,5 +6,6 @@ import type { ErrorHandler } from './performance-report';
     locale?: string;
+    finishedNavigationsOnly?: boolean;
 }
-export declare function PerformanceReport({ url, onError, locale }: Props): null;
+export declare function PerformanceReport({ url, onError, locale, finishedNavigationsOnly, }: Props): null;
 export {};
 //# sourceMappingURL=PerformanceReport.d.ts.map

package.json

 {
   "name": "@shopify/react-performance",
-  "version": "0.0.0-snapshot-20230329183100",
+  "version": "0.0.0-snapshot-20230330173702",
   "license": "MIT",
@@ -27,3 +27,3 @@ "description": "Primitives to measure your React application's performance using `@shopify/performance`",
   "dependencies": {
-    "@shopify/performance": "0.0.0-snapshot-20230329183100"
+    "@shopify/performance": "^3.2.5"
   },
@@ -30,0 +30,0 @@ "peerDependencies": {

README.md

@@ -287,2 +287,19 @@ # `@shopify/react-performance`
 
+##### Including non-Finished Navigations
+
+By default, `usePerformanceReport` will only report on navigations that were "Finished" (ie. a performance mark with Stage.Complete was rendered). If you want to include Navigations that were "Cancelled" or "Timed Out" you can specify those.
+
+```tsx
+// App.tsx
+import React from 'react';
+import {NavigationResult} from '@shopify/performance';
+import {usePerformanceReport} from '@shopify/react-performance';
+import {ProductPage} from './ProductPage';
+
+function App() {
+  usePerformanceReport('/performance-report', {finishedNavigationsOnly: false});
+  return <ProductPage />;
+}
+```
+
 ### Components
@@ -289,0 +306,0 @@

No alert changes

Improved metrics

Total package byte prevSize

41396

increased by4.47%

Lines of code

467

increased by3.78%

Number of lines in readme file

318

increased by5.65%

Dependency changes

• + Added@shopify/performance@3.2.5(transitive)

• - Removed@shopify/performance@0.0.0-snapshot-20230329183100(transitive)

• Updated@shopify/performance@^3.2.5