9133435724

Committed 17 May 2024 07:42PM UTC coverage: 31.857% (-0.005%) from 31.862%

Build # 9133435724

Build Type

Pull #9211

github

Committed by

jimrandomh

Commit Message

Fix failing Playwright tests

Co-Authored-By: Ollie Etherington <ollie@etherington.xyz>

Pull Request Pull Request #9211: Replace Cypress with Playwright

Run Details

4800 of 39189 branches covered (12.25%)

Branch coverage included in aggregate %.

33 of 77 new or added lines in 21 files covered. (42.86%)

19 existing lines in 7 files now uncovered.

27840 of 63270 relevant lines covered (44.0%)

179.73 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

28.36

/packages/lesswrong/lib/analyticsEvents.tsx

import { addGraphQLSchema } from './vulcan-lib/graphql';
import { RateLimiter } from './rateLimiter';
import React, { useContext, useEffect, useState, useRef, useCallback, ReactNode } from 'react'
import { hookToHoc } from './hocUtils'
import { isClient, isServer, isDevelopment, isAnyTest, isE2E } from './executionEnvironment';
import { ColorHash } from './vendor/colorHash';
import { DatabasePublicSetting } from './publicSettings';
import { getPublicSettingsLoaded } from './settingsCache';
import { throttle } from 'underscore';
import moment from 'moment';
import { Globals } from './vulcan-lib/config';

const showAnalyticsDebug = new DatabasePublicSetting<"never"|"dev"|"always">("showAnalyticsDebug", "dev");
const flushIntervalSetting = new DatabasePublicSetting<number>("analyticsFlushInterval", 1000);

addGraphQLSchema(`
  type AnalyticsEvent {
    type: String!,
    timestamp: Date!,
    props: JSON!
  }
`);

// AnalyticsUtil: An object/namespace full of functions which need to bypass
// the normal import system, because they are client- or server-specific but
// are used by code which isn't.
export const AnalyticsUtil: any = {
  // clientWriteEvents: Send a graphQL mutation from the client to the server
  // with an array of events. Available only on the client and when the react
  // tree is mounted, null otherwise; filled in by Components.AnalyticsClient.
  clientWriteEvents: null,

  // clientContextVars: A dictionary of variables that will be added to every
  // analytics event sent from the client. Client-side only.
  clientContextVars: {},

  // serverWriteEvent: Write a (single) event to the analytics database. Server-
  // side only, filled in in analyticsWriter.js; null on the client. If no
  // analytics database is configured, does nothing.
  serverWriteEvent: null,
  
  // serverPendingEvents: Analytics events that were recorded during startup
  // before we were ready to write them to the analytics DB.
  serverPendingEvents: [],
};

function getShowAnalyticsDebug() {
  if (isAnyTest)
    return false;
  const debug = getPublicSettingsLoaded() ? showAnalyticsDebug.get() : "dev";
  if (debug==="always")
    return true;
  else if (debug==="dev")
    return isDevelopment;
  else
    return false;
}

export type EventProps = AnalyticsProps | Record<string, Json | undefined>;

export function captureEvent(eventType: string, eventProps?: EventProps, suppressConsoleLog = false) {
  if (isE2E) {
    return;
  }
  try {
    if (isServer) {
      // If run from the server, we can run this immediately except for a few
      // events during startup.
      const event = {
        type: eventType,
        timestamp: new Date(),
        props: {
          ...eventProps
        }
      }
      if (!suppressConsoleLog && getShowAnalyticsDebug()) {
        serverConsoleLogAnalyticsEvent(event);
      }
      if (AnalyticsUtil.serverWriteEvent) {
        AnalyticsUtil.serverWriteEvent(event);
      } else {
        AnalyticsUtil.serverPendingEvents.push(event);
        if (AnalyticsUtil.serverPendingEvents.length > 1000) {
          // This is only supposed to be a temporary thing during startup until a
          // postgres connection is established, so report an error if there's a
          // ton of stuff in this array
          // eslint-disable-next-line no-console
          console.log(`Possible memory leak: AnalyticsUtil.serverPendingEvents.length=${AnalyticsUtil.serverPendingEvents.length}`);
        }
      }
    } else if (isClient) {
      // If run from the client, make a graphQL mutation
      const event = {
        type: eventType,
        timestamp: new Date(),
        props: {
          ...AnalyticsUtil.clientContextVars,
          ...eventProps,
        },
      };
      throttledStoreEvent(event);
      throttledFlushClientEvents();
    }
  } catch(e) {
    // eslint-disable-next-line no-console
    console.error("Error while capturing analytics event: ", e); //eslint-disable-line
  }
}

