@multiplayer-app/session-recorder-react 1.2.29 → 1.2.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +52 -13
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -408,28 +408,67 @@ Notes:
|
|
|
408
408
|
|
|
409
409
|
An official Next.js-specific wrapper is coming soon. Until then, you can use this package safely in Next.js by:
|
|
410
410
|
|
|
411
|
-
1. Initializing in a Client Component
|
|
411
|
+
1. Initializing in a Client Component (client-only with dynamic imports)
|
|
412
412
|
|
|
413
413
|
```tsx
|
|
414
414
|
'use client'
|
|
415
|
-
import React from 'react'
|
|
416
|
-
import
|
|
415
|
+
import React, { useEffect } from 'react'
|
|
416
|
+
import dynamic from 'next/dynamic'
|
|
417
417
|
|
|
418
|
-
//
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
apiKey: 'YOUR_MULTIPLAYER_API_KEY',
|
|
424
|
-
showWidget: true
|
|
425
|
-
})
|
|
418
|
+
// Load provider on the client only
|
|
419
|
+
const SessionRecorderProvider = dynamic(
|
|
420
|
+
() => import('@multiplayer-app/session-recorder-react').then((m) => m.SessionRecorderProvider),
|
|
421
|
+
{ ssr: false }
|
|
422
|
+
)
|
|
426
423
|
|
|
427
424
|
export function Providers({ children }: { children: React.ReactNode }) {
|
|
425
|
+
useEffect(() => {
|
|
426
|
+
let isMounted = true
|
|
427
|
+
;(async () => {
|
|
428
|
+
try {
|
|
429
|
+
const { default: SessionRecorder } = await import('@multiplayer-app/session-recorder-react')
|
|
430
|
+
if (!isMounted) return
|
|
431
|
+
SessionRecorder.init({
|
|
432
|
+
application: 'my-next-app',
|
|
433
|
+
version: '1.0.0',
|
|
434
|
+
environment: process.env.NEXT_PUBLIC_ENVIRONMENT ?? 'production',
|
|
435
|
+
apiKey: process.env.NEXT_PUBLIC_MULTIPLAYER_API_KEY!,
|
|
436
|
+
showWidget: true
|
|
437
|
+
})
|
|
438
|
+
} catch (error) {
|
|
439
|
+
console.error('[SessionRecorder] init failed:', error)
|
|
440
|
+
}
|
|
441
|
+
})()
|
|
442
|
+
return () => {
|
|
443
|
+
isMounted = false
|
|
444
|
+
}
|
|
445
|
+
}, [])
|
|
446
|
+
|
|
428
447
|
return <SessionRecorderProvider>{children}</SessionRecorderProvider>
|
|
429
448
|
}
|
|
430
449
|
```
|
|
431
450
|
|
|
432
|
-
2.
|
|
451
|
+
2. Wire it in `src/app/layout.tsx`
|
|
452
|
+
|
|
453
|
+
```tsx
|
|
454
|
+
import React from 'react'
|
|
455
|
+
import dynamic from 'next/dynamic'
|
|
456
|
+
|
|
457
|
+
// Render provider client-only as a belt-and-suspenders against SSR
|
|
458
|
+
const Providers = dynamic(() => import('./providers').then((m) => m.Providers), { ssr: false })
|
|
459
|
+
|
|
460
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
461
|
+
return (
|
|
462
|
+
<html lang='en'>
|
|
463
|
+
<body>
|
|
464
|
+
<Providers>{children}</Providers>
|
|
465
|
+
</body>
|
|
466
|
+
</html>
|
|
467
|
+
)
|
|
468
|
+
}
|
|
469
|
+
```
|
|
470
|
+
|
|
471
|
+
3. Tracking navigation (App Router)
|
|
433
472
|
|
|
434
473
|
```tsx
|
|
435
474
|
'use client'
|
|
@@ -454,7 +493,7 @@ export function NavigationTracker() {
|
|
|
454
493
|
}
|
|
455
494
|
```
|
|
456
495
|
|
|
457
|
-
|
|
496
|
+
4. Tracking navigation (Pages Router, older)
|
|
458
497
|
|
|
459
498
|
```tsx
|
|
460
499
|
'use client'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@multiplayer-app/session-recorder-react",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.31",
|
|
4
4
|
"description": "Multiplayer Fullstack Session Recorder for React (browser wrapper)",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Multiplayer Software, Inc.",
|
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
"@opentelemetry/api": "^1.9.0"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@multiplayer-app/session-recorder-browser": "1.2.
|
|
39
|
-
"@multiplayer-app/session-recorder-common": "1.2.
|
|
38
|
+
"@multiplayer-app/session-recorder-browser": "1.2.31",
|
|
39
|
+
"@multiplayer-app/session-recorder-common": "1.2.31"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"eslint": "8.48.0",
|