@livestore/livestore 0.0.19 → 0.0.21

package/src/react/{useLiveStoreComponent.ts → useComponentState.ts}

@@ -1,5 +1,4 @@
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
-import type { LiteralUnion, PrettifyFlat } from '@livestore/utils'
+import type { LiteralUnion } from '@livestore/utils'
 import { omit, shouldNeverHappen } from '@livestore/utils'
 import { Schema } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
@@ -12,63 +11,21 @@ import { v4 as uuid } from 'uuid'
 import type { ComponentKey } from '../componentKey.js'
 import { labelForKey, tableNameForComponentKey } from '../componentKey.js'
 import { migrateTable } from '../migrations.js'
-import type { LiveStoreGraphQLQuery } from '../reactiveQueries/graphql.js'
-import type { LiveStoreJSQuery } from '../reactiveQueries/js.js'
-import type { LiveStoreSQLQuery } from '../reactiveQueries/sql.js'
+import { LiveStoreJSQuery } from '../reactiveQueries/js.js'
+import { LiveStoreSQLQuery } from '../reactiveQueries/sql.js'
 import { SCHEMA_META_TABLE } from '../schema.js'
-import type { BaseGraphQLContext, GetAtomResult, LiveStoreQuery, QueryResult, Store } from '../store.js'
-import type { Bindable } from '../util.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 { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
 
 export interface QueryDefinitions {
   [queryName: string]: LiveStoreQuery
 }
 
