ENH: adding debugging mode and different eventlistener

src/index.js

@@ -9,6 +9,7 @@ import {
 import useEvent from './use-event';
 
 const noOp = () => {};
+let webVitalsDebug = false;
 
 const webVitalsBase = {
   age: 0,
@@ -60,6 +61,15 @@ const sendBeacon = (rawBeacon, reportingEndpoint, reportParams) => {
     ? appendReportParams(reportingEndpoint, reportParams)
     : reportingEndpoint;
 
+  if (webVitalsDebug === true) {
+    console.log('WEBVITALS DEBUG IS ON');
+    console.log(`In production, WebVitals data would be sent to ${beaconTarget} with the following payload`);
+    console.dir(rawBeacon);
+    return new Promise((resolve, reject) => {
+        resolve();
+    });
+  }
+
   if (navigator.sendBeacon) {
     const headers = { type: 'application/reports+json' };
     const blob = new Blob([beacon], headers);
@@ -88,8 +98,12 @@ const useWebVitals = ({
   loggerCallback = noOp,
   sampleRate = 100,
   reportParams,
+  webVitalsListener = 'pagehide',
+  debug = false,
 }) => {
   let pageLoadTime;
+  webVitalsDebug = debug;
+
   const [status, setStatus] = useState({ error: false });
   const shouldSendVitals = enabled && shouldSample(sampleRate);
 
@@ -111,7 +125,7 @@ const useWebVitals = ({
     sendBeacon(beacon, reportingEndpoint, reportParams).catch(loggerCallback);
   };
 
-  useEvent('pagehide', shouldSendVitals ? sendVitals : noOp);
+  useEvent(webVitalsListener, shouldSendVitals ? sendVitals : noOp);
 
   useEffect(() => {
     try {