@livestore/livestore 0.3.0-dev.10 → 0.3.0-dev.11

package/src/store/store.ts

@@ -27,19 +27,44 @@ import {
 } from '@livestore/common/schema'
 import { assertNever, isDevEnv } from '@livestore/utils'
 import type { Scope } from '@livestore/utils/effect'
-import { Cause, Data, Effect, Inspectable, MutableHashMap, Runtime, Schema } from '@livestore/utils/effect'
+import {
+  Cause,
+  Data,
+  Effect,
+  Inspectable,
+  MutableHashMap,
+  OtelTracer,
+  Runtime,
+  Schema,
+  Stream,
+} from '@livestore/utils/effect'
 import { nanoid } from '@livestore/utils/nanoid'
 import * as otel from '@opentelemetry/api'
 import { type GraphQLSchema } from 'graphql'
 
-import type { LiveQuery, QueryContext, ReactivityGraph } from '../live-queries/base-class.js'
+import type {
+  ILiveQueryRefDef,
+  LiveQuery,
+  LiveQueryDef,
+  ReactivityGraph,
+  ReactivityGraphContext,
+} from '../live-queries/base-class.js'
+import { makeReactivityGraph } from '../live-queries/base-class.js'
 import type { Ref } from '../reactive.js'
 import { makeExecBeforeFirstRun } from '../row-query-utils.js'
-import { SynchronousDatabaseWrapper } from '../SynchronousDatabaseWrapper.js'
+import { SqliteDbWrapper } from '../SqliteDbWrapper.js'
 import { ReferenceCountedSet } from '../utils/data-structures.js'
 import { downloadBlob, exposeDebugUtils } from '../utils/dev.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import type { BaseGraphQLContext, RefreshReason, StoreMutateOptions, StoreOptions, StoreOtel } from './store-types.js'