-export type QueryResults<TQuery> = { [queryName in keyof TQuery]: PrettifyFlat<QueryResult<TQuery[queryName]>> }
-
-export type ReactiveSQL = <TResult>(
-  query: string | ((get: GetAtomResult) => string),
-  queriedTables: string[],
-  bindValues?: Bindable | undefined,
-) => LiveStoreSQLQuery<TResult>
-
-export type ReactiveJS = <TResult>(query: (get: GetAtomResult) => TResult) => LiveStoreJSQuery<TResult>
-
-export type ReactiveGraphQL = <
-  TResult extends Record<string, any>,
-  TVariables extends Record<string, any>,
-  TContext extends BaseGraphQLContext,
->(
-  query: DocumentNode<TResult, TVariables>,
-  variableValues: TVariables | ((get: GetAtomResult) => TVariables),
-  label?: string,
-) => LiveStoreGraphQLQuery<TResult, TVariables, TContext>
-
-type RegisterSubscription = <TQuery extends LiveStoreQuery>(
-  query: TQuery,
-  onNewValue: (value: QueryResult<TQuery>) => void,
-  onUnsubscribe?: () => void,
-) => void
-
-type GenQueries<TQueries, TStateResult> = (args: {
-  rxSQL: ReactiveSQL
-  rxGraphQL: ReactiveGraphQL
-  rxJS: ReactiveJS
-  state$: LiveStoreJSQuery<TStateResult>
-  /**
-   * Registers a subscription.
-   *
-   * Passed down for some manual subscribing. Use carefully.
-   */
-  subscribe: RegisterSubscription
-  isTemporaryQuery: boolean
-}) => TQueries
-
-export type UseLiveStoreComponentProps<TQueries, TStateColumns extends ComponentColumns> = {
-  stateSchema?: SqliteDsl.TableDefinition<string, TStateColumns>
-  queries?: GenQueries<TQueries, SqliteDsl.FromColumns.RowDecoded<TStateColumns>>
+export type UseComponentStateProps<TStateColumns extends ComponentColumns> = {
+  schema?: SqliteDsl.TableDefinition<string, TStateColumns>
   reactDeps?: React.DependencyList
   componentKey: ComponentKeyConfig
 }
@@ -119,13 +76,12 @@ export type GetStateTypeEncoded<TTableDef extends SqliteDsl.TableDefinition<any,
  * @param config.componentKey A function that returns a unique key for this component.
  * @param config.reactDeps A list of React-level dependencies that will refresh the queries.
  */
-export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQueries extends QueryDefinitions>({
-  stateSchema: stateSchema_,
-  queries = () => ({}) as TQueries,
+export const useComponentState = <TStateColumns extends ComponentColumns>({
+  schema: stateSchema_,
   componentKey: componentKeyConfig,
   reactDeps = [],
-}: UseLiveStoreComponentProps<TQueries, TStateColumns>): {
-  queryResults: QueryResults<TQueries>
+}: UseComponentStateProps<TStateColumns>): {
+  state$: LiveStoreJSQuery<SqliteDsl.FromColumns.RowDecoded<TStateColumns>>
   state: SqliteDsl.FromColumns.RowDecoded<TStateColumns>
   setState: Setters<SqliteDsl.FromColumns.RowDecoded<TStateColumns>>
   useLiveStoreJsonState: UseLiveStoreJsonState<SqliteDsl.FromColumns.RowDecoded<TStateColumns>>
@@ -139,7 +95,6 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
     [stateSchema_],
   )
 
-  // performance.mark('useLiveStoreComponent:start')
   const componentKey = useComponentKey(componentKeyConfig, reactDeps)
   const { store } = useStore()
 
@@ -151,7 +106,7 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
     if (existingSpan !== undefined) return existingSpan
 
     const span = store.otel.tracer.startSpan(
-      `LiveStore:useLiveStoreComponent:${componentKeyLabel}`,
+      `LiveStore:useComponentState:${componentKeyLabel}`,
       {},
       store.otel.queriesSpanContext,
     )
@@ -171,44 +126,6 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
     [componentKeyLabel, span],
   )
 
-  const generateQueries = React.useCallback(
-    ({
-      state$,
-      otelContext,
-      registerSubscription,
-      isTemporaryQuery,
-    }: {
-      state$: LiveStoreJSQuery<TComponentState>
-      otelContext: otel.Context
-      registerSubscription: RegisterSubscription
-      isTemporaryQuery: boolean
-    }) =>
-      queries({
-        rxSQL: <T>(
-          genQuery: string | ((get: GetAtomResult) => string),
-          queriedTables: string[],
-          bindValues?: Bindable,
-        ) => store.querySQL<T>(genQuery, { queriedTables, bindValues, otelContext, componentKey }),
-        rxGraphQL: <Result extends Record<string, any>, Variables extends Record<string, any>>(
-          query: DocumentNode<Result, Variables>,
-          genVariableValues: Variables | ((get: GetAtomResult) => Variables),
-          label?: string,
-        ) => store.queryGraphQL(query, genVariableValues, { componentKey, label, otelContext }),
-        rxJS: <T>(genQuery: (get: GetAtomResult) => T) => store.queryJS(genQuery, { componentKey, otelContext }),
-        state$,
-        subscribe: registerSubscription,
-        isTemporaryQuery,
-      }),
-
-    // NOTE: we don't include the queries function passed in by the user here;
-    // the reason is that we don't want to force them to memoize that function.
-    // Instead, we just assume that the function always has the same contents.
-    // This makes sense for LiveStore because the component config should be static.
-    // TODO: document this and consider whether it's the right API surface.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [store, componentKey],
-  )
-
   const defaultComponentState = React.useMemo(() => {
     const defaultState = (
       stateSchema === undefined ? {} : mapValues(stateSchema.columns, (c) => c.default)
@@ -225,100 +142,68 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
     [stateSchema],
   )
 
-  // Step 1:
-  // Synchronously create state and queries for initial render pass.
-  // We do this in a temporary query context which cleans up after itself, making it idempotent
-  // TODO get rid of the temporary query workaround
-  const { initialComponentState, initialQueryResults } = React.useMemo(() => {
-    return store.otel.tracer.startActiveSpan('LiveStore:useLiveStoreComponent:initial', {}, otelContext, (span) => {
-      const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-      // NOTE `inTempQueryContext` automatically destroys the queries once the callback is done
-      return store.inTempQueryContext(() => {
-        try {
-          // create state query
-          let state$: LiveStoreJSQuery<TComponentState>
-          if (stateSchema === undefined) {
-            // TODO don't set up a query if there's no state schema (keeps the graph more clean)
-            state$ = store.queryJS(() => ({}), {
-              componentKey,
-              otelContext,
-            }) as unknown as LiveStoreJSQuery<TComponentState>
-          } else {
-            const componentTableName = tableNameForComponentKey(componentKey)
-            const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`
-
-            // TODO find a better solution for this
-            if (store.tableRefs[componentTableName] === undefined) {
-              const schemaHash = SqliteAst.hash(stateSchema.ast)
-              const res = store.inMemoryDB.select<{ schemaHash: number }>(
-                sql`SELECT schemaHash FROM ${SCHEMA_META_TABLE} WHERE tableName = '${componentTableName}'`,
-              )
-              if (res.length === 0 || res[0]!.schemaHash !== schemaHash) {
-                migrateTable({ db: store._proxyDb, tableDef: stateSchema.ast, otelContext, schemaHash })
-              }
+  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)
+      return new LiveStoreJSQuery({
+        fn: () => ({}) as TComponentState,
+        label: 'empty-component-state',
+        // otelContext,
+        // otelTracer: store.otel.tracer,
+      })
+    } else {
+      const componentTableName = tableNameForComponentKey(componentKey)
+      const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`
+
+      // TODO find a better solution for this
+      if (store.tableRefs[componentTableName] === undefined) {
+        const schemaHash = SqliteAst.hash(stateSchema.ast)
+        const res = store.inMemoryDB.select<{ schemaHash: number }>(
+          sql`SELECT schemaHash FROM ${SCHEMA_META_TABLE} WHERE tableName = '${componentTableName}'`,
+        )
+        if (res.length === 0 || res[0]!.schemaHash !== schemaHash) {
+          migrateTable({ db: store._proxyDb, tableDef: stateSchema.ast, otelContext, schemaHash })
+        }
 
-              store.tableRefs[componentTableName] = store.graph.makeRef(null, {
-                equal: () => false,
-                label: componentTableName,
-                meta: { liveStoreRefType: 'table' },
-              })
-            }
-
-            state$ = store
-              .querySQL(() => sql`select * from ${componentTableName} ${whereClause} limit 1`, {
-                queriedTables: [componentTableName],
-                componentKey,
-                label: `localState:query:${componentKeyLabel}`,
-                otelContext,
-              })
-              // TODO consider to instead of just returning the default value, to write the default component state to the DB
-              .pipe<TComponentState>((results) =>
-                results.length === 1
-                  ? Schema.parseSync(componentStateEffectSchema)(results[0]!)
-                  : defaultComponentState,
-              )
-          }
-          const initialComponentState = state$.results$.result
+        store.tableRefs[componentTableName] = store.graph.makeRef(null, {
+          equal: () => false,
+          label: componentTableName,
+          meta: { liveStoreRefType: 'table' },
+        })
+      }
 
-          const queries = generateQueries({
-            state$: state$,
-            otelContext,
-            registerSubscription: () => {},
-            isTemporaryQuery: true,
-          })
-          for (const [name, query] of Object.entries(queries)) {
-            query.label = name
-          }
-          const initialQueryResults = mapValues(
-            queries,
-            (query) => query.results$.result,
-            // TODO improve typing
-          ) as unknown as QueryResults<TQueries>
-
-          return { initialComponentState, initialQueryResults }
-        } finally {
-          span.end()
-        }
-      })
-    })
+      return (
+        new LiveStoreSQLQuery({
+          label: `localState:query:${componentKeyLabel}`,
+          genQueryString: () => sql`select * from ${componentTableName} ${whereClause} limit 1`,
+          queriedTables: [componentTableName],
+        })
+          // TODO consider to instead of just returning the default value, to write the default component state to the DB
+          .pipe<TComponentState>((results) =>
+            results.length === 1 ? Schema.parseSync(componentStateEffectSchema)(results[0]!) : defaultComponentState,
+          )
+      )
+    }
   }, [
-    store,
-    otelContext,
-    stateSchema,
-    generateQueries,
     componentKey,
     componentKeyLabel,
     componentStateEffectSchema,
     defaultComponentState,
+    otelContext,
+    stateSchema,
+    store,
   ])
 
+  // Step 1:
+  // Synchronously create state and queries for initial render pass.
+  const initialComponentState = React.useMemo(() => state$.run(otelContext), [otelContext, state$])
+
   // Now that we've computed the initial state synchronously,
   // we can set up our useState calls w/ a default value populated...
   const [componentStateRef, setComponentState_] = useStateRefWithReactiveInput<TComponentState>(initialComponentState)
 
-  const [queryResultsRef, setQueryResults_] = useStateRefWithReactiveInput<QueryResults<TQueries>>(initialQueryResults)
-
   const setState = (
     stateSchema === undefined
       ? {}
@@ -355,44 +240,30 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
     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(() => {
     return store.otel.tracer.startActiveSpan(
-      'LiveStore:useLiveStoreComponent:long-running',
+      'LiveStore:useComponentState:long-running',
       { attributes: {} },
       otelContext,
       (span) => {
-        const otelContext = otel.trace.setSpan(otel.context.active(), span)
         const unsubs: (() => void)[] = []
 
-        // create state query
-        let state$: LiveStoreJSQuery<TComponentState>
-        if (stateSchema === undefined) {
-          // TODO remove this query
-          state$ = store.queryJS(() => ({}) as TComponentState, {
-            componentKey,
-            otelContext,
-            label: 'empty-component-state',
-          })
-        } else {
-          const componentTableName = tableNameForComponentKey(componentKey)
+        if (stateSchema !== undefined) {
           insertRowForComponentInstance({ store, componentKey, stateSchema })
-
-          const whereClause = componentKey._tag === 'singleton' ? '' : `where id = '${componentKey.id}'`
-          state$ = store
-            .querySQL<TComponentState>(() => sql`select * from ${componentTableName} ${whereClause} limit 1`, {
-              queriedTables: [componentTableName],
-              componentKey,
-              label: `localState:query:${componentKeyLabel}`,
-              otelContext,
-            })
-            // TODO consider to instead of just returning the default value, to write the default component state to the DB
-            .pipe<TComponentState>((results) =>
-              results.length === 1 ? Schema.parseSync(componentStateEffectSchema)(results[0]!) : defaultComponentState,
-            )
         }
 
+        state$.activeSubscriptions.add(subscriptionInfo)
+
         unsubs.push(
           store.subscribe(
             state$,
@@ -402,44 +273,11 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
               }
             },
             undefined,
-            { label: `useLiveStoreComponent:localState:subscribe:${state$.label}` },
+            { label: `useComponentState:localState:subscribe:${state$.label}` },
           ),
+          () => state$.activeSubscriptions.delete(subscriptionInfo),
         )
 
-        const registerSubscription: RegisterSubscription = (query$, callback, onUnsubscribe) => {
-          unsubs.push(
-            store.subscribe(
-              query$,
-              (results) => {
-                callback(results)
-              },
-              onUnsubscribe,
-              { label: `useLiveStoreComponent:query:manual-subscribe:${query$.label}` },
-            ),
-          )
-        }
-
-        const queries = generateQueries({ state$, otelContext, registerSubscription, isTemporaryQuery: false })
-
-        for (const [key, query] of Object.entries(queries)) {
-          // Use the field name given to this query in the useQueries hook as its label
-          query.label = key
-
-          unsubs.push(
-            store.subscribe(
-              query,
-              (results) => {
-                const newQueryResults = { ...queryResultsRef.current, [key]: results }
-                if (isEqual(newQueryResults, queryResultsRef.current) === false) {
-                  setQueryResults_(newQueryResults)
-                }
-              },
-              undefined,
-              { label: `useLiveStoreComponent:query:subscribe:${query.label}` },
-            ),
-          )
-        }
-
         return () => {
           for (const unsub of unsubs) {
             unsub()
@@ -451,24 +289,28 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
     )
     // NOTE excluding `setComponentState_` and `setQueryResults_` from the deps array as it seems to cause an infinite loop
     // This should probably be improved
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // TODO is this still true?
+    // // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     store,
-    componentKey,
+    subscriptionInfo,
     stateSchema,
     defaultComponentState,
-    generateQueries,
     otelContext,
     componentStateRef,
-    // setComponentState_,
-    // setQueryResults_,
+    state$,
+    setComponentState_,
+    componentKey,
   ])
 
   // Very important: remove any queries / other resources associated w/ this component
-  React.useEffect(() => () => store.unmountComponent(componentKey), [store, componentKey])
-
-  // performance.mark('useLiveStoreComponent:end')
-  // performance.measure(`useLiveStoreComponent:${componentKey.type}`, 'useLiveStoreComponent:start', 'useLiveStoreComponent:end')
+  React.useEffect(
+    () => () => {
+      console.log('useComponentState destroy', labelForKey(componentKey))
+      return state$.destroy()
+    },
+    [state$],
+  )
 
   const state = componentStateRef.current
 
@@ -498,7 +340,7 @@ export const useLiveStoreComponent = <TStateColumns extends ComponentColumns, TQ
   }
 
   return {
-    queryResults: queryResultsRef.current,
+    state$,
     state,
     setState,
     useLiveStoreJsonState,

package/src/react/useQuery.ts

@@ -1,56 +1,58 @@
+import { isEqual } from 'lodash-es'
 import React from 'react'
 
-import { labelForKey } from '../componentKey.js'
-import type { QueryDefinition } from '../effect/LiveStore.js'
-import type { LiveStoreQuery, QueryResult, Store } from '../store.js'
+import type { ILiveStoreQuery } from '../reactiveQueries/base-class.js'
 import { useStore } from './LiveStoreContext.js'
+import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/extractStackInfoFromStackTrace.js'
+import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
 
-// TODO get rid of the query cache in favour of the new side-effect-free query definition approach https://www.notion.so/schickling/New-query-definition-approach-1097a78ef0e9495bac25f90417374756?pvs=4
-const queryCache = new Map<QueryDefinition, LiveStoreQuery>()
-
-export const useQuery = <Q extends LiveStoreQuery>(queryDef: (store: Store) => Q): QueryResult<Q> => {
+export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => {
   const { store } = useStore()
-  const query = React.useMemo(() => {
-    if (queryCache.has(queryDef)) return queryCache.get(queryDef) as Q
 
-    const query = queryDef(store)
-    queryCache.set(queryDef, query)
-    return query
-  }, [store, queryDef])
+  // 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 [value, setValue] = React.useState<QueryResult<Q>>(query.results$.result)
+  const [valueRef, setValue] = useStateRefWithReactiveInput<TResult>(initialResult)
+
+  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) }
+  }, [])
 
   // Subscribe to future updates for this query
   React.useEffect(() => {
     return store.otel.tracer.startActiveSpan(
-      `LiveStore:useQuery:${labelForKey(query.componentKey)}:${query.label}`,
+      `LiveStore:useQuery:${query.label}`,
+      // `LiveStore:useQuery:${labelForKey(query.componentKey)}:${query.label}`,
       { attributes: { label: query.label } },
-      query.otelContext,
+      store.otel.queriesSpanContext,
       (span) => {
-        const cancel = store.subscribe(
+        query.activeSubscriptions.add(subscriptionInfo)
+        const unsub = store.subscribe(
           query,
-          (v) => {
+          (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.
-            return setValue(v)
+            if (isEqual(newValue, valueRef.current) === false) {
+              setValue(newValue)
+            }
           },
           undefined,
           { label: query.label },
         )
         return () => {
-          // // NOTE destroying the whole query will also unsubscribe it
-          // query.destroy()
-
-          // TODO for now we'll still `cancel` manually, but we should remove this once we have some kind of
-          // ARC-based system
-          cancel()
+          query.activeSubscriptions.delete(subscriptionInfo)
+          unsub()
           span.end()
         }
       },
     )
-  }, [query, store])
+  }, [subscriptionInfo, query, setValue, store, valueRef])
 
-  return value
+  return valueRef.current
 }

package/src/react/useTemporaryQuery.ts

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import type { ILiveStoreQuery } from '../reactiveQueries/base-class.js'
+import { useQuery } from './useQuery.js'
+
+/**
+ * Creates a query, subscribes and destroys it when the component unmounts.
+ *
+ * Make sure `makeQuery` is a memoized function.
+ */
+export const useTemporaryQuery = <TResult>(makeQuery: () => ILiveStoreQuery<TResult>): TResult => {
+  const query = React.useMemo(() => makeQuery(), [makeQuery])
+
+  React.useEffect(() => {
+    return () => {
+      query.destroy()
+    }
+  }, [query])
+
+  return useQuery(query)
+}

package/src/react/utils/extractStackInfoFromStackTrace.ts

@@ -0,0 +1,47 @@
+export const originalStackLimit = Error.stackTraceLimit
+
+export type StackInfo = {
+  name: string
+  filePath: string
+}
+
+/*
+Example stack trace:
+
+Error
+    at https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1699550216884:18:23
+    at mountMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:12817:27)
+    at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:13141:24)
+    at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-4WADDZ2G.js?v=3eb66ed6:1094:29)
+    at useQuery (https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1699550216884:13:33)
+    at useAppState (https://localhost:8081/src/db/AppState.ts?t=1699550216884:17:34)
+    at useRoute (https://localhost:8081/src/db/AppState.ts?t=1699550216884:74:22)
+    at RouteLink (https://localhost:8081/src/components/Link.tsx?t=1699550216884:36:7)
+    at renderWithHooks (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:12171:26)
+    at mountIndeterminateComponent (https://localhost:8081/node_modules/.vite-web/deps/chunk-M23HUTQV.js?v=3eb66ed6:14921:21)
+  
+Approach:
+  - Start filtering at `at useQuery` (including)
+  - Stop filtering at `at renderWithHooks` (excluding)
+ */
+export const extractStackInfoFromStackTrace = (stackTrace: string): StackInfo[] => {
+  const namePattern = /at (\S+) \((.+)\)/g
+  let match: RegExpExecArray | null
+  const stackInfoArr: StackInfo[] = []
+  let hasReachedStart = false
+
+  while ((match = namePattern.exec(stackTrace)) !== null) {
+    const [, name, filePath] = match as any as [string, string, string]
+    if (name.startsWith('use')) {
+      hasReachedStart = true
+
+      stackInfoArr.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 })
+      break
+    }
+  }
+
+  return stackInfoArr
+}