@livestore/livestore 0.0.21 → 0.0.23

package/src/react/index.ts

@@ -11,6 +11,7 @@ export { LiveStoreProvider } from './LiveStoreProvider.js'
 export { useComponentState } from './useComponentState.js'
 export { useQuery } from './useQuery.js'
 export { useTemporaryQuery } from './useTemporaryQuery.js'
+export { useStackInfo } from './utils/stack-info.js'
 
 // Needed to make TS happy
 export type { TypedDocumentNode } from '@graphql-typed-document-node/core'

package/src/react/useComponentState.ts

@@ -17,7 +17,7 @@ import { SCHEMA_META_TABLE } from '../schema.js'
 import type { BaseGraphQLContext, LiveStoreQuery, Store } from '../store.js'
 import { sql } from '../util.js'
 import { useStore } from './LiveStoreContext.js'
-import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/extractStackInfoFromStackTrace.js'
+import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/stack-info.js'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
 
 export interface QueryDefinitions {
@@ -100,6 +100,14 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
 
   const componentKeyLabel = React.useMemo(() => labelForKey(componentKey), [componentKey])
 
+  const stackInfo = React.useMemo(() => {
+    Error.stackTraceLimit = 10
+    // eslint-disable-next-line unicorn/error-message
+    const stack = new Error().stack!
+    Error.stackTraceLimit = originalStackLimit
+    return extractStackInfoFromStackTrace(stack)
+  }, [])
+
   // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
   const { span, otelContext } = React.useMemo(() => {
     const existingSpan = spanAlreadyStartedCache.get(componentKeyLabel)
@@ -107,7 +115,7 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
 
     const span = store.otel.tracer.startSpan(
       `LiveStore:useComponentState:${componentKeyLabel}`,
-      {},
+      { attributes: { stackInfo: JSON.stringify(stackInfo) } },
       store.otel.queriesSpanContext,
     )
 
@@ -116,7 +124,7 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
     spanAlreadyStartedCache.set(componentKeyLabel, { span, otelContext })
 
     return { span, otelContext }
-  }, [componentKeyLabel, store.otel.queriesSpanContext, store.otel.tracer])
+  }, [componentKeyLabel, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
 
   React.useEffect(
     () => () => {
@@ -143,7 +151,6 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
   )
 
   const state$ = React.useMemo(() => {
-    console.log('useComponentState make state$', labelForKey(componentKey))
     // create state query
     if (stateSchema === undefined) {
       // TODO don't set up a query if there's no state schema (keeps the graph more clean)
@@ -198,7 +205,10 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
 
   // Step 1:
   // Synchronously create state and queries for initial render pass.
-  const initialComponentState = React.useMemo(() => state$.run(otelContext), [otelContext, state$])
+  const initialComponentState = React.useMemo(
+    () => state$.run(otelContext, { _tag: 'react', api: 'useComponentState', label: state$.label, stackInfo }),
+    [otelContext, stackInfo, state$],
+  )
 
   // Now that we've computed the initial state synchronously,
   // we can set up our useState calls w/ a default value populated...
@@ -240,14 +250,6 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
     return store.applyEvent('updateComponentState', { componentKey, columnNames, ...columnValues })
   }
 
-  const subscriptionInfo = React.useMemo(() => {
-    Error.stackTraceLimit = 10
-    // eslint-disable-next-line unicorn/error-message
-    const stack = new Error().stack!
-    Error.stackTraceLimit = originalStackLimit
-    return { stack: extractStackInfoFromStackTrace(stack) }
-  }, [])
-
   // OK, now all the synchronous work is done;
   // time to set up our long-running queries in an effect
   React.useEffect(() => {
@@ -258,11 +260,12 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
       (span) => {
         const unsubs: (() => void)[] = []
 
+        const otelContext = otel.trace.setSpan(otel.context.active(), span)
         if (stateSchema !== undefined) {
-          insertRowForComponentInstance({ store, componentKey, stateSchema })
+          insertRowForComponentInstance({ store, componentKey, stateSchema, otelContext })
         }
 
-        state$.activeSubscriptions.add(subscriptionInfo)
+        state$.activeSubscriptions.add(stackInfo)
 
         unsubs.push(
           store.subscribe(
@@ -273,9 +276,9 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
               }
             },
             undefined,
-            { label: `useComponentState:localState:subscribe:${state$.label}` },
+            { label: `useComponentState:localState:subscribe:${state$.label}`, otelContext },
           ),
-          () => state$.activeSubscriptions.delete(subscriptionInfo),
+          () => state$.activeSubscriptions.delete(stackInfo),
         )
 
         return () => {
@@ -287,13 +290,9 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
         }
       },
     )
-    // NOTE excluding `setComponentState_` and `setQueryResults_` from the deps array as it seems to cause an infinite loop
-    // This should probably be improved
-    // TODO is this still true?
-    // // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     store,
-    subscriptionInfo,
+    stackInfo,
     stateSchema,
     defaultComponentState,
     otelContext,
@@ -303,14 +302,7 @@ export const useComponentState = <TStateColumns extends ComponentColumns>({
     componentKey,
   ])
 
-  // Very important: remove any queries / other resources associated w/ this component
-  React.useEffect(
-    () => () => {
-      console.log('useComponentState destroy', labelForKey(componentKey))
-      return state$.destroy()
-    },
-    [state$],
-  )
+  React.useEffect(() => () => state$.destroy(), [state$])
 
   const state = componentStateRef.current
 
@@ -377,10 +369,12 @@ const insertRowForComponentInstance = ({
   store,
   componentKey,
   stateSchema,
+  otelContext,
 }: {
   store: Store<BaseGraphQLContext>
   componentKey: ComponentKey
   stateSchema: SqliteDsl.TableDefinition<string, SqliteDsl.Columns>
+  otelContext: otel.Context
 }) => {
   const columnNames = ['id', ...Object.keys(stateSchema.columns)]
   const columnValues = columnNames.map((name) => `$${name}`).join(', ')
@@ -397,6 +391,7 @@ const insertRowForComponentInstance = ({
       id: componentKey.id,
     },
     [tableName],
+    otelContext,
   )
 }
 

package/src/react/useQuery.ts

@@ -1,58 +1,90 @@
+import * as otel from '@opentelemetry/api'
 import { isEqual } from 'lodash-es'
 import React from 'react'
 
 import type { ILiveStoreQuery } from '../reactiveQueries/base-class.js'
 import { useStore } from './LiveStoreContext.js'
-import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/extractStackInfoFromStackTrace.js'
+import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/stack-info.js'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
+/**
+ * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷,
+ * so we need to "cache" the fact that we've already started a span for this component.
+ * The map entry is being removed again in the `React.useEffect` call below.
+ */
+const spanAlreadyStartedCache = new Map<ILiveStoreQuery<any>, { span: otel.Span; otelContext: otel.Context }>()
 
 export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => {
   const { store } = useStore()
 
-  // TODO proper otel context
-  const initialResult = React.useMemo(() => query.run(), [query])
-
-  // We know the query has a result by the time we use it; so we can synchronously populate a default state
-  const [valueRef, setValue] = useStateRefWithReactiveInput<TResult>(initialResult)
-
-  const subscriptionInfo = React.useMemo(() => {
+  const stackInfo = React.useMemo(() => {
     Error.stackTraceLimit = 10
     // eslint-disable-next-line unicorn/error-message
     const stack = new Error().stack!
     Error.stackTraceLimit = originalStackLimit
-    return { stack: extractStackInfoFromStackTrace(stack) }
+    return extractStackInfoFromStackTrace(stack)
   }, [])
 
-  // Subscribe to future updates for this query
-  React.useEffect(() => {
-    return store.otel.tracer.startActiveSpan(
+  // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
+  const { span, otelContext } = React.useMemo(() => {
+    const existingSpan = spanAlreadyStartedCache.get(query)
+    if (existingSpan !== undefined) return existingSpan
+
+    const span = store.otel.tracer.startSpan(
       `LiveStore:useQuery:${query.label}`,
-      // `LiveStore:useQuery:${labelForKey(query.componentKey)}:${query.label}`,
-      { attributes: { label: query.label } },
+      { attributes: { label: query.label, stackInfo: JSON.stringify(stackInfo) } },
       store.otel.queriesSpanContext,
-      (span) => {
-        query.activeSubscriptions.add(subscriptionInfo)
-        const unsub = store.subscribe(
-          query,
-          (newValue) => {
-            // NOTE: we return a reference to the result object within LiveStore;
-            // this implies that app code must not mutate the results, or else
-            // there may be weird reactivity bugs.
-            if (isEqual(newValue, valueRef.current) === false) {
-              setValue(newValue)
-            }
-          },
-          undefined,
-          { label: query.label },
-        )
-        return () => {
-          query.activeSubscriptions.delete(subscriptionInfo)
-          unsub()
-          span.end()
+    )
+
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+    spanAlreadyStartedCache.set(query, { span, otelContext })
+
+    return { span, otelContext }
+  }, [query, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
+
+  const initialResult = React.useMemo(
+    () =>
+      query.run(otelContext, {
+        _tag: 'react',
+        api: 'useQuery',
+        label: query.label,
+        stackInfo,
+      }),
+    [otelContext, query, stackInfo],
+  )
+
+  // We know the query has a result by the time we use it; so we can synchronously populate a default state
+  const [valueRef, setValue] = useStateRefWithReactiveInput<TResult>(initialResult)
+
+  React.useEffect(
+    () => () => {
+      spanAlreadyStartedCache.delete(query)
+      span.end()
+    },
+    [query, span],
+  )
+
+  // Subscribe to future updates for this query
+  React.useEffect(() => {
+    query.activeSubscriptions.add(stackInfo)
+    const unsub = store.subscribe(
+      query,
+      (newValue) => {
+        // NOTE: we return a reference to the result object within LiveStore;
+        // this implies that app code must not mutate the results, or else
+        // there may be weird reactivity bugs.
+        if (isEqual(newValue, valueRef.current) === false) {
+          setValue(newValue)
         }
       },
+      undefined,
+      { label: query.label, otelContext },
     )
-  }, [subscriptionInfo, query, setValue, store, valueRef])
+    return () => {
+      query.activeSubscriptions.delete(stackInfo)
+      unsub()
+    }
+  }, [stackInfo, query, setValue, store, valueRef, otelContext, span])
 
   return valueRef.current
 }

package/src/react/useTemporaryQuery.ts

@@ -9,6 +9,8 @@ import { useQuery } from './useQuery.js'
  * Make sure `makeQuery` is a memoized function.
  */
 export const useTemporaryQuery = <TResult>(makeQuery: () => ILiveStoreQuery<TResult>): TResult => {
+  // TODO cache the query outside of the `useMemo` since `useMemo` might be called multiple times
+  // also need to update the `useEffect` below https://stackoverflow.com/questions/66446642/react-usememo-memory-clean/77457605#77457605
   const query = React.useMemo(() => makeQuery(), [makeQuery])
 
   React.useEffect(() => {

package/src/react/utils/{extractStackInfoFromStackTrace.ts → stack-info.ts}

@@ -1,6 +1,12 @@
+import React from 'react'
+
 export const originalStackLimit = Error.stackTraceLimit
 
 export type StackInfo = {
+  frames: StackFrame[]
+}
+
+export type StackFrame = {
   name: string
   filePath: string
 }
@@ -24,10 +30,10 @@ Approach:
   - Start filtering at `at useQuery` (including)
   - Stop filtering at `at renderWithHooks` (excluding)
  */
-export const extractStackInfoFromStackTrace = (stackTrace: string): StackInfo[] => {
+export const extractStackInfoFromStackTrace = (stackTrace: string): StackInfo => {
   const namePattern = /at (\S+) \((.+)\)/g
   let match: RegExpExecArray | null
-  const stackInfoArr: StackInfo[] = []
+  const frames: StackFrame[] = []
   let hasReachedStart = false
 
   while ((match = namePattern.exec(stackTrace)) !== null) {
@@ -35,13 +41,23 @@ export const extractStackInfoFromStackTrace = (stackTrace: string): StackInfo[]
     if (name.startsWith('use')) {
       hasReachedStart = true
 
-      stackInfoArr.unshift({ name, filePath })
+      frames.unshift({ name, filePath })
     } else if (hasReachedStart) {
       // We've reached the end of the `use*` functions, so we're adding the component name and stop
-      stackInfoArr.unshift({ name, filePath })
+      frames.unshift({ name, filePath })
       break
     }
   }
 
-  return stackInfoArr
+  return { frames }
 }
+
+export const useStackInfo = (): StackInfo =>
+  React.useMemo(() => {
+    Error.stackTraceLimit = 10
+    // eslint-disable-next-line unicorn/error-message
+    const stack = new Error().stack!
+    console.log('stack', stack)
+    Error.stackTraceLimit = originalStackLimit
+    return extractStackInfoFromStackTrace(stack)
+  }, [])