type TrackingContext = Record<string, unknown>;

const ReactTrackingContext = React.createContext<TrackingContext>({});

export type AnalyticsProps = {
  pageContext?: string,
  pageSectionContext?: string,
  pageSubSectionContext?: string,
  pageElementContext?: string,
  pageElementSubContext?: string,
  reviewYear?: string,
  path?: string,
  resourceName?: string,
  resourceUrl?: string,
  chapter?: string,
  documentSlug?: string,
  postId?: string,
  sequenceId?: string,
  commentId?: string,
  tagId?: string,
  tagName?: string,
  tagSlug?: string,
  userIdDisplayed?: string,
  hoverPreviewType?: string,
  sortedBy?: string,
  branch?: string,
  siteEvent?: string,
  href?: string,
  limit?: number,
  capturePostItemOnMount?: boolean,
  singleLineComment?: boolean,
  feedType?: string,
  onsite?: boolean,
  terms?: PostsViewTerms,
  viewType?: string,
  /** @deprecated Use `pageSectionContext` instead */
  listContext?: string,
  /** @deprecated Use `pageSectionContext` instead */
  pageSection?: "karmaChangeNotifer",
  /** @deprecated Use `pageSubSectionContext` instead */
  pageSubsectionContext?: "latestReview",
}

/**
HOW TO USE ANALYTICS CONTEXT WRAPPER COMPONENTS
When you create a new feature (page, widget,button, etc.) or change the structure of a page, 
you should wrap the relevant components in an <AnalyticsContext> component. These 
components allow passing contextual information to the analytics event capture 
that allow us to know where various events (e.g. clicks, postItem Mounts) occur.

To use an AnalyticsContext component, you wrap the components you are adding context
to in a <AnalyticsContext> component. Data is added to the context by using props, e.g.
<AnalyticsContext contextLabelOne="foo" contextLabelTwo={bar.baz._id}>
  <MyNewFeature/>
</AnalyticsContext> 

You can use analyticsContext to add whatever info you want to events captured in a section, however,
there is a convention for how to track __where__ a tracking event occurs. Please use the
following system of context labels for tracking event location:

USE THIS CONVENTION FOR TRACKING EVENT LOCATION
* pageContext={page name}> e.g. tagPage, postPage, homePage
    - (only needs to defined once for each page)
* pageSectionContext={sectionName}, e.g. recentDiscussion, gatherTownWidget, wikiSection, userDrafts
    - use for larger sections of a page
* pageSubSectionContext is used when a section meaningfully has subsections (such as bookmarks list within the recommendations section on the frontpage)
* pageElementContext={elementName}> e.g. hoverPreview, commentItem, answerItem
    -use when wanting to mark where within a section something occurs
* listContext is historical. Now just use pageSection.

When adding a new prop simply add it to the list in the type of the `props` argument here.
Arguments can be of any type that can be handled by JSON.stringify. It's fine to have a low
barrier for adding new props here.

Also, context labels and their values should be camelCase, e.g. `pageSectionContext="fromTheArchives"`, 
and *not* `page_section_context="From the Archives" or the like.

The best ways to learn the convention are 1) look at current usages, 2) discuss with others

WARNING! Once data has been recording with certain labels, it is difficult to change!
Please ensure that your context labeling follows the convention so future analysis is
easy for everyone.

WARNING! Be careful. Nested AnalyticsContext context share one context object so 1) you don't need
to repeat context labels, 2) they can overwrite each others – be carefule you don't
accidentally reuse a context label like "pageSectionContext" twice nested because the second usage
will overwrite the first.

NOTE! AnalyticsContext components will only add context data to events that are already
being tracked (e.g. linkClicks, navigate). If you've added a button or change of state, you
will likely have to add tracking manually with a captureEvent call. (Search codebase for examples or consult others)

The best way to ensure you are tracking correctly with is to look at the logs
in the client or server (ensure getShowAnalyticsDebug is returning true).
*/
export const AnalyticsContext = ({children, ...props}: AnalyticsProps & {
  children: ReactNode,
}) => {
  const existingContextData = useContext(ReactTrackingContext)

  // Create a child context, which is the parent context plus the provided props
  // merged on top of it. But create it in a referentially stable way: reuse
  // the same object, so that changes never cause child components to rerender.
  // (As long as they captured the context in the obvious way, they'll still get
  // the newest values of these props when they actually log an event.)
  const newContextData = useRef<TrackingContext>({...existingContextData});
  for (let key of Object.keys(props))
    newContextData.current[key] = props[key as keyof typeof props];

  return <ReactTrackingContext.Provider value={newContextData.current}>
    {children}
  </ReactTrackingContext.Provider>
}