+import type { StackInfo } from '../utils/stack-info.js'
+import type {
+  BaseGraphQLContext,
+  RefreshReason,
+  StoreMutateOptions,
+  StoreOptions,
+  StoreOtel,
+  Unsubscribe,
+} from './store-types.js'
 
 if (isDevEnv()) {
   exposeDebugUtils()
@@ -51,7 +76,7 @@ export class Store<
 > extends Inspectable.Class {
   readonly storeId: string
   reactivityGraph: ReactivityGraph
-  syncDbWrapper: SynchronousDatabaseWrapper
+  sqliteDbWrapper: SqliteDbWrapper
   clientSession: ClientSession
   schema: LiveStoreSchema
   graphQLSchema?: GraphQLSchema
@@ -61,7 +86,7 @@ export class Store<
    * Note we're using `Ref<null>` here as we don't care about the value but only about *that* something has changed.
    * This only works in combination with `equal: () => false` which will always trigger a refresh.
    */
-  tableRefs: { [key: string]: Ref<null, QueryContext, RefreshReason> }
+  tableRefs: { [key: string]: Ref<null, ReactivityGraphContext, RefreshReason> }
 
   private runtime: Runtime.Runtime<Scope.Scope>
 
@@ -74,12 +99,13 @@ export class Store<
   private syncProcessor: ClientSessionSyncProcessor
   readonly lifetimeScope: Scope.Scope
 
+  readonly boot: Effect.Effect<void, UnexpectedError, Scope.Scope>
+
   // #region constructor
-  private constructor({
+  constructor({
     clientSession,
     schema,
     graphQLOptions,
-    reactivityGraph,
     otelOptions,
     disableDevtools,
     batchUpdates,
@@ -93,25 +119,21 @@ export class Store<
     this.storeId = storeId
     this.unsyncedMutationEvents = unsyncedMutationEvents
 
-    this.syncDbWrapper = new SynchronousDatabaseWrapper({ otel: otelOptions, db: clientSession.syncDb })
+    this.sqliteDbWrapper = new SqliteDbWrapper({ otel: otelOptions, db: clientSession.sqliteDb })
     this.clientSession = clientSession
     this.schema = schema
 
     this.lifetimeScope = lifetimeScope
     this.runtime = runtime
 
+    const reactivityGraph = makeReactivityGraph()
+
     const syncSpan = otelOptions.tracer.startSpan('LiveStore:sync', {}, otelOptions.rootSpanContext)
 
     this.syncProcessor = makeClientSessionSyncProcessor({
       schema,
-      initialLeaderHead: clientSession.leaderThread.mutations.initialMutationEventId,
-      pushToLeader: (batch) =>
-        clientSession.leaderThread.mutations.push(batch).pipe(
-          // NOTE we don't want to shutdown in case of an invalid push error, since it will be retried
-          Effect.catchTag('InvalidPushError', Effect.ignoreLogged),
-          this.runEffectFork,
-        ),
-      pullFromLeader: clientSession.leaderThread.mutations.pull,
+      clientSession,
+      runtime,
       applyMutation: (mutationEventDecoded, { otelContext, withChangeset }) => {
         const mutationDef = schema.mutations.get(mutationEventDecoded.mutation)!
         const execArgsArr = getExecArgsFromMutation({
@@ -125,9 +147,9 @@ export class Store<
           for (const {
             statementSql,
             bindValues,
-            writeTables = this.syncDbWrapper.getTablesUsed(statementSql),
+            writeTables = this.sqliteDbWrapper.getTablesUsed(statementSql),
           } of execArgsArr) {
-            this.syncDbWrapper.execute(statementSql, bindValues, writeTables, { otelContext })
+            this.sqliteDbWrapper.execute(statementSql, bindValues, { otelContext, writeTables })
 
             // durationMsTotal += durationMs
             writeTables.forEach((table) => writeTablesForEvent.add(table))
@@ -136,7 +158,7 @@ export class Store<
 
         let sessionChangeset: Uint8Array | undefined
         if (withChangeset === true) {
-          sessionChangeset = this.syncDbWrapper.withChangeset(exec).changeset
+          sessionChangeset = this.sqliteDbWrapper.withChangeset(exec).changeset
         } else {
           exec()
         }
@@ -144,16 +166,16 @@ export class Store<
         return { writeTables: writeTablesForEvent, sessionChangeset }
       },
       rollback: (changeset) => {
-        this.syncDbWrapper.rollback(changeset)
+        this.sqliteDbWrapper.rollback(changeset)
       },
       refreshTables: (tables) => {
-        const tablesToUpdate = [] as [Ref<null, QueryContext, RefreshReason>, null][]
+        const tablesToUpdate = [] as [Ref<null, ReactivityGraphContext, RefreshReason>, null][]
         for (const tableName of tables) {
           const tableRef = this.tableRefs[tableName]
           assertNever(tableRef !== undefined, `No table ref found for ${tableName}`)
           tablesToUpdate.push([tableRef!, null])
         }
-        this.reactivityGraph.setRefs(tablesToUpdate)
+        reactivityGraph.setRefs(tablesToUpdate)
       },
       span: syncSpan,
     })
@@ -173,6 +195,8 @@ export class Store<
     this.reactivityGraph = reactivityGraph
     this.reactivityGraph.context = {
       store: this as unknown as Store<BaseGraphQLContext, LiveStoreSchema>,
+      liveQueryRCMap: new Map(),
+      reactivityGraph: new WeakRef(reactivityGraph),
       otelTracer: otelOptions.tracer,
       rootOtelContext: otelQueriesSpanContext,
       effectsWrapper: batchUpdates,
@@ -209,10 +233,10 @@ export class Store<
 
     if (graphQLOptions) {
       this.graphQLSchema = graphQLOptions.schema
-      this.graphQLContext = graphQLOptions.makeContext(this.syncDbWrapper, this.otel.tracer, clientSession.sessionId)
+      this.graphQLContext = graphQLOptions.makeContext(this.sqliteDbWrapper, this.otel.tracer, clientSession.sessionId)
     }
 
-    Effect.gen(this, function* () {
+    this.boot = Effect.gen(this, function* () {
       yield* Effect.addFinalizer(() =>
         Effect.sync(() => {
           // Remove all table refs from the reactivity graph
@@ -230,23 +254,9 @@ export class Store<
       )
 
       yield* this.syncProcessor.boot
-    }).pipe(this.runEffectFork)
-  }
-  // #endregion constructor
-
-  static createStore = <TGraphQLContext extends BaseGraphQLContext, TSchema extends LiveStoreSchema = LiveStoreSchema>(
-    storeOptions: StoreOptions<TGraphQLContext, TSchema>,
-    parentSpan: otel.Span,
-  ): Store<TGraphQLContext, TSchema> => {
-    const ctx = otel.trace.setSpan(otel.context.active(), parentSpan)
-    return storeOptions.otelOptions.tracer.startActiveSpan('LiveStore:createStore', {}, ctx, (span) => {
-      try {
-        return new Store(storeOptions)
-      } finally {
-        span.end()
-      }
     })
   }
+  // #endregion constructor
 
   get sessionId(): string {
     return this.clientSession.sessionId
@@ -255,29 +265,66 @@ export class Store<
   /**
    * Subscribe to the results of a query
    * Returns a function to cancel the subscription.
+   *
+   * @example
+   * ```ts
+   * const unsubscribe = store.subscribe(query$, { onUpdate: (result) => console.log(result) })
+   * ```
    */
   subscribe = <TResult>(
-    query$: LiveQuery<TResult, any>,
-    onNewValue: (value: TResult) => void,
-    onUnsubsubscribe?: () => void,
-    options?: { label?: string; otelContext?: otel.Context; skipInitialRun?: boolean } | undefined,
-  ): (() => void) =>
+    query: LiveQueryDef<TResult, any> | LiveQuery<TResult, any>,
+    options: {
+      /** Called when the query result has changed */
+      onUpdate: (value: TResult) => void
+      onSubscribe?: (query$: LiveQuery<TResult, any>) => void
+      /** Gets called after the query subscription has been removed */
+      onUnsubsubscribe?: () => void
+      label?: string
+      /**
+       * Skips the initial `onUpdate` callback
+       * @default false
+       */
+      skipInitialRun?: boolean
+      otelContext?: otel.Context
+      /** If provided, the stack info will be added to the `activeSubscriptions` set of the query */
+      stackInfo?: StackInfo
+    },
+  ): Unsubscribe =>
     this.otel.tracer.startActiveSpan(
       `LiveStore.subscribe`,
-      { attributes: { label: options?.label, queryLabel: query$.label } },
+      { attributes: { label: options?.label, queryLabel: query.label } },
       options?.otelContext ?? this.otel.queriesSpanContext,
       (span) => {
         // console.debug('store sub', query$.id, query$.label)
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
+        const queryRcRef =
+          query._tag === 'def'
+            ? query.make(this.reactivityGraph.context!)
+            : {
+                value: query,
+                deref: () => {},
+              }
+        const query$ = queryRcRef.value
+
         const label = `subscribe:${options?.label}`
-        const effect = this.reactivityGraph.makeEffect((get) => onNewValue(get(query$.results$)), { label })
+        const effect = this.reactivityGraph.makeEffect(
+          (get, _otelContext, debugRefreshReason) =>
+            options.onUpdate(get(query$.results$, otelContext, debugRefreshReason)),
+          { label },
+        )
+
+        if (options?.stackInfo) {
+          query$.activeSubscriptions.add(options.stackInfo)
+        }
+
+        options?.onSubscribe?.(query$)
 
         this.activeQueries.add(query$ as LiveQuery<TResult>)
 
         // Running effect right away to get initial value (unless `skipInitialRun` is set)
-        if (options?.skipInitialRun !== true) {
-          effect.doEffect(otelContext)
+        if (options?.skipInitialRun !== true && !query$.isDestroyed) {
+          effect.doEffect(otelContext, { _tag: 'subscribe.initial', label: `subscribe-initial-run:${options?.label}` })
         }
 
         const unsubscribe = () => {
@@ -285,7 +332,14 @@ export class Store<
           try {
             this.reactivityGraph.destroyNode(effect)
             this.activeQueries.remove(query$ as LiveQuery<TResult>)
-            onUnsubsubscribe?.()
+
+            if (options?.stackInfo) {
+              query$.activeSubscriptions.delete(options.stackInfo)
+            }
+
+            queryRcRef.deref()
+
+            options?.onUnsubsubscribe?.()
           } finally {
             span.end()
           }
@@ -295,6 +349,30 @@ export class Store<
       },
     )
 
+  subscribeStream = <TResult>(
+    query$: LiveQueryDef<TResult, any>,
+    options?: { label?: string; skipInitialRun?: boolean } | undefined,
+  ): Stream.Stream<TResult> =>
+    Stream.asyncPush<TResult>((emit) =>
+      Effect.gen(this, function* () {
+        const otelSpan = yield* OtelTracer.currentOtelSpan.pipe(
+          Effect.catchTag('NoSuchElementException', () => Effect.succeed(undefined)),
+        )
+        const otelContext = otelSpan ? otel.trace.setSpan(otel.context.active(), otelSpan) : otel.context.active()
+
+        yield* Effect.acquireRelease(
+          Effect.sync(() =>
+            this.subscribe(query$, {
+              onUpdate: (result) => emit.single(result),
+              otelContext,
+              label: options?.label,
+            }),
+          ),
+          (unsub) => Effect.sync(() => unsub()),
+        )
+      }),
+    )
+
   /**
    * Synchronously queries the database without creating a LiveQuery.
    * This is useful for queries that don't need to be reactive.
@@ -310,12 +388,15 @@ export class Store<
    * ```
    */
   query = <TResult>(
-    query: QueryBuilder<TResult, any, any> | LiveQuery<TResult, any> | { query: string; bindValues: ParamsObject },
-    options?: { otelContext?: otel.Context },
+    query:
+      | QueryBuilder<TResult, any, any>
+      | LiveQuery<TResult, any>
+      | LiveQueryDef<TResult, any>
+      | { query: string; bindValues: ParamsObject },
+    options?: { otelContext?: otel.Context; debugRefreshReason?: RefreshReason },
   ): TResult => {
     if (typeof query === 'object' && 'query' in query && 'bindValues' in query) {
-      return this.syncDbWrapper.select(query.query, {
-        bindValues: prepareBindValues(query.bindValues, query.query),
+      return this.sqliteDbWrapper.select(query.query, prepareBindValues(query.bindValues, query.query), {
         otelContext: options?.otelContext,
       }) as any
     } else if (isQueryBuilder(query)) {
@@ -331,17 +412,38 @@ export class Store<
 
       const sqlRes = query.asSql()
       const schema = getResultSchema(query)
-      const rawRes = this.syncDbWrapper.select(sqlRes.query, {
-        bindValues: sqlRes.bindValues as any as PreparedBindValues,
+      const rawRes = this.sqliteDbWrapper.select(sqlRes.query, sqlRes.bindValues as any as PreparedBindValues, {
         otelContext: options?.otelContext,
         queriedTables: new Set([query[QueryBuilderAstSymbol].tableDef.sqliteDef.name]),
       })
       return Schema.decodeSync(schema)(rawRes)
+    } else if (query._tag === 'def') {
+      const query$ = query.make(this.reactivityGraph.context!)
+      const result = this.query(query$.value, options)
+      query$.deref()
+      return result
     } else {
-      return query.run(options?.otelContext)
+      return query.run({ otelContext: options?.otelContext, debugRefreshReason: options?.debugRefreshReason })
     }
   }
 
+  // makeLive: {
+  //   <T>(def: LiveQueryDef<T, any>): LiveQuery<T, any>
+  //   <T>(def: ILiveQueryRefDef<T>): ILiveQueryRef<T>
+  // } = (def: any) => {
+  //   if (def._tag === 'live-ref-def') {
+  //     return (def as ILiveQueryRefDef<any>).make(this.reactivityGraph.context!)
+  //   } else {
+  //     return (def as LiveQueryDef<any, any>).make(this.reactivityGraph.context!) as any
+  //   }
+  // }
+
+  setRef = <T>(refDef: ILiveQueryRefDef<T>, value: T): void => {
+    const ref = refDef.make(this.reactivityGraph.context!)
+    ref.value.set(value)
+    ref.deref()
+  }
+
   // #region mutate
   mutate: {
     <const TMutationArg extends ReadonlyArray<MutationEvent.PartialForSchema<TSchema>>>(...list: TMutationArg): void
@@ -369,7 +471,6 @@ export class Store<
 
     if (mutationsEvents.length === 0) return
 
-    const label = options?.label ?? 'mutate'
     const skipRefresh = options?.skipRefresh ?? false
 
     const mutationsSpan = otel.trace.getSpan(this.otel.mutationsSpanContext)!
@@ -383,40 +484,39 @@ export class Store<
 
     return this.otel.tracer.startActiveSpan(
       'LiveStore:mutate',
-      { attributes: { 'livestore.mutateLabel': label }, links: options?.spanLinks },
+      {
+        attributes: {
+          'livestore.mutationEventsCount': mutationsEvents.length,
+          'livestore.mutationEventTags': mutationsEvents.map((_) => _.mutation),
+          'livestore.mutateLabel': options?.label,
+        },
+        links: options?.spanLinks,
+      },
       options?.otelContext ?? this.otel.mutationsSpanContext,
       (span) => {
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
         try {
-          const { writeTables } = this.otel.tracer.startActiveSpan(
-            'LiveStore:mutate:applyMutations',
-            { attributes: { 'livestore.mutateLabel': label } },
-            otel.trace.setSpan(otel.context.active(), span),
-            (span) => {
-              try {
-                const otelContext = otel.trace.setSpan(otel.context.active(), span)
-                // 5
-
-                const applyMutations = () => this.syncProcessor.push(mutationsEvents, { otelContext })
-
-                if (mutationsEvents.length > 1) {
-                  // TODO: what to do about leader transaction here?
-                  return this.syncDbWrapper.txn(applyMutations)
-                } else {
-                  return applyMutations()
-                }
-              } catch (e: any) {
-                console.error(e)
-                span.setStatus({ code: otel.SpanStatusCode.ERROR, message: e.toString() })
-                throw e
-              } finally {
-                span.end()
+          const { writeTables } = (() => {
+            try {
+              const applyMutations = () => this.syncProcessor.push(mutationsEvents, { otelContext })
+
+              if (mutationsEvents.length > 1) {
+                // TODO: what to do about leader transaction here?
+                return this.sqliteDbWrapper.txn(applyMutations)
+              } else {
+                return applyMutations()
               }
-            },
-          )
+            } catch (e: any) {
+              console.error(e)
+              span.setStatus({ code: otel.SpanStatusCode.ERROR, message: e.toString() })
+              throw e
+            } finally {
+              span.end()
+            }
+          })()
 
-          const tablesToUpdate = [] as [Ref<null, QueryContext, RefreshReason>, null][]
+          const tablesToUpdate = [] as [Ref<null, ReactivityGraphContext, RefreshReason>, null][]
           for (const tableName of writeTables) {
             const tableRef = this.tableRefs[tableName]
             assertNever(tableRef !== undefined, `No table ref found for ${tableName}`)
@@ -472,41 +572,48 @@ export class Store<
       meta: { liveStoreRefType: 'table' },
     })
 
-  __devDownloadDb = (source: 'local' | 'leader' = 'local') => {
-    Effect.gen(this, function* () {
-      const data = source === 'local' ? this.syncDbWrapper.export() : yield* this.clientSession.leaderThread.export
-      downloadBlob(data, `livestore-${Date.now()}.db`)
-    }).pipe(this.runEffectFork)
-  }
-
-  __devDownloadMutationLogDb = () => {
-    Effect.gen(this, function* () {
-      const data = yield* this.clientSession.leaderThread.getMutationLogData
-      downloadBlob(data, `livestore-mutationlog-${Date.now()}.db`)
-    }).pipe(this.runEffectFork)
-  }
-
-  __devHardReset = (mode: 'all-data' | 'only-app-db' = 'all-data') => {
-    Effect.gen(this, function* () {
-      yield* this.clientSession.leaderThread.sendDevtoolsMessage(
-        Devtools.ResetAllDataReq.make({ liveStoreVersion, mode, requestId: nanoid() }),
-      )
-    }).pipe(this.runEffectFork)
-  }
-
-  __devSyncStates = () => {
-    Effect.gen(this, function* () {
-      const session = this.syncProcessor.syncStateRef.current
-      console.log('Session sync state:', session.toJSON())
-      const leader = yield* this.clientSession.leaderThread.getSyncState
-      console.log('Leader sync state:', leader.toJSON())
-    }).pipe(this.runEffectFork)
-  }
-
-  __devShutdown = (cause?: Cause.Cause<UnexpectedError>) => {
-    this.clientSession
-      .shutdown(cause ?? Cause.fail(IntentionalShutdownCause.make({ reason: 'manual' })))
-      .pipe(Effect.tapCauseLogPretty, Effect.provide(this.runtime), Effect.runFork)
+  /**
+   * Helper methods useful during development
+   *
+   * @internal
+   */
+  _dev = {
+    downloadDb: (source: 'local' | 'leader' = 'local') => {
+      Effect.gen(this, function* () {
+        const data = source === 'local' ? this.sqliteDbWrapper.export() : yield* this.clientSession.leaderThread.export
+        downloadBlob(data, `livestore-${Date.now()}.db`)
+      }).pipe(this.runEffectFork)
+    },
+
+    downloadMutationLogDb: () => {
+      Effect.gen(this, function* () {
+        const data = yield* this.clientSession.leaderThread.getMutationLogData
+        downloadBlob(data, `livestore-mutationlog-${Date.now()}.db`)
+      }).pipe(this.runEffectFork)
+    },
+
+    hardReset: (mode: 'all-data' | 'only-app-db' = 'all-data') => {
+      Effect.gen(this, function* () {
+        yield* this.clientSession.leaderThread.sendDevtoolsMessage(
+          Devtools.ResetAllDataReq.make({ liveStoreVersion, mode, requestId: nanoid() }),
+        )
+      }).pipe(this.runEffectFork)
+    },
+
+    syncStates: () => {
+      Effect.gen(this, function* () {
+        const session = this.syncProcessor.syncStateRef.current
+        console.log('Session sync state:', session.toJSON())
+        const leader = yield* this.clientSession.leaderThread.getSyncState
+        console.log('Leader sync state:', leader.toJSON())
+      }).pipe(this.runEffectFork)
+    },
+
+    shutdown: (cause?: Cause.Cause<UnexpectedError>) => {
+      this.clientSession
+        .shutdown(cause ?? Cause.fail(IntentionalShutdownCause.make({ reason: 'manual' })))
+        .pipe(Effect.tapCauseLogPretty, Effect.provide(this.runtime), Effect.runFork)
+    },
   }
 
   // NOTE This is needed because when booting a Store via Effect it seems to call `toJSON` in the error path

package/src/utils/function-string.ts

@@ -0,0 +1,12 @@
+// Related https://github.com/facebook/hermes/issues/612#issuecomment-2549404649
+const REACT_NATIVE_BAD_FUNCTION_STRING = 'function() { [bytecode] }'
+
+export const isValidFunctionString = (
+  fnStr: string,
+): { _tag: 'valid' } | { _tag: 'invalid'; reason: 'react-native' } => {
+  if (fnStr === REACT_NATIVE_BAD_FUNCTION_STRING) {
+    return { _tag: 'invalid', reason: 'react-native' }
+  }
+
+  return { _tag: 'valid' }
+}

package/src/utils/stack-info.test.ts

@@ -46,7 +46,7 @@ Error
 
 it('Tracklist_ stacktrace', async () => {
   const stackTrace = `\
-stack Error
+Error
     at https://localhost:8081/@fs/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/livestore/dist/react/useQuery.js?t=1701368568351:19:23
     at mountMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:12817:27)
     at Object.useMemo (https://localhost:8081/node_modules/.vite-web/deps/chunk-YKTDXTVC.js?v=86daed82:13141:24)
@@ -77,3 +77,60 @@ stack Error
     }
   `)
 })
+
+it('React 19', async () => {
+  const stackTrace = `\
+Error: 
+    at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useQuery.ts:57:19
+    at mountMemo (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:6816:23)
+    at Object.useMemo (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:22757:18)
+    at Object.process.env.NODE_ENV.exports.useMemo (/Users/schickling/Code/overtone/node_modules/.pnpm/react@19.0.0/node_modules/react/cjs/react.development.js:1488:34)
+    at Module.useQueryRef (/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useQuery.ts:54:27)
+    at Module.useRow (/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useRow.ts:111:20)
+    at TestComponent (/Users/schickling/Code/overtone/node_modules/.pnpm/@testing-library+react@16.1.0_@testing-library+dom@10.4.0_@types+react-dom@19.0.3_@types+reac_2jaiibiag2sxou3wtzbuqx3r5a/node_modules/@testing-library/react/dist/pure.js:309:27)
+    at Object.react-stack-bottom-frame (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:22428:20)
+    at renderWithHooks (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:5757:22)
+  `
+
+  const stackInfo = extractStackInfoFromStackTrace(stackTrace)
+  expect(stackInfo).toMatchInlineSnapshot(`
+    {
+      "frames": [
+        {
+          "filePath": "/Users/schickling/Code/overtone/node_modules/.pnpm/@testing-library+react@16.1.0_@testing-library+dom@10.4.0_@types+react-dom@19.0.3_@types+reac_2jaiibiag2sxou3wtzbuqx3r5a/node_modules/@testing-library/react/dist/pure.js:309:27",
+          "name": "TestComponent",
+        },
+        {
+          "filePath": "/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useRow.ts:111:20",
+          "name": "useRow",
+        },
+      ],
+    }
+  `)
+})
+
+it('React 19 - skip react-stack-bottom-frame', async () => {
+  const stackTrace = `\
+Error: 
+    at /Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useQuery.ts:57:19
+    at mountMemo (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:6816:23)
+    at Object.useMemo (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:22757:18)
+    at Object.process.env.NODE_ENV.exports.useMemo (/Users/schickling/Code/overtone/node_modules/.pnpm/react@19.0.0/node_modules/react/cjs/react.development.js:1488:34)
+    at Module.useQueryRef (/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useQuery.ts:54:27)
+    at Module.useRow (/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useRow.ts:111:20)
+    at Object.react-stack-bottom-frame (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:22428:20)
+    at renderWithHooks (/Users/schickling/Code/overtone/node_modules/.pnpm/react-dom@19.0.0_react@19.0.0/node_modules/react-dom/cjs/react-dom-client.development.js:5757:22)
+  `
+
+  const stackInfo = extractStackInfoFromStackTrace(stackTrace)
+  expect(stackInfo).toMatchInlineSnapshot(`
+    {
+      "frames": [
+        {
+          "filePath": "/Users/schickling/Code/overtone/submodules/livestore/packages/@livestore/react/src/useRow.ts:111:20",
+          "name": "useRow",
+        },
+      ],
+    }
+  `)
+})

package/src/utils/stack-info.ts

@@ -34,15 +34,20 @@ export const extractStackInfoFromStackTrace = (stackTrace: string): StackInfo =>
 
   while ((match = namePattern.exec(stackTrace)) !== null) {
     const [, name, filePath] = match as any as [string, string, string]
+    // console.debug(name, filePath)
 
     // NOTE No idea where this `Module.` comes from - possibly a Vite thing?
     if ((name.startsWith('use') || name.startsWith('Module.use')) && name.endsWith('QueryRef') === false) {
       hasReachedStart = true
+      // console.debug('hasReachedStart. adding one more frame.')
 
       frames.unshift({ name: name.replace(/^Module\./, ''), filePath })
     } else if (hasReachedStart) {
       // We've reached the end of the `use*` functions, so we're adding the component name and stop
-      frames.unshift({ name, filePath })
+      // Unless it's `react-stack-bottom-frame`, which we skip
+      if (name !== 'Object.react-stack-bottom-frame') {
+        frames.unshift({ name, filePath })
+      }
       break
     }
   }