minor optimizations (#227)

Author: lxsmnsyc

packages/scan/src/core/monitor/index.ts

@@ -5,7 +5,7 @@ import {
   getTimings,
   isCompositeFiber,
 } from 'bippy';
-import { useEffect } from 'react';
+import { type FC, useEffect } from 'react';
 import {
   type MonitoringOptions,
   ReactScanInternals,
@@ -43,23 +43,29 @@ export type MonitoringWithoutRouteProps = Omit<
   'route' | 'path'
 >;
 
-export const Monitoring = ({
+const DEFAULT_URL = 'https://monitoring.react-scan.com/api/v1/ingest';
+
+function noopCatch() {
+  return null;
+}
+
+export const Monitoring: FC<MonitoringProps> = ({
   url,
   apiKey,
   params,
   path = null, // path passed down would be reactive
   route = null,
   commit = null,
   branch = null,
-}: MonitoringProps) => {
+}) => {
   if (!apiKey)
     throw new Error('Please provide a valid API key for React Scan monitoring');
-  url ??= 'https://monitoring.react-scan.com/api/v1/ingest';
+  url ??= DEFAULT_URL;
 
   Store.monitor.value ??= {
     pendingRequests: 0,
     interactions: [],
-    session: getSession({ commit, branch }).catch(() => null),
+    session: getSession({ commit, branch }).catch(noopCatch),
     url,
     apiKey,
     route,
@@ -90,7 +96,7 @@ export const scanMonitoring = (options: MonitoringOptions) => {
 
 let flushInterval: ReturnType<typeof setInterval>;
 
-export const startMonitoring = () => {
+export const startMonitoring = (): void => {
   if (!Store.monitor.value) {
     if (process.env.NODE_ENV !== 'production') {
       throw new Error(
@@ -148,7 +154,7 @@ export const startMonitoring = () => {
 const aggregateComponentRenderToInteraction = (
   fiber: Fiber,
   renders: Array<Render>,
-) => {
+): void => {
   const monitor = Store.monitor.value;
   if (!monitor || !monitor.interactions || monitor.interactions.length === 0)
     return;

packages/scan/src/core/monitor/performance.ts

@@ -65,10 +65,6 @@ const minifiedPatterns = [
 ];
 
 const isMinified = (name: string): boolean => {
-  if (!name || typeof name !== 'string') {
-    return true;
-  }
-
   for (let i = 0; i < minifiedPatterns.length; i++) {
     if (minifiedPatterns[i].test(name)) return true;
   }
@@ -149,8 +145,7 @@ const getFirstNamedAncestorCompositeFiber = (element: Element) => {
   while (!parentCompositeFiber && curr.parentElement) {
     curr = curr.parentElement;
 
-    const { parentCompositeFiber: fiber } =
-      getCompositeComponentFromElement(curr);
+    const fiber = getCompositeComponentFromElement(curr).parentCompositeFiber;
 
     if (!fiber) {
       continue;
@@ -162,22 +157,18 @@ const getFirstNamedAncestorCompositeFiber = (element: Element) => {
   return parentCompositeFiber;
 };
 
-let unsubscribeTrackVisibilityChange: (() => void) | undefined;
 // fixme: compress me if this stays here for bad interaction time checks
 let lastVisibilityHiddenAt: number | 'never-hidden' = 'never-hidden';
 
+const onVisibilityChange = () => {
+  if (document.hidden) {
+    lastVisibilityHiddenAt = Date.now();
+  }
+};
+
 const trackVisibilityChange = () => {
-  unsubscribeTrackVisibilityChange?.();
-  const onVisibilityChange = () => {
-    if (document.hidden) {
-      lastVisibilityHiddenAt = Date.now();
-    }
-  };
+  document.removeEventListener('visibilitychange', onVisibilityChange);
   document.addEventListener('visibilitychange', onVisibilityChange);
-
-  unsubscribeTrackVisibilityChange = () => {
-    document.removeEventListener('visibilitychange', onVisibilityChange);
-  };
 };
 
 // todo: update monitoring api to expose filters for component names
@@ -226,13 +217,16 @@ export function initPerformanceMonitoring(options?: Partial<PathFilters>) {
   };
 }
 
+const POINTER_EVENTS = new Set(['pointerdown', 'pointerup', 'click']);
+const KEYBOARD_EVENTS = new Set(['keydown', 'keyup']);
+
 const getInteractionType = (
   eventName: string,
 ): 'pointer' | 'keyboard' | null => {
-  if (['pointerdown', 'pointerup', 'click'].includes(eventName)) {
+  if (POINTER_EVENTS.has(eventName)) {
     return 'pointer';
   }
-  if (['keydown', 'keyup'].includes(eventName)) {
+  if (KEYBOARD_EVENTS.has(eventName)) {
     return 'keyboard';
   }
   return null;
@@ -323,5 +317,5 @@ const setupPerformanceListener = (
     /* Should collect error logs*/
   }
 
-  return () => po.disconnect();
+  return po.disconnect.bind(po);
 };

packages/scan/src/core/monitor/utils.ts

@@ -12,17 +12,18 @@ interface ExtendedNavigator extends Navigator {
   deviceMemory?: number;
 }
 
+const MOBILE_PATTERN =
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+
+const TABLET_PATTERN = /iPad|Tablet/i;
+
 const getDeviceType = () => {
   const userAgent = navigator.userAgent;
 
-  if (
-    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-      userAgent,
-    )
-  ) {
+  if (MOBILE_PATTERN.test(userAgent)) {
     return Device.MOBILE;
   }
-  if (/iPad|Tablet/i.test(userAgent)) {
+  if (TABLET_PATTERN.test(userAgent)) {
     return Device.TABLET;
   }
   return Device.DESKTOP;
@@ -32,9 +33,7 @@ const getDeviceType = () => {
  * Measure layout time
  */
 export const doubleRAF = (callback: (...args: unknown[]) => void) => {
-  return requestAnimationFrame(() => {
-    requestAnimationFrame(callback);
-  });
+  return requestAnimationFrame(requestAnimationFrame.bind(window, callback));
 };
 
 export const generateId = () => {