@multiplayer-app/session-recorder-react 1.2.31 → 1.2.33

package/README.md

@@ -402,7 +402,7 @@ Notes:
 
 - Use `NEXT_PUBLIC_` environment variables for values needed on the client (e.g. `NEXT_PUBLIC_MULTIPLAYER_API_KEY`).
 - `instrumentation-client.ts` ensures initialization happens before your UI mounts; the provider is still required to wire React context and hooks.
-- You can rely on `onRouterTransitionStart` for navigation tracking in Next.js 15.3+, or use the `NavigationTracker` client component as shown below.
+- You can rely on `onRouterTransitionStart` for navigation tracking in Next.js 15.3+.
 
 ### Next.js < 15.3
 
@@ -415,7 +415,6 @@ An official Next.js-specific wrapper is coming soon. Until then, you can use thi
 import React, { useEffect } from 'react'
 import dynamic from 'next/dynamic'
 
-// Load provider on the client only
 const SessionRecorderProvider = dynamic(
   () => import('@multiplayer-app/session-recorder-react').then((m) => m.SessionRecorderProvider),
   { ssr: false }
@@ -423,8 +422,9 @@ const SessionRecorderProvider = dynamic(
 
 export function Providers({ children }: { children: React.ReactNode }) {
   useEffect(() => {
+    if (typeof window === 'undefined') return
     let isMounted = true
-    ;(async () => {
+    const initSessionRecorder = async () => {
       try {
         const { default: SessionRecorder } = await import('@multiplayer-app/session-recorder-react')
         if (!isMounted) return
@@ -433,17 +433,20 @@ export function Providers({ children }: { children: React.ReactNode }) {
           version: '1.0.0',
           environment: process.env.NEXT_PUBLIC_ENVIRONMENT ?? 'production',
           apiKey: process.env.NEXT_PUBLIC_MULTIPLAYER_API_KEY!,
-          showWidget: true
+          showWidget: true,
+          // If your APIs are on different origins, add them so OTLP headers are propagated
+          // format: string | RegExp | Array
+          propagateTraceHeaderCorsUrls: [new RegExp('https://api.example.com', 'i')]
         })
       } catch (error) {
-        console.error('[SessionRecorder] init failed:', error)
+        console.error('Failed to initialize session recorder', error)
       }
-    })()
+    }
+    initSessionRecorder()
     return () => {
       isMounted = false
     }
   }, [])
-
   return <SessionRecorderProvider>{children}</SessionRecorderProvider>
 }
 ```
@@ -514,6 +517,27 @@ export function NavigationTrackerLegacy() {
 }
 ```
 
+### Important: Client Components only (Next.js)
+
+When using this package in Next.js App Router, ensure any code that uses Session Recorder hooks or APIs runs in a Client Component.
+
+- Hooks and selectors such as `useSessionRecorder`, `useSessionRecordingState`, `useIsInitialized`, and `useNavigationRecorder` must be called from files that start with `'use client'`.
+- Any direct usage of `SessionRecorder.*` that touches the browser SDK must also run on the client.
+- Render `SessionRecorderProvider` from a Client Component.
+
+#### Example: Reading session state in a Client Component
+
+```tsx
+'use client'
+import React from 'react'
+import { useSessionRecordingState, SessionState } from '@multiplayer-app/session-recorder-react'
+
+export default function SessionStatus() {
+  const state = useSessionRecordingState()
+  return <span>Session state: {state ?? SessionState.stopped}</span>
+}
+```
+
 ## TypeScript support
 
 All hooks and helpers ship with TypeScript types. To extend the navigation metadata, annotate the `params` or `metadata` properties in your own app code. The package re-exports all relevant browser SDK types for convenience.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react",
-  "version": "1.2.31",
+  "version": "1.2.33",
   "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": "1.2.31",
-    "@multiplayer-app/session-recorder-common": "1.2.31"
+    "@multiplayer-app/session-recorder-browser": "1.2.33",
+    "@multiplayer-app/session-recorder-common": "1.2.33"
   },
   "devDependencies": {
     "eslint": "8.48.0",