// An empty object, used as an argument default value. If the argument default
// value were set to {} in the usual way, it would be a new instance of {} each
// time; this way, it's the same {}, which in turn matters for making
// useCallback return the same thing each tie.
const emptyEventProps: EventProps = {};

export function useTracking({eventType="unnamed", eventProps=emptyEventProps}: {
  eventType?: string,
  eventProps?: EventProps,
}={}) {
  const trackingContext = useContext(ReactTrackingContext)

  const track = useCallback((type?: string|undefined, trackingData?: Record<string,any>) => {
    captureEvent(type || eventType, {
      ...trackingContext,
      ...eventProps,
      ...trackingData
    })
  }, [trackingContext, eventProps, eventType])
  return {captureEvent: track}
}

export const withTracking = hookToHoc(useTracking)

export function useOnMountTracking<T extends EventProps>({
  eventType="unnamed",
  eventProps,
  captureOnMount,
  skip=false,
}: {
  eventType?: string,
  eventProps?: T,
  captureOnMount?: boolean | ((eventProps: T) => boolean),
  skip?: boolean
}={}) {
  const trackingContext = useContext(ReactTrackingContext)
  useEffect(() => {
    const eventData: AnyBecauseTodo = {...trackingContext, ...eventProps}
    if (typeof captureOnMount === "function") {
      !skip && captureOnMount(eventData) && captureEvent(`${eventType}Mounted`, eventData)
    } else if (!!captureOnMount) {
      !skip && captureEvent(`${eventType}Mounted`, eventData)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [skip])

  const track = useCallback((type?: string|undefined, trackingData?: Record<string,any>) => {
    captureEvent(type || eventType, {
      ...trackingContext,
      ...eventProps,
      ...trackingData
    })
  }, [trackingContext, eventProps, eventType])
  return {captureEvent: track}
}

export function useIsInView<T extends HTMLElement>({rootMargin='0px', threshold=0}={}) {
  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null)
  const [node, setNode] = useState<T | null>(null)

  const observer = useRef<IntersectionObserver | null>(null)

  useEffect(() => {
    if (!window.IntersectionObserver) return

    if (observer.current && node) observer.current.disconnect()

    observer.current = new window.IntersectionObserver(([ entry ]) => {
      setEntry(entry)
    }, {
      rootMargin,
      threshold
    })

    const { current: currentObserver } = observer

    if (node) currentObserver.observe(node)

    return () => currentObserver.disconnect()
  }, [node, rootMargin, threshold])

  return { setNode, entry, node }
}


// Analytics events have two rate limits, one denominated in events per second,
// the other denominated in uncompressed kilobytes per second. Each of these
// has a burst limit and a steady-state limit. If either rate limit is exceeded,
// a rateLimitExceeded event is sent instead of the original event.
//
// For purposes of calculating rate limits, the size of an event is the JSON
// string length. This undercounts slightly due to Unicode and protocol
// overhead, and overcounts greatly due to compression.
const burstLimitEventCount = 10;
const burstLimitKB = 20;
const rateLimitEventsPerSec = 3.0;
const rateLimitKBps = 5;
const rateLimitEventIntervalMs = 5000;
let eventTypeLimiters: AnyBecauseTodo = {};

const throttledStoreEvent = (event: AnyBecauseTodo) => {
  const now = new Date();
  const eventType = event.type;
  const eventSize = JSON.stringify(event).length;
  if (!(eventType in eventTypeLimiters)) {
    eventTypeLimiters[eventType] = {
      eventCount: new RateLimiter({
        burstLimit: burstLimitEventCount,
        steadyStateLimit: rateLimitEventsPerSec,
        timestamp: now
      }),
      eventBandwidth: new RateLimiter({
        burstLimit: burstLimitKB*1024,
        steadyStateLimit: rateLimitKBps*1024,
        timestamp: now
      }),
      exceeded: throttle(() => {
        pendingAnalyticsEvents.push({
          type: "rateLimitExceeded",
          timestamp: now,
          props: {
            originalType: eventType
          },
        });
      }, rateLimitEventIntervalMs),
    };
  }
  const limiters = eventTypeLimiters[eventType];
  limiters.eventCount.advanceTime(now);
  limiters.eventBandwidth.advanceTime(now);

  if (limiters.eventCount.canConsumeResource(1)
    && limiters.eventBandwidth.canConsumeResource(eventSize))
  {
    if (getShowAnalyticsDebug()) {
      browserConsoleLogAnalyticsEvent(event, false);
    }

    limiters.eventCount.consumeResource(1);
    limiters.eventBandwidth.consumeResource(eventSize);
    pendingAnalyticsEvents.push(event);
  } else {
    if (getShowAnalyticsDebug()) {
      browserConsoleLogAnalyticsEvent(event, true);
    }
    limiters.exceeded();
  }
};

// Print an analytics event to the browser console, neatly formatted and folded
// up into one line.
function browserConsoleLogAnalyticsEvent(event: any, rateLimitExceeded: boolean) {
  // eslint-disable-next-line no-console
  const c = console;
  if (rateLimitExceeded) {
    c.groupCollapsed(`%cRate limit exceeded: ${event.type}`, "color:#c00000");
  } else {
    const color = new ColorHash({lightness: 0.5}).hex(event.type);
    c.groupCollapsed(`Analytics: %c${event.type}`, `color:${color}`);
  }
  for (let fieldName of Object.keys(event.props)) {
    c.log(`${fieldName}:`, event.props[fieldName]);
  }
  // Timestamp recorded on the server will differ. Obviously in part because of
  // the latency of the network, but also because we have a queue that we only
  // flush max once/second. And something something skew.
  c.log('[[time of day]]', moment().format('HH:mm:ss.SSS'));
  c.groupEnd();
}

function serverConsoleLogAnalyticsEvent(event: any) {
  const [r,g,b] = new ColorHash({lightness: 0.5}).rgb(event.type);
  const colorEscapeSeq = `\x1b[38;2;0;${r};${g};${b}m`;
  const endColorEscapeSeq = '\x1b[0m';
  // eslint-disable-next-line no-console
  console.log(`Analytics event: ${colorEscapeSeq}${event.type}${endColorEscapeSeq}`, {
    ...event.props,
    '[[time of day]]': moment().format('HH:mm:ss.SSS')
  });
}

Globals.captureEvent = captureEvent;

let pendingAnalyticsEvents: Array<any> = [];

export function flushClientEvents() {
  if (!AnalyticsUtil.clientWriteEvents)
    return;
  if (!pendingAnalyticsEvents.length)
    return;

  const eventsToWrite = pendingAnalyticsEvents;
  pendingAnalyticsEvents = [];
  AnalyticsUtil.clientWriteEvents(eventsToWrite.map(event => ({
    ...(isClient ? AnalyticsUtil.clientContextVars : null),
    ...event
  })));
}

let lastFlushedAt: Date|null = null;
function throttledFlushClientEvents() {
  const flushInterval: number = flushIntervalSetting.get();
  const now = new Date();
  if(!lastFlushedAt || now.getTime()-lastFlushedAt.getTime() > flushInterval) {
    lastFlushedAt = now;
    flushClientEvents();
  }
}

1	import { addGraphQLSchema } from './vulcan-lib/graphql';	180✔
2	import { RateLimiter } from './rateLimiter';	26✔
3	import React, { useContext, useEffect, useState, useRef, useCallback, ReactNode } from 'react'	26✔
4	import { hookToHoc } from './hocUtils'	26✔
5	import { isClient, isServer, isDevelopment, isAnyTest, isE2E } from './executionEnvironment';	26✔
6	import { ColorHash } from './vendor/colorHash';	26✔
7	import { DatabasePublicSetting } from './publicSettings';	26✔
8	import { getPublicSettingsLoaded } from './settingsCache';	26✔
9	import { throttle } from 'underscore';	26✔
10	import moment from 'moment';	26✔
11	import { Globals } from './vulcan-lib/config';	26✔
12
13	const showAnalyticsDebug = new DatabasePublicSetting<"never"\|"dev"\|"always">("showAnalyticsDebug", "dev");	26✔
14	const flushIntervalSetting = new DatabasePublicSetting<number>("analyticsFlushInterval", 1000);	26✔
15
16	addGraphQLSchema(`
17	type AnalyticsEvent {
18	type: String!,
19	timestamp: Date!,
20	props: JSON!
21	}
22	`);
23
24	// AnalyticsUtil: An object/namespace full of functions which need to bypass
25	// the normal import system, because they are client- or server-specific but
26	// are used by code which isn't.
27	export const AnalyticsUtil: any = {	26✔
28	// clientWriteEvents: Send a graphQL mutation from the client to the server
29	// with an array of events. Available only on the client and when the react
30	// tree is mounted, null otherwise; filled in by Components.AnalyticsClient.
31	clientWriteEvents: null,
32
33	// clientContextVars: A dictionary of variables that will be added to every
34	// analytics event sent from the client. Client-side only.
35	clientContextVars: {},
36
37	// serverWriteEvent: Write a (single) event to the analytics database. Server-
38	// side only, filled in in analyticsWriter.js; null on the client. If no
39	// analytics database is configured, does nothing.
40	serverWriteEvent: null,
41
42	// serverPendingEvents: Analytics events that were recorded during startup
43	// before we were ready to write them to the analytics DB.
44	serverPendingEvents: [],
45	};
46
47	function getShowAnalyticsDebug() {
48	if (isAnyTest)	22!
49	return false;	22✔
50	const debug = getPublicSettingsLoaded() ? showAnalyticsDebug.get() : "dev";	×
51	if (debug==="always")	×
52	return true;	×
53	else if (debug==="dev")
54	return isDevelopment;	×
55	else
56	return false;	×
57	}
58
59	export type EventProps = AnalyticsProps \| Record<string, Json \| undefined>;
60
61	export function captureEvent(eventType: string, eventProps?: EventProps, suppressConsoleLog = false) {	22✔
62	if (isE2E) {	44!
NEW 63	return;	×
64	}
65	try {	44✔
66	if (isServer) {	44!
67	// If run from the server, we can run this immediately except for a few
68	// events during startup.
69	const event = {	44✔
70	type: eventType,
71	timestamp: new Date(),
72	props: {
73	...eventProps
74	}
75	}
76	if (!suppressConsoleLog && getShowAnalyticsDebug()) {	44!
77	serverConsoleLogAnalyticsEvent(event);	×
78	}
79	if (AnalyticsUtil.serverWriteEvent) {	44✔
80	AnalyticsUtil.serverWriteEvent(event);	23✔
81	} else {
82	AnalyticsUtil.serverPendingEvents.push(event);	21✔
83	if (AnalyticsUtil.serverPendingEvents.length > 1000) {	21!
84	// This is only supposed to be a temporary thing during startup until a
85	// postgres connection is established, so report an error if there's a
86	// ton of stuff in this array
87	// eslint-disable-next-line no-console
88	console.log(`Possible memory leak: AnalyticsUtil.serverPendingEvents.length=${AnalyticsUtil.serverPendingEvents.length}`);	×
89	}
90	}
91	} else if (isClient) {	×
92	// If run from the client, make a graphQL mutation
93	const event = {	×
94	type: eventType,
95	timestamp: new Date(),
96	props: {
97	...AnalyticsUtil.clientContextVars,
98	...eventProps,
99	},
100	};
101	throttledStoreEvent(event);	×
102	throttledFlushClientEvents();	×
103	}
104	} catch(e) {
105	// eslint-disable-next-line no-console
106	console.error("Error while capturing analytics event: ", e); //eslint-disable-line	×
107	}
108	}
109
110	type TrackingContext = Record<string, unknown>;
111
112	const ReactTrackingContext = React.createContext<TrackingContext>({});	26✔
113
114	export type AnalyticsProps = {
115	pageContext?: string,
116	pageSectionContext?: string,
117	pageSubSectionContext?: string,
118	pageElementContext?: string,
119	pageElementSubContext?: string,
120	reviewYear?: string,
121	path?: string,
122	resourceName?: string,
123	resourceUrl?: string,
124	chapter?: string,
125	documentSlug?: string,
126	postId?: string,
127	sequenceId?: string,
128	commentId?: string,
129	tagId?: string,
130	tagName?: string,
131	tagSlug?: string,
132	userIdDisplayed?: string,
133	hoverPreviewType?: string,
134	sortedBy?: string,
135	branch?: string,
136	siteEvent?: string,
137	href?: string,
138	limit?: number,
139	capturePostItemOnMount?: boolean,
140	singleLineComment?: boolean,
141	feedType?: string,
142	onsite?: boolean,
143	terms?: PostsViewTerms,
144	viewType?: string,
145	/** @deprecated Use `pageSectionContext` instead */
146	listContext?: string,
147	/** @deprecated Use `pageSectionContext` instead */
148	pageSection?: "karmaChangeNotifer",
149	/** @deprecated Use `pageSubSectionContext` instead */
150	pageSubsectionContext?: "latestReview",
151	}
152
153	/**
154	HOW TO USE ANALYTICS CONTEXT WRAPPER COMPONENTS
155	When you create a new feature (page, widget,button, etc.) or change the structure of a page,
156	you should wrap the relevant components in an <AnalyticsContext> component. These
157	components allow passing contextual information to the analytics event capture
158	that allow us to know where various events (e.g. clicks, postItem Mounts) occur.
159
160	To use an AnalyticsContext component, you wrap the components you are adding context
161	to in a <AnalyticsContext> component. Data is added to the context by using props, e.g.
162	<AnalyticsContext contextLabelOne="foo" contextLabelTwo={bar.baz._id}>
163	<MyNewFeature/>
164	</AnalyticsContext>
165
166	You can use analyticsContext to add whatever info you want to events captured in a section, however,
167	there is a convention for how to track __where__ a tracking event occurs. Please use the
168	following system of context labels for tracking event location:
169
170	USE THIS CONVENTION FOR TRACKING EVENT LOCATION
171	* pageContext={page name}> e.g. tagPage, postPage, homePage
172	- (only needs to defined once for each page)
173	* pageSectionContext={sectionName}, e.g. recentDiscussion, gatherTownWidget, wikiSection, userDrafts
174	- use for larger sections of a page
175	* pageSubSectionContext is used when a section meaningfully has subsections (such as bookmarks list within the recommendations section on the frontpage)
176	* pageElementContext={elementName}> e.g. hoverPreview, commentItem, answerItem
177	-use when wanting to mark where within a section something occurs
178	* listContext is historical. Now just use pageSection.
179
180	When adding a new prop simply add it to the list in the type of the `props` argument here.
181	Arguments can be of any type that can be handled by JSON.stringify. It's fine to have a low
182	barrier for adding new props here.
183
184	Also, context labels and their values should be camelCase, e.g. `pageSectionContext="fromTheArchives"`,
185	and not `page_section_context="From the Archives" or the like.
186
187	The best ways to learn the convention are 1) look at current usages, 2) discuss with others
188
189	WARNING! Once data has been recording with certain labels, it is difficult to change!
190	Please ensure that your context labeling follows the convention so future analysis is
191	easy for everyone.
192
193	WARNING! Be careful. Nested AnalyticsContext context share one context object so 1) you don't need
194	to repeat context labels, 2) they can overwrite each others – be carefule you don't
195	accidentally reuse a context label like "pageSectionContext" twice nested because the second usage
196	will overwrite the first.
197
198	NOTE! AnalyticsContext components will only add context data to events that are already
199	being tracked (e.g. linkClicks, navigate). If you've added a button or change of state, you
200	will likely have to add tracking manually with a captureEvent call. (Search codebase for examples or consult others)
201
202	The best way to ensure you are tracking correctly with is to look at the logs
203	in the client or server (ensure getShowAnalyticsDebug is returning true).
204	*/
205	export const AnalyticsContext = ({children, ...props}: AnalyticsProps & {	26✔
206	children: ReactNode,
207	}) => {
208	const existingContextData = useContext(ReactTrackingContext)	×
209
210	// Create a child context, which is the parent context plus the provided props
211	// merged on top of it. But create it in a referentially stable way: reuse
212	// the same object, so that changes never cause child components to rerender.
213	// (As long as they captured the context in the obvious way, they'll still get
214	// the newest values of these props when they actually log an event.)
215	const newContextData = useRef<TrackingContext>({...existingContextData});	×
216	for (let key of Object.keys(props))	×
217	newContextData.current[key] = props[key as keyof typeof props];	×
218
219	return <ReactTrackingContext.Provider value={newContextData.current}>	×
220	{children}
221	</ReactTrackingContext.Provider>
222	}
223
224	// An empty object, used as an argument default value. If the argument default
225	// value were set to {} in the usual way, it would be a new instance of {} each
226	// time; this way, it's the same {}, which in turn matters for making
227	// useCallback return the same thing each tie.
228	const emptyEventProps: EventProps = {};	26✔
229
230	export function useTracking({eventType="unnamed", eventProps=emptyEventProps}: {	20✔
231	eventType?: string,
232	eventProps?: EventProps,
233	}={}) {	10✔
234	const trackingContext = useContext(ReactTrackingContext)	10✔
235
236	const track = useCallback((type?: string\|undefined, trackingData?: Record<string,any>) => {	10✔
237	captureEvent(type \|\| eventType, {	3!
238	...trackingContext,
239	...eventProps,
240	...trackingData
241	})
242	}, [trackingContext, eventProps, eventType])
243	return {captureEvent: track}	10✔
244	}
245
246	export const withTracking = hookToHoc(useTracking)	26✔
247
248	export function useOnMountTracking<T extends EventProps>({
249	eventType="unnamed",	×
250	eventProps,
251	captureOnMount,
252	skip=false,	×
253	}: {
254	eventType?: string,
255	eventProps?: T,
256	captureOnMount?: boolean \| ((eventProps: T) => boolean),
257	skip?: boolean
258	}={}) {	×
259	const trackingContext = useContext(ReactTrackingContext)	×
260	useEffect(() => {	×
261	const eventData: AnyBecauseTodo = {...trackingContext, ...eventProps}	×
262	if (typeof captureOnMount === "function") {	×
263	!skip && captureOnMount(eventData) && captureEvent(`${eventType}Mounted`, eventData)	×
264	} else if (!!captureOnMount) {	×
265	!skip && captureEvent(`${eventType}Mounted`, eventData)	×
266	}
267	// eslint-disable-next-line react-hooks/exhaustive-deps
268	}, [skip])
269
270	const track = useCallback((type?: string\|undefined, trackingData?: Record<string,any>) => {	×
271	captureEvent(type \|\| eventType, {	×
272	...trackingContext,
273	...eventProps,
274	...trackingData
275	})
276	}, [trackingContext, eventProps, eventType])
277	return {captureEvent: track}	×
278	}
279
280	export function useIsInView<T extends HTMLElement>({rootMargin='0px', threshold=0}={}) {	×
281	const [entry, setEntry] = useState<IntersectionObserverEntry \| null>(null)	×
282	const [node, setNode] = useState<T \| null>(null)	×
283
284	const observer = useRef<IntersectionObserver \| null>(null)	×
285
286	useEffect(() => {	×
287	if (!window.IntersectionObserver) return	×
288
289	if (observer.current && node) observer.current.disconnect()	×
290
291	observer.current = new window.IntersectionObserver(([ entry ]) => {	×
292	setEntry(entry)	×
293	}, {
294	rootMargin,
295	threshold
296	})
297
298	const { current: currentObserver } = observer	×
299
300	if (node) currentObserver.observe(node)	×
301
302	return () => currentObserver.disconnect()	×
303	}, [node, rootMargin, threshold])
304
305	return { setNode, entry, node }	×
306	}
307
308
309	// Analytics events have two rate limits, one denominated in events per second,
310	// the other denominated in uncompressed kilobytes per second. Each of these
311	// has a burst limit and a steady-state limit. If either rate limit is exceeded,
312	// a rateLimitExceeded event is sent instead of the original event.
313	//
314	// For purposes of calculating rate limits, the size of an event is the JSON
315	// string length. This undercounts slightly due to Unicode and protocol
316	// overhead, and overcounts greatly due to compression.
317	const burstLimitEventCount = 10;	26✔
318	const burstLimitKB = 20;	26✔
319	const rateLimitEventsPerSec = 3.0;	26✔
320	const rateLimitKBps = 5;	26✔
321	const rateLimitEventIntervalMs = 5000;	26✔
322	let eventTypeLimiters: AnyBecauseTodo = {};	26✔
323
324	const throttledStoreEvent = (event: AnyBecauseTodo) => {	26✔
325	const now = new Date();	×
326	const eventType = event.type;	×
327	const eventSize = JSON.stringify(event).length;	×
328	if (!(eventType in eventTypeLimiters)) {	×
329	eventTypeLimiters[eventType] = {	×
330	eventCount: new RateLimiter({
331	burstLimit: burstLimitEventCount,
332	steadyStateLimit: rateLimitEventsPerSec,
333	timestamp: now
334	}),
335	eventBandwidth: new RateLimiter({
336	burstLimit: burstLimitKB*1024,
337	steadyStateLimit: rateLimitKBps*1024,
338	timestamp: now
339	}),
340	exceeded: throttle(() => {
341	pendingAnalyticsEvents.push({	×
342	type: "rateLimitExceeded",
343	timestamp: now,
344	props: {
345	originalType: eventType
346	},
347	});
348	}, rateLimitEventIntervalMs),
349	};
350	}
351	const limiters = eventTypeLimiters[eventType];	×
352	limiters.eventCount.advanceTime(now);	×
353	limiters.eventBandwidth.advanceTime(now);	×
354
355	if (limiters.eventCount.canConsumeResource(1)	×
356	&& limiters.eventBandwidth.canConsumeResource(eventSize))
357	{
358	if (getShowAnalyticsDebug()) {	×
359	browserConsoleLogAnalyticsEvent(event, false);	×
360	}
361
362	limiters.eventCount.consumeResource(1);	×
363	limiters.eventBandwidth.consumeResource(eventSize);	×
364	pendingAnalyticsEvents.push(event);	×
365	} else {
366	if (getShowAnalyticsDebug()) {	×
367	browserConsoleLogAnalyticsEvent(event, true);	×
368	}
369	limiters.exceeded();	×
370	}
371	};
372
373	// Print an analytics event to the browser console, neatly formatted and folded
374	// up into one line.
375	function browserConsoleLogAnalyticsEvent(event: any, rateLimitExceeded: boolean) {
376	// eslint-disable-next-line no-console
377	const c = console;	×
378	if (rateLimitExceeded) {	×
379	c.groupCollapsed(`%cRate limit exceeded: ${event.type}`, "color:#c00000");	×
380	} else {
381	const color = new ColorHash({lightness: 0.5}).hex(event.type);	×
382	c.groupCollapsed(`Analytics: %c${event.type}`, `color:${color}`);	×
383	}
384	for (let fieldName of Object.keys(event.props)) {	×
385	c.log(`${fieldName}:`, event.props[fieldName]);	×
386	}
387	// Timestamp recorded on the server will differ. Obviously in part because of
388	// the latency of the network, but also because we have a queue that we only
389	// flush max once/second. And something something skew.
390	c.log('[[time of day]]', moment().format('HH:mm:ss.SSS'));	×
391	c.groupEnd();	×
392	}
393
394	function serverConsoleLogAnalyticsEvent(event: any) {
395	const [r,g,b] = new ColorHash({lightness: 0.5}).rgb(event.type);	×
396	const colorEscapeSeq = `\x1b[38;2;0;${r};${g};${b}m`;	×
397	const endColorEscapeSeq = '\x1b[0m';	×
398	// eslint-disable-next-line no-console
399	console.log(`Analytics event: ${colorEscapeSeq}${event.type}${endColorEscapeSeq}`, {	×
400	...event.props,
401	'[[time of day]]': moment().format('HH:mm:ss.SSS')
402	});
403	}
404
405	Globals.captureEvent = captureEvent;	26✔
406
407	let pendingAnalyticsEvents: Array<any> = [];	26✔
408
409	export function flushClientEvents() {
410	if (!AnalyticsUtil.clientWriteEvents)	×
411	return;	×
412	if (!pendingAnalyticsEvents.length)	×
413	return;	×
414
415	const eventsToWrite = pendingAnalyticsEvents;	×
416	pendingAnalyticsEvents = [];	×
417	AnalyticsUtil.clientWriteEvents(eventsToWrite.map(event => ({	×
418	...(isClient ? AnalyticsUtil.clientContextVars : null),	×
419	...event
420	})));
421	}
422
423	let lastFlushedAt: Date\|null = null;	26✔
424	function throttledFlushClientEvents() {
425	const flushInterval: number = flushIntervalSetting.get();	×
426	const now = new Date();	×
427	if(!lastFlushedAt \|\| now.getTime()-lastFlushedAt.getTime() > flushInterval) {	×
428	lastFlushedAt = now;	×
429	flushClientEvents();	×
430	}
431	}

ForumMagnum / ForumMagnum / 9133435724

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous