@multiplayer-app/session-recorder-react 2.0.17-alpha.9 → 2.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react",
-  "version": "2.0.17-alpha.9",
+  "version": "2.0.18",
   "description": "Multiplayer Fullstack Session Recorder for React (browser wrapper)",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -35,8 +35,8 @@
     "@opentelemetry/api": "^1.9.0"
   },
   "dependencies": {
-    "@multiplayer-app/session-recorder-browser": "2.0.17-alpha.9",
-    "@multiplayer-app/session-recorder-common": "2.0.17-alpha.9"
+    "@multiplayer-app/session-recorder-browser": "2.0.18",
+    "@multiplayer-app/session-recorder-common": "2.0.18"
   },
   "devDependencies": {
     "eslint": "10.1.0",

package/src/ErrorBoundary.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import SessionRecorder from '@multiplayer-app/session-recorder-browser'
-
-export type ErrorBoundaryProps = {
-  children: React.ReactNode
-  /** Optional fallback UI to render when an error is caught */
-  fallback?: React.ReactNode
-}
-
-type State = { hasError: boolean }
-
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(): State {
-    return { hasError: true }
-  }
-
-  componentDidCatch(error: unknown, errorInfo: React.ErrorInfo): void {
-    try {
-      SessionRecorder.captureException(error, errorInfo)
-    } catch (_e) {
-      // no-op
-    }
-  }
-
-  render(): React.ReactNode {
-    if (this.state.hasError) {
-      return this.props.fallback ?? null
-    }
-    return this.props.children
-  }
-}
-
-export default ErrorBoundary

package/src/context/SessionRecorderContext.tsx

@@ -1,100 +0,0 @@
-import React, { createContext, useContext, useEffect, useCallback, type PropsWithChildren } from 'react'
-import SessionRecorder, { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser'
-import { sessionRecorderStore } from './SessionRecorderStore'
-
-type SessionRecorderOptions = any
-
-interface SessionRecorderContextType {
-  instance: typeof SessionRecorder
-  startSession: (sessionType?: SessionType) => void | Promise<void>
-  stopSession: (comment?: string) => Promise<void>
-  pauseSession: () => Promise<void>
-  resumeSession: () => Promise<void>
-  cancelSession: () => Promise<void>
-  saveSession: () => Promise<any>
-}
-
-const SessionRecorderContext = createContext<SessionRecorderContextType | null>(null)
-
-export interface SessionRecorderProviderProps extends PropsWithChildren {
-  options?: SessionRecorderOptions
-}
-
-export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, options }) => {
-  useEffect(() => {
-    if (options) {
-      SessionRecorder.init(options)
-    }
-    sessionRecorderStore.setState({ isInitialized: SessionRecorder.isInitialized })
-  }, [])
-
-  useEffect(() => {
-    sessionRecorderStore.setState({
-      sessionState: SessionRecorder.sessionState,
-      sessionType: SessionRecorder.sessionType,
-    })
-
-    const onStateChange = (sessionState: SessionState) => {
-      sessionRecorderStore.setState({ sessionState })
-    }
-    const onInit = () => {
-      sessionRecorderStore.setState({ isInitialized: true })
-    }
-
-    SessionRecorder.on('state-change', onStateChange)
-    SessionRecorder.on('init', onInit)
-    return () => {
-      SessionRecorder.off('state-change', onStateChange)
-      SessionRecorder.off('init', onInit)
-    }
-  }, [])
-
-  const startSession = useCallback((sessionType: SessionType = SessionType.MANUAL) => {
-    return SessionRecorder.start(sessionType)
-  }, [])
-
-  const stopSession = useCallback((comment?: string) => {
-    return SessionRecorder.stop(comment)
-  }, [])
-
-  const pauseSession = useCallback(() => {
-    return SessionRecorder.pause()
-  }, [])
-
-  const resumeSession = useCallback(() => {
-    return SessionRecorder.resume()
-  }, [])
-
-  const cancelSession = useCallback(() => {
-    return SessionRecorder.cancel()
-  }, [])
-
-  const saveSession = useCallback(() => {
-    return SessionRecorder.save()
-  }, [])
-
-  return (
-    <SessionRecorderContext.Provider
-      value={{
-        instance: SessionRecorder,
-        startSession,
-        stopSession,
-        pauseSession,
-        resumeSession,
-        cancelSession,
-        saveSession,
-      }}
-    >
-      {children}
-      {/* No widget component here; consumer can import the browser widget if needed */}
-    </SessionRecorderContext.Provider>
-  )
-}
-
-export const useSessionRecorder = (): SessionRecorderContextType => {
-  const context = useContext(SessionRecorderContext)
-  if (!context) {
-    throw new Error('useSessionRecorder must be used within a SessionRecorderProvider')
-  }
-  return context
-}

package/src/context/SessionRecorderStore.ts

@@ -1,20 +0,0 @@
-import { createStore, type Store } from './createStore'
-import { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser'
-
-
-export type SessionRecorderState = {
-  isInitialized: boolean;
-  sessionType: SessionType | null;
-  sessionState: SessionState | null;
-  isOnline: boolean;
-  error: string | null;
-};
-
-export const sessionRecorderStore: Store<SessionRecorderState> =
-  createStore<SessionRecorderState>({
-    isInitialized: false,
-    sessionType: null,
-    sessionState: null,
-    isOnline: true,
-    error: null,
-  })

package/src/context/createStore.ts

@@ -1,37 +0,0 @@
-export type SessionRecorderState = {
-  isInitialized: boolean
-  sessionType: any | null
-  sessionState: any | null
-  isOnline: boolean
-  error: string | null
-}
-
-type Listener<T> = (state: T, prev: T) => void
-
-export type Store<T> = {
-  getState: () => T
-  setState: (partial: Partial<T> | ((prev: T) => T)) => void
-  subscribe: (listener: Listener<T>) => () => void
-}
-
-export function createStore<T extends object>(initialState: T): Store<T> {
-  let state = initialState
-  const listeners = new Set<Listener<T>>()
-
-  const getState = () => state
-
-  const setState: Store<T>['setState'] = (partial) => {
-    const prev = state
-    const next = typeof partial === 'function' ? (partial as (p: T) => T)(prev) : ({ ...prev, ...partial } as T)
-    if (Object.is(next, prev)) return
-    state = next
-    listeners.forEach((l) => l(state, prev))
-  }
-
-  const subscribe: Store<T>['subscribe'] = (listener) => {
-    listeners.add(listener)
-    return () => listeners.delete(listener)
-  }
-
-  return { getState, setState, subscribe }
-}

package/src/context/useSessionRecorderStore.ts

@@ -1,47 +0,0 @@
-import { SessionState, SessionType } from '@multiplayer-app/session-recorder-browser'
-
-import {
-  type SessionRecorderState,
-  sessionRecorderStore,
-} from './SessionRecorderStore'
-import { useStoreSelector } from './useStoreSelector'
-
-/**
- * Select a derived slice from the shared Session Recorder store.
- * Works in both React (web) and React Native since the store shape is identical.
- *
- * @param selector - Function that maps the full store state to the slice you need
- * @param equalityFn - Optional comparator to avoid unnecessary re-renders
- * @returns The selected slice of state
- */
-export function useSessionRecorderStore<TSlice>(
-  selector: (s: SessionRecorderState) => TSlice,
-  equalityFn?: (a: TSlice, b: TSlice) => boolean,
-): TSlice {
-  return useStoreSelector<SessionRecorderState, TSlice>(
-    sessionRecorderStore,
-    selector,
-    equalityFn,
-  )
-}
-
-/**
- * Read the current session recording state (started, paused, stopped).
- */
-export function useSessionRecordingState() {
-  return useSessionRecorderStore<SessionState | null>((s) => s.sessionState)
-}
-
-/**
- * Read the current session type (MANUAL/CONTINUOUS).
- */
-export function useSessionType() {
-  return useSessionRecorderStore<SessionType | null>((s) => s.sessionType)
-}
-
-/**
- * Check whether the Session Recorder has been initialized.
- */
-export function useIsInitialized() {
-  return useSessionRecorderStore<boolean>((s) => s.isInitialized)
-}

package/src/context/useStoreSelector.ts

@@ -1,36 +0,0 @@
-import { useEffect, useRef, useState } from 'react'
-import { type Store } from './createStore'
-import { shallowEqual } from '../utils/shallowEqual'
-
-export function useStoreSelector<TState extends object, TSlice>(
-  store: Store<TState>,
-  selector: (state: TState) => TSlice,
-  equalityFn: (a: TSlice, b: TSlice) => boolean = Object.is,
-): TSlice {
-  const latestSelectorRef = useRef(selector)
-  const latestEqualityRef = useRef(equalityFn)
-  latestSelectorRef.current = selector
-  latestEqualityRef.current = equalityFn
-
-  const [slice, setSlice] = useState<TSlice>(() =>
-    latestSelectorRef.current(store.getState()),
-  )
-
-  useEffect(() => {
-    function handleChange(nextState: TState, prevState: TState) {
-      const nextSlice = latestSelectorRef.current(nextState)
-      const prevSlice = latestSelectorRef.current(prevState)
-      if (!latestEqualityRef.current(nextSlice, prevSlice)) {
-        setSlice(nextSlice)
-      }
-    }
-    const unsubscribe = store.subscribe(handleChange)
-    // Sync once in case changed between render and effect
-    handleChange(store.getState(), store.getState())
-    return unsubscribe
-  }, [store])
-
-  return slice
-}
-
-export const shallow = shallowEqual

package/src/index.ts

@@ -1,8 +0,0 @@
-export * from '@multiplayer-app/session-recorder-browser'
-export { default } from '@multiplayer-app/session-recorder-browser'
-
-export * from './context/SessionRecorderContext'
-export * from './context/useSessionRecorderStore'
-export { ErrorBoundary } from './ErrorBoundary'
-export { useNavigationRecorder } from './navigation'
-export type { UseNavigationRecorderOptions } from './navigation'

package/src/navigation.ts

@@ -1,86 +0,0 @@
-import { useEffect, useRef } from 'react'
-import SessionRecorderBrowser, {
-  NavigationSignal,
-} from '@multiplayer-app/session-recorder-browser'
-
-export interface UseNavigationRecorderOptions
-  extends Partial<Omit<NavigationSignal, 'path' | 'timestamp'>> {
-  /**
-   * Overrides the path sent to the recorder. Defaults to the provided pathname argument.
-   */
-  path?: string
-  /**
-   * When true (default), document.title is captured if available.
-   */
-  captureDocumentTitle?: boolean
-}
-
-/**
- * React Router compatible navigation recorder hook.
- * Call inside a component where you can access current location and navigation events.
- * Example:
- *   const location = useLocation();
- *   useNavigationRecorder(location.pathname);
- */
-export function useNavigationRecorder(
-  pathname: string,
-  options?: UseNavigationRecorderOptions,
-): void {
-  const optionsRef = useRef(options)
-  const hasRecordedInitialRef = useRef(false)
-  const lastPathRef = useRef<string | null>(null)
-
-  useEffect(() => {
-    optionsRef.current = options
-  }, [options])
-
-  useEffect(() => {
-    if (!pathname || !SessionRecorderBrowser?.navigation) {
-      return
-    }
-
-    const resolvedOptions = optionsRef.current || {}
-    const resolvedPath = resolvedOptions.path ?? pathname
-
-    if (!resolvedPath) {
-      return
-    }
-
-    if (lastPathRef.current === resolvedPath && !resolvedOptions.navigationType) {
-      return
-    }
-
-    const captureDocumentTitle =
-      resolvedOptions.captureDocumentTitle ?? true
-
-    const signal: NavigationSignal = {
-      path: resolvedPath,
-      routeName: resolvedOptions.routeName ?? resolvedPath,
-      title:
-        resolvedOptions.title ??
-        (captureDocumentTitle && typeof document !== 'undefined'
-          ? document.title
-          : undefined),
-      url: resolvedOptions.url,
-      params: resolvedOptions.params,
-      state: resolvedOptions.state,
-      navigationType:
-        resolvedOptions.navigationType ??
-        (hasRecordedInitialRef.current ? undefined : 'initial'),
-      framework: resolvedOptions.framework ?? 'react',
-      source: resolvedOptions.source ?? 'react-router',
-      metadata: resolvedOptions.metadata,
-    }
-
-    try {
-      SessionRecorderBrowser.navigation.record(signal)
-      hasRecordedInitialRef.current = true
-      lastPathRef.current = resolvedPath
-    } catch (error) {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.warn('[SessionRecorder][React] Failed to record navigation', error)
-      }
-    }
-  }, [pathname])
-}

package/src/utils/shallowEqual.ts

@@ -1,20 +0,0 @@
-export function shallowEqual<T extends Record<string, any>>(
-  a: T,
-  b: T,
-): boolean {
-  if (Object.is(a, b)) return true
-  if (!a || !b) return false
-  const aKeys = Object.keys(a)
-  const bKeys = Object.keys(b)
-  if (aKeys.length !== bKeys.length) return false
-  for (let i = 0; i < aKeys.length; i++) {
-    const key = aKeys[i]
-    if (
-      !Object.prototype.hasOwnProperty.call(b, key!) ||
-      !Object.is(a[key!], b[key!])
-    ) {
-      return false
-    }
-  }
-  return true
-}

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "outDir": "dist",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "jsx": "react-jsx",
-    "types": ["react"]
-  },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
-}