@multiplayer-app/session-recorder-react-native 0.0.1-beta.7 → 0.0.1-beta.8

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.
Files changed (74) hide show
  1. package/docs/NATIVE_MODULE_SETUP.md +175 -0
  2. package/ios/SessionRecorderNative.podspec +5 -0
  3. package/package.json +11 -1
  4. package/plugin/package.json +20 -0
  5. package/plugin/src/index.js +42 -0
  6. package/android/src/main/AndroidManifest.xml +0 -2
  7. package/android/src/main/java/com/multiplayer/sessionrecorder/ScreenMaskingModule.kt +0 -202
  8. package/android/src/main/java/com/multiplayer/sessionrecorder/ScreenMaskingPackage.kt +0 -16
  9. package/android/src/main/java/com/multiplayer/sessionrecorder/SessionRecorderModule.kt +0 -202
  10. package/android/src/main/java/com/multiplayer/sessionrecorder/SessionRecorderPackage.kt +0 -16
  11. package/babel.config.js +0 -13
  12. package/docs/AUTO_METADATA_DETECTION.md +0 -108
  13. package/docs/TROUBLESHOOTING.md +0 -168
  14. package/ios/ScreenMasking.m +0 -12
  15. package/ios/ScreenMasking.podspec +0 -21
  16. package/ios/ScreenMasking.swift +0 -205
  17. package/ios/SessionRecorder.podspec +0 -21
  18. package/scripts/generate-app-metadata.js +0 -173
  19. package/src/components/GestureCaptureWrapper/GestureCaptureWrapper.tsx +0 -86
  20. package/src/components/GestureCaptureWrapper/index.ts +0 -1
  21. package/src/components/ScreenRecorderView/ScreenRecorderView.tsx +0 -72
  22. package/src/components/ScreenRecorderView/index.ts +0 -1
  23. package/src/components/SessionRecorderWidget/FinalPopover.tsx +0 -62
  24. package/src/components/SessionRecorderWidget/FloatingButton.tsx +0 -136
  25. package/src/components/SessionRecorderWidget/InitialPopover.tsx +0 -89
  26. package/src/components/SessionRecorderWidget/ModalContainer.tsx +0 -128
  27. package/src/components/SessionRecorderWidget/ModalHeader.tsx +0 -24
  28. package/src/components/SessionRecorderWidget/SessionRecorderWidget.tsx +0 -109
  29. package/src/components/SessionRecorderWidget/icons.tsx +0 -52
  30. package/src/components/SessionRecorderWidget/index.ts +0 -3
  31. package/src/components/SessionRecorderWidget/styles.ts +0 -150
  32. package/src/components/index.ts +0 -3
  33. package/src/config/constants.ts +0 -60
  34. package/src/config/defaults.ts +0 -83
  35. package/src/config/index.ts +0 -6
  36. package/src/config/masking.ts +0 -28
  37. package/src/config/session-recorder.ts +0 -55
  38. package/src/config/validators.ts +0 -31
  39. package/src/context/SessionRecorderContext.tsx +0 -53
  40. package/src/index.ts +0 -9
  41. package/src/native/ScreenMasking.ts +0 -34
  42. package/src/native/SessionRecorderNative.ts +0 -34
  43. package/src/otel/helpers.ts +0 -275
  44. package/src/otel/index.ts +0 -138
  45. package/src/otel/instrumentations/index.ts +0 -115
  46. package/src/patch/index.ts +0 -1
  47. package/src/patch/xhr.ts +0 -141
  48. package/src/recorder/eventExporter.ts +0 -141
  49. package/src/recorder/gestureRecorder.ts +0 -498
  50. package/src/recorder/index.ts +0 -179
  51. package/src/recorder/navigationTracker.ts +0 -449
  52. package/src/recorder/screenRecorder.ts +0 -527
  53. package/src/services/api.service.ts +0 -203
  54. package/src/services/screenMaskingService.ts +0 -118
  55. package/src/services/storage.service.ts +0 -199
  56. package/src/session-recorder.ts +0 -606
  57. package/src/types/expo.d.ts +0 -23
  58. package/src/types/index.ts +0 -28
  59. package/src/types/session-recorder.ts +0 -429
  60. package/src/types/session.ts +0 -65
  61. package/src/utils/app-metadata.ts +0 -31
  62. package/src/utils/index.ts +0 -8
  63. package/src/utils/logger.ts +0 -225
  64. package/src/utils/nativeModuleTest.ts +0 -60
  65. package/src/utils/platform.ts +0 -384
  66. package/src/utils/request-utils.ts +0 -61
  67. package/src/utils/rrweb-events.ts +0 -309
  68. package/src/utils/session.ts +0 -18
  69. package/src/utils/time.ts +0 -17
  70. package/src/utils/type-utils.ts +0 -75
  71. package/src/version.ts +0 -1
  72. package/tsconfig.json +0 -24
  73. /package/ios/{SessionRecorder.m → SessionRecorderNative.m} +0 -0
  74. /package/ios/{SessionRecorder.swift → SessionRecorderNative.swift} +0 -0
@@ -1,128 +0,0 @@
1
- import React, { useEffect, useRef, useState } from 'react'
2
- import { Animated, Pressable, StyleSheet, Dimensions, Modal, SafeAreaView } from 'react-native'
3
- import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
4
-
5
- const { height: SCREEN_HEIGHT } = Dimensions.get('window')
6
- const MODAL_HEIGHT = SCREEN_HEIGHT * 0.7
7
-
8
- interface ModalContainerProps {
9
- isVisible: boolean
10
- onClose: () => void
11
- children: React.ReactNode
12
- }
13
-
14
- const ModalContainer: React.FC<ModalContainerProps> = ({ isVisible, onClose, children }) => {
15
- const fadeAnim = useRef(new Animated.Value(0)).current
16
- const translateY = useRef(new Animated.Value(0)).current
17
- const [animatedFinished, setAnimatedFinished] = useState(false)
18
-
19
- const SWIPE_THRESHOLD = 100 // Distance to trigger close
20
- const MAX_SWIPE_DISTANCE = 200 // Maximum swipe distance
21
-
22
- const animateClose = () => {
23
- Animated.parallel([
24
- Animated.timing(fadeAnim, {
25
- toValue: 0,
26
- duration: 250,
27
- useNativeDriver: true
28
- }),
29
- Animated.timing(translateY, {
30
- toValue: MODAL_HEIGHT,
31
- duration: 250,
32
- useNativeDriver: true
33
- })
34
- ]).start(() => {
35
- onClose()
36
- })
37
- }
38
-
39
- useEffect(() => {
40
- if (isVisible) {
41
- // Start from bottom and animate to position
42
- translateY.setValue(MODAL_HEIGHT)
43
- Animated.parallel([
44
- Animated.timing(fadeAnim, {
45
- toValue: 1,
46
- duration: 300,
47
- useNativeDriver: true
48
- }),
49
- Animated.timing(translateY, {
50
- toValue: 0,
51
- duration: 300,
52
- useNativeDriver: true
53
- })
54
- ]).start()
55
- }
56
- }, [isVisible, fadeAnim, translateY])
57
-
58
- const panGesture = Gesture.Pan()
59
- .onUpdate((event) => {
60
- translateY.setValue(event.translationY)
61
- })
62
- .onEnd((event) => {
63
- const { translationY, velocityY } = event
64
-
65
- // If swiped down with sufficient distance or velocity, close modal
66
- if (translationY > SWIPE_THRESHOLD || velocityY > 500) {
67
- animateClose()
68
- } else {
69
- // Snap back to original position
70
- Animated.spring(translateY, {
71
- toValue: 0,
72
- useNativeDriver: true,
73
- tension: 100,
74
- friction: 8
75
- }).start()
76
- }
77
- })
78
- .activeOffsetY(10)
79
- .runOnJS(true)
80
-
81
- return (
82
- <>
83
- {isVisible && (
84
- <Animated.View style={{ ...styles.backdrop, opacity: fadeAnim }}>
85
- <Pressable style={styles.backdropPressable} onPress={animateClose} />
86
- </Animated.View>
87
- )}
88
- <Modal visible={isVisible} transparent animationType='none' onRequestClose={onClose}>
89
- <GestureHandlerRootView style={{ flex: 1 }}>
90
- <GestureDetector gesture={panGesture}>
91
- <Animated.View style={[styles.modal, { transform: [{ translateY }] }]}>
92
- <SafeAreaView style={styles.safeArea}>{children}</SafeAreaView>
93
- </Animated.View>
94
- </GestureDetector>
95
- </GestureHandlerRootView>
96
- </Modal>
97
- </>
98
- )
99
- }
100
-
101
- const styles = StyleSheet.create({
102
- backdrop: {
103
- position: 'absolute',
104
- top: 0,
105
- left: 0,
106
- right: 0,
107
- bottom: 0,
108
- backgroundColor: 'rgba(0, 0, 0, 0.5)'
109
- },
110
- backdropPressable: {
111
- flex: 1
112
- },
113
- safeArea: {
114
- flex: 1
115
- },
116
- modal: {
117
- position: 'absolute',
118
- bottom: 0,
119
- left: 0,
120
- right: 0,
121
- height: 'auto',
122
- backgroundColor: 'white',
123
- borderTopLeftRadius: 20,
124
- borderTopRightRadius: 20
125
- }
126
- })
127
-
128
- export default ModalContainer
@@ -1,24 +0,0 @@
1
- import React from 'react'
2
- import { View, Pressable, Linking } from 'react-native'
3
- import { sharedStyles } from './styles'
4
- import { LogoIcon } from './icons'
5
-
6
- interface ModalHeaderProps {
7
- children?: React.ReactNode
8
- }
9
-
10
- const ModalHeader: React.FC<ModalHeaderProps> = ({ children }) => {
11
- return (
12
- <View style={sharedStyles.popoverHeader}>
13
- <View style={sharedStyles.modalHandle} />
14
- <View style={sharedStyles.popoverHeaderContent}>
15
- <Pressable onPress={() => Linking.openURL('https://www.multiplayer.app')}>
16
- <LogoIcon size={42} />
17
- </Pressable>
18
- {children}
19
- </View>
20
- </View>
21
- )
22
- }
23
-
24
- export default ModalHeader
@@ -1,109 +0,0 @@
1
- import React, { useMemo, useState } from 'react'
2
- import { Alert } from 'react-native'
3
- import { SessionState } from '../../types'
4
- import { SessionType } from '@multiplayer-app/session-recorder-common'
5
- import { useSessionRecorder } from '../../context/SessionRecorderContext'
6
- import FloatingButton from './FloatingButton'
7
- import ModalContainer from './ModalContainer'
8
- import InitialPopover from './InitialPopover'
9
- import FinalPopover from './FinalPopover'
10
-
11
- interface SessionRecorderWidgetProps {}
12
-
13
- const SessionRecorderWidget: React.FC<SessionRecorderWidgetProps> = () => {
14
- const { sessionState, instance } = useSessionRecorder()
15
- const [isModalVisible, setIsModalVisible] = useState(false)
16
- const [isSubmitting, setIsSubmitting] = useState(false)
17
-
18
- // Get configuration from instance
19
- const config = instance.config
20
- const textOverrides = config.widgetTextOverrides
21
- const showContinuousRecording = config.showContinuousRecording
22
-
23
- const openModal = () => {
24
- setIsModalVisible(true)
25
- }
26
-
27
- const closeModal = () => {
28
- setIsModalVisible(false)
29
- }
30
-
31
- const onStartRecording = async (sessionType: SessionType) => {
32
- try {
33
- instance.start(sessionType)
34
- closeModal()
35
- } catch (error) {
36
- Alert.alert('Error', 'Failed to start recording')
37
- }
38
- }
39
-
40
- const onStopRecording = async (comment: string) => {
41
- try {
42
- setIsSubmitting(true)
43
- await instance.stop(comment)
44
- closeModal()
45
- Alert.alert('Success', 'Session saved successfully')
46
- } catch (error) {
47
- Alert.alert('Error', 'Failed to save session')
48
- } finally {
49
- setIsSubmitting(false)
50
- }
51
- }
52
-
53
- const onCancelSession = async () => {
54
- try {
55
- await instance.cancel()
56
- closeModal()
57
- } catch (error) {
58
- Alert.alert('Error', 'Failed to cancel session')
59
- }
60
- }
61
-
62
- const onSaveContinuousSession = async () => {
63
- try {
64
- setIsSubmitting(true)
65
- await instance.save()
66
- closeModal()
67
- Alert.alert('Success', 'Continuous session saved successfully')
68
- } catch (error) {
69
- Alert.alert('Error', 'Failed to save continuous session')
70
- } finally {
71
- setIsSubmitting(false)
72
- }
73
- }
74
-
75
- const renderModalContent = useMemo(() => {
76
- if (sessionState === SessionState.started || sessionState === SessionState.paused) {
77
- return (
78
- <FinalPopover
79
- isSubmitting={isSubmitting}
80
- textOverrides={textOverrides}
81
- onClose={closeModal}
82
- onStopRecording={onStopRecording}
83
- onCancelSession={onCancelSession}
84
- />
85
- )
86
- }
87
- return (
88
- <InitialPopover
89
- isSubmitting={isSubmitting}
90
- textOverrides={textOverrides}
91
- showContinuousRecording={showContinuousRecording}
92
- onClose={closeModal}
93
- onStartRecording={onStartRecording}
94
- onSaveContinuousSession={onSaveContinuousSession}
95
- />
96
- )
97
- }, [sessionState, isSubmitting, textOverrides, showContinuousRecording])
98
-
99
- return (
100
- <>
101
- <FloatingButton sessionState={sessionState} onPress={openModal} />
102
- <ModalContainer isVisible={isModalVisible} onClose={closeModal}>
103
- {renderModalContent}
104
- </ModalContainer>
105
- </>
106
- )
107
- }
108
-
109
- export default SessionRecorderWidget
@@ -1,52 +0,0 @@
1
- import React from 'react'
2
- import Svg, { Path, Circle } from 'react-native-svg'
3
-
4
- interface IconProps {
5
- size?: number
6
- color?: string
7
- }
8
-
9
- export const RecordIcon: React.FC<IconProps> = ({ size = 19, color = 'white' }) => (
10
- <Svg width={size} height={size} viewBox='0 0 19 19' fill='none'>
11
- <Path
12
- fillRule='evenodd'
13
- clipRule='evenodd'
14
- d='M6.68926 5.30356C6.56568 5.38721 6.39976 5.37561 6.29459 5.26937L3.58782 2.53477C3.46424 2.40992 3.47196 2.20492 3.60862 2.09483C5.2319 0.786982 7.28494 0 9.51866 0C11.7535 0 13.8066 0.787042 15.4308 2.09586C15.5674 2.20596 15.5752 2.41091 15.4516 2.53577L12.7468 5.26931C12.6416 5.37558 12.4757 5.38719 12.3521 5.30353C11.5393 4.75345 10.571 4.42281 9.52066 4.42281C8.47036 4.42281 7.50203 4.75346 6.68926 5.30356ZM16.4926 3.4303C16.6163 3.30527 16.8197 3.31303 16.9288 3.45121C18.2224 5.08933 19.0001 7.15932 19.0001 9.4116C19.0001 11.6671 18.2204 13.7392 16.9238 15.3785C16.8147 15.5165 16.6114 15.5242 16.4877 15.3992L13.7872 12.6701C13.682 12.5638 13.6708 12.3962 13.7538 12.2716C14.3006 11.451 14.6291 10.4727 14.6291 9.4116C14.6291 8.35454 14.3016 7.37925 13.756 6.56083C13.6728 6.43616 13.6841 6.26857 13.7893 6.16224L16.4926 3.4303ZM5.21676 12.6712C5.322 12.5649 5.3333 12.3974 5.2502 12.2727C4.70331 11.4522 4.374 10.4737 4.374 9.41184C4.374 8.35469 4.70232 7.37949 5.24808 6.56106C5.33123 6.43637 5.31996 6.26872 5.2147 6.16241L2.50855 3.4293C2.38482 3.30434 2.18146 3.31213 2.07236 3.45028C0.77864 5.08841 0 7.15845 0 9.41184C0 11.6684 0.78066 13.7406 2.07831 15.3799C2.18749 15.5178 2.39066 15.5255 2.51429 15.4006L5.21676 12.6712ZM12.3323 13.707C12.4559 13.6231 12.6221 13.6346 12.7273 13.741L15.4277 16.4691C15.5513 16.594 15.5435 16.7991 15.4068 16.9091C13.7837 18.215 11.7327 19 9.49998 19C7.2693 19 5.21837 18.2159 3.59619 16.9102C3.45943 16.8001 3.45169 16.595 3.57533 16.4702L6.27769 13.7409C6.38296 13.6346 6.54906 13.6231 6.67267 13.707C7.48459 14.2577 8.45278 14.5883 9.50198 14.5883C10.5522 14.5883 11.5204 14.2578 12.3323 13.707Z'
15
- fill={color}
16
- />
17
- </Svg>
18
- )
19
-
20
- export const CapturingIcon: React.FC<IconProps> = ({ size = 24, color = 'white' }) => (
21
- <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
22
- <Circle cx='12' cy='12' r='4' fill={color} />
23
- <Circle cx='12' cy='12' r='7.5' stroke={color} strokeWidth='1' />
24
- <Circle cx='12' cy='12' r='11.5' stroke={color} strokeWidth='1' opacity='0.2' />
25
- </Svg>
26
- )
27
-
28
- export const PausedIcon: React.FC<IconProps> = ({ size = 24, color = 'white' }) => (
29
- <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
30
- <Path d='M8 5V19M16 5V19' stroke={color} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' />
31
- </Svg>
32
- )
33
-
34
- export const CheckmarkIcon: React.FC<IconProps> = ({ size = 24, color = 'white' }) => (
35
- <Svg width={size} height={size} viewBox='0 0 24 24' fill='none'>
36
- <Path
37
- fillRule='evenodd'
38
- clipRule='evenodd'
39
- d='M20.0481 6.35147C20.5168 6.8201 20.5168 7.5799 20.0481 8.04853L10.4481 17.6485C9.97951 18.1172 9.21971 18.1172 8.75108 17.6485L3.95108 12.8485C3.48245 12.3799 3.48245 11.6201 3.95108 11.1515C4.41971 10.6828 5.17951 10.6828 5.64814 11.1515L9.59961 15.1029L18.3511 6.35147C18.8197 5.88284 19.5795 5.88284 20.0481 6.35147Z'
40
- fill={color}
41
- />
42
- </Svg>
43
- )
44
-
45
- export const LogoIcon: React.FC<IconProps> = ({ size = 30, color = '#473CFB' }) => (
46
- <Svg width={size} height={size * 0.8} viewBox='0 0 30 24' fill='none'>
47
- <Path
48
- d='M28.8324 8.83643L23.5495 6.85854L21.4856 6.08553L23.6001 0.4375L15 3.65769L6.39963 0.4375L8.51441 6.08585L6.45046 6.85885L1.16757 8.83674L0.625 9.03974L9.10095 12.0981C10.0891 12.4548 10.9201 13.1265 11.4758 13.9952C11.6632 14.2883 11.8194 14.6036 11.9398 14.9369L15 23.4076L18.0602 14.9369C18.1806 14.6036 18.3368 14.288 18.5242 13.9952C19.0802 13.1265 19.9112 12.4545 20.8991 12.0981L29.375 9.03974L28.8324 8.83674V8.83643ZM19.779 10.6434C18.2872 11.1816 17.1126 12.3563 16.5744 13.848L15.014 18.173L11.5182 8.83643L10.7776 6.85854L10.2456 5.43757L9.57367 3.64272L12.3068 4.66612L18.1631 6.85885L20.8233 7.85481L23.4457 8.83674L24.104 9.08308L19.779 10.6438V10.6434Z'
49
- fill={color}
50
- />
51
- </Svg>
52
- )
@@ -1,3 +0,0 @@
1
- import SessionRecorderWidget from "./SessionRecorderWidget";
2
-
3
- export default SessionRecorderWidget;
@@ -1,150 +0,0 @@
1
- import { StyleSheet } from 'react-native'
2
-
3
- export const sharedStyles = StyleSheet.create({
4
- // Popover styles
5
- popoverContent: {
6
- flex: 1,
7
- paddingHorizontal: 0
8
- },
9
- popoverHeader: {
10
- flexDirection: 'column',
11
- paddingBottom: 8,
12
- paddingHorizontal: 16,
13
- borderTopLeftRadius: 20,
14
- borderTopRightRadius: 20,
15
- backgroundColor: '#e3ecfd',
16
- shadowColor: '#e3ecfd',
17
- shadowOffset: { width: 0, height: 10, },
18
- shadowOpacity: 1,
19
- shadowRadius: 5,
20
- elevation: 3,
21
- },
22
- modalHandle: {
23
- marginTop: 8,
24
- marginBottom: 16,
25
- width: 40,
26
- height: 4,
27
- backgroundColor: '#D1D5DB',
28
- borderRadius: 2,
29
- alignSelf: 'center',
30
- },
31
- popoverHeaderContent: {
32
- flexDirection: 'row',
33
- justifyContent: 'space-between',
34
- alignItems: 'flex-start',
35
- },
36
-
37
-
38
- cancelButton: {
39
- paddingHorizontal: 12,
40
- paddingVertical: 6,
41
- borderRadius: 6,
42
- backgroundColor: '#F3F4F6'
43
- },
44
- cancelButtonText: {
45
- color: '#374151',
46
- fontSize: 14,
47
- fontWeight: '500'
48
- },
49
- popoverBody: {
50
- flex: 1,
51
- padding: 16,
52
- paddingTop: 32,
53
- },
54
- title: {
55
- fontSize: 18,
56
- fontWeight: '600',
57
- color: '#2d3748',
58
- marginBottom: 12
59
- },
60
- description: {
61
- fontSize: 14,
62
- color: '#718096',
63
- marginBottom: 24
64
- },
65
- popoverFooter: {
66
- marginTop: 'auto',
67
- paddingTop: 48
68
- },
69
- actionButton: {
70
- paddingVertical: 16,
71
- paddingHorizontal: 24,
72
- borderRadius: 12,
73
- alignItems: 'center'
74
- },
75
- actionButtonText: {
76
- color: 'white',
77
- fontSize: 16,
78
- fontWeight: '500'
79
- },
80
-
81
- // Continuous recording styles
82
- continuousRecordingSection: {
83
- flexDirection: 'row',
84
- justifyContent: 'space-between',
85
- alignItems: 'center',
86
- marginBottom: 20,
87
- paddingVertical: 12,
88
- paddingHorizontal: 16,
89
- borderWidth: 1,
90
- borderColor: '#e1e8f1',
91
- backgroundColor: '#fff',
92
- borderRadius: 12,
93
- shadowColor: '#000',
94
- shadowOffset: { width: 0, height: 2 },
95
- shadowOpacity: 0.06,
96
- shadowRadius: 3,
97
- elevation: 3,
98
- },
99
- continuousRecordingLabel: {
100
- fontSize: 16,
101
- fontWeight: '500',
102
- color: '#374151'
103
- },
104
- continuousOverlay: {
105
- marginTop: 20,
106
- padding: 16,
107
- backgroundColor: '#FEF3C7',
108
- borderRadius: 8,
109
- borderWidth: 1,
110
- borderColor: '#F59E0B'
111
- },
112
- continuousOverlayContent: {
113
- marginBottom: 16
114
- },
115
- continuousOverlayTitle: {
116
- fontSize: 18,
117
- fontWeight: 'bold',
118
- color: '#92400E',
119
- marginBottom: 8
120
- },
121
- continuousOverlayDescription: {
122
- fontSize: 14,
123
- color: '#92400E',
124
- lineHeight: 20
125
- },
126
-
127
- // Comment input styles
128
- commentInput: {
129
- borderWidth: 1,
130
- borderColor: '#D1D5DB',
131
- borderRadius: 8,
132
- padding: 12,
133
- fontSize: 16,
134
- color: '#374151',
135
- backgroundColor: '#F9FAFB',
136
- marginBottom: 24,
137
- minHeight: 80
138
- },
139
-
140
- // Button color variants
141
- startButton: {
142
- backgroundColor: '#473cfb'
143
- },
144
- stopButton: {
145
- backgroundColor: '#473cfb'
146
- },
147
- saveButton: {
148
- backgroundColor: '#473cfb'
149
- }
150
- })
@@ -1,3 +0,0 @@
1
- export * from './GestureCaptureWrapper'
2
- export * from './ScreenRecorderView'
3
- export * from './SessionRecorderWidget'
@@ -1,60 +0,0 @@
1
-
2
- export const OTEL_MP_SAMPLE_TRACE_RATIO = 0.15
3
-
4
- export const SESSION_ID_PROP_NAME = 'multiplayer-session-id'
5
-
6
- export const SESSION_SHORT_ID_PROP_NAME = 'multiplayer-session-short-id'
7
-
8
- export const SESSION_CONTINUOUS_DEBUGGING_PROP_NAME = 'multiplayer-session-continuous-debugging'
9
-
10
- export const SESSION_STATE_PROP_NAME = 'multiplayer-session-state'
11
-
12
- export const SESSION_TYPE_PROP_NAME = 'multiplayer-session-type'
13
-
14
- export const SESSION_PROP_NAME = 'multiplayer-session-data'
15
-
16
- export const SESSION_STARTED_EVENT = 'debug-session:started'
17
-
18
- export const SESSION_STOPPED_EVENT = 'debug-session:stopped'
19
-
20
- export const SESSION_SUBSCRIBE_EVENT = 'debug-session:subscribe'
21
-
22
- export const SESSION_UNSUBSCRIBE_EVENT = 'debug-session:unsubscribe'
23
-
24
- export const SESSION_AUTO_CREATED = 'debug-session:auto-created'
25
-
26
- export const SESSION_ADD_EVENT = 'debug-session:rrweb:add-event'
27
-
28
- export const DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE = 100000
29
-
30
- export const SESSION_RESPONSE = 'multiplayer-debug-session-response'
31
-
32
- export const CONTINUOUS_DEBUGGING_TIMEOUT = 60000 // 1 minutes
33
-
34
- export const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30 // TODO: move to shared config otel core
35
-
36
- // // Package version - injected by webpack during build
37
- // declare const PACKAGE_VERSION: string
38
- // export const PACKAGE_VERSION_EXPORT = PACKAGE_VERSION || '1.0.0'
39
-
40
-
41
- // Regex patterns for OpenTelemetry ignore URLs
42
- export const OTEL_IGNORE_URLS = [
43
- // Traces endpoint
44
- /.*\/v1\/traces/,
45
- // Debug sessions endpoints
46
- /.*\/v0\/radar\/debug-sessions\/start$/,
47
- /.*\/v0\/radar\/debug-sessions\/[^/]+\/stop$/,
48
- /.*\/v0\/radar\/debug-sessions\/[^/]+\/cancel$/,
49
-
50
- // Continuous debug sessions endpoints
51
- /.*\/v0\/radar\/continuous-debug-sessions\/start$/,
52
- /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/save$/,
53
- /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/cancel$/,
54
-
55
- // Remote debug session endpoint
56
- /.*\/v0\/radar\/remote-debug-session\/check$/,
57
-
58
- // Or use a more general pattern to catch all radar API endpoints
59
- // /.*\/v0\/radar\/.*/
60
- ]
@@ -1,83 +0,0 @@
1
- import {
2
- SessionRecorderSdk,
3
- MULTIPLAYER_BASE_API_URL,
4
- MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
5
- } from '@multiplayer-app/session-recorder-common'
6
- import {
7
- MaskingConfig,
8
- SessionRecorderConfigs,
9
- WidgetButtonPlacement,
10
- WidgetTextOverridesConfig,
11
- } from '../types'
12
- import {
13
- OTEL_MP_SAMPLE_TRACE_RATIO,
14
- DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
15
- } from './constants'
16
- const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
17
-
18
- export const DEFAULT_MASKING_CONFIG: MaskingConfig = {
19
- isContentMaskingEnabled: true,
20
- maskBody: mask(sensitiveFields),
21
- maskHeaders: mask(sensitiveHeaders),
22
- maskBodyFieldsList: sensitiveFields,
23
- maskHeadersList: sensitiveHeaders,
24
- headersToInclude: [],
25
- headersToExclude: [],
26
- inputMasking: true,
27
- }
28
-
29
- export const DEFAULT_WIDGET_TEXT_CONFIG: WidgetTextOverridesConfig = {
30
- initialTitleWithContinuous: 'Encountered an issue?',
31
- initialTitleWithoutContinuous: 'Encountered an issue?',
32
- initialDescriptionWithContinuous: 'Record your session so we can see the problem and fix it faster.',
33
- initialDescriptionWithoutContinuous: 'Record your session so we can see the problem and fix it faster.',
34
- continuousRecordingLabel: 'Continuous recording',
35
- startRecordingButtonText: 'Start recording',
36
- finalTitle: 'Done recording?',
37
- finalDescription: 'You can also add a quick note with extra context, expectations, or questions. Thank you!',
38
- commentPlaceholder: 'Add a message...',
39
- saveButtonText: 'Submit recording',
40
- cancelButtonText: 'Cancel recording',
41
- continuousOverlayTitle: 'Save time, skip the reproductions',
42
- continuousOverlayDescription: 'We keep a rolling record of your recent activity. If something doesn’t work as expected, just save the recording and continue working. No need to worry about exceptions and errors - we automatically save recordings for those!',
43
- saveLastSnapshotButtonText: 'Save recording',
44
- submitDialogTitle: 'Save recording',
45
- submitDialogSubtitle: 'This full-stack session recording will be saved directly to your selected Multiplayer project. All data is automatically correlated end-to-end.',
46
- submitDialogCommentLabel: 'You can also add context, comments, or notes.',
47
- submitDialogCommentPlaceholder: 'Add a message...',
48
- submitDialogSubmitText: 'Save',
49
- submitDialogCancelText: 'Cancel',
50
- }
51
-
52
- export const BASE_CONFIG: Required<SessionRecorderConfigs> = {
53
- apiKey: '',
54
-
55
- version: '',
56
- application: '',
57
- environment: '',
58
-
59
- showWidget: true,
60
- showContinuousRecording: true,
61
- widgetButtonPlacement: WidgetButtonPlacement.bottomRight,
62
-
63
- usePostMessageFallback: false,
64
- apiBaseUrl: MULTIPLAYER_BASE_API_URL,
65
- exporterEndpoint: MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
66
-
67
- schemifyDocSpanPayload: true,
68
-
69
- ignoreUrls: [],
70
- propagateTraceHeaderCorsUrls: [],
71
-
72
- sampleTraceRatio: OTEL_MP_SAMPLE_TRACE_RATIO,
73
- maxCapturingHttpPayloadSize: DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
74
-
75
- captureBody: true,
76
- captureHeaders: true,
77
- masking: DEFAULT_MASKING_CONFIG,
78
- widgetTextOverrides: DEFAULT_WIDGET_TEXT_CONFIG,
79
-
80
- recordScreen: true,
81
- recordGestures: true,
82
- recordNavigation: true,
83
- }
@@ -1,6 +0,0 @@
1
- // Export all config-related functions and constants
2
- export * from './constants'
3
- export * from './defaults'
4
- export * from './validators'
5
- export * from './masking'
6
- export * from './session-recorder'
@@ -1,28 +0,0 @@
1
- import { MaskingConfig } from '../types'
2
- import { DEFAULT_MASKING_CONFIG } from './defaults'
3
- import { isValidArray, isValidBoolean, isValidFunction } from './validators'
4
- import { SessionRecorderSdk } from '@multiplayer-app/session-recorder-common'
5
-
6
- const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
7
-
8
- export const getMaskingConfig = (masking?: MaskingConfig): MaskingConfig => {
9
- const baseMasking = DEFAULT_MASKING_CONFIG
10
-
11
- if (typeof masking !== 'object') {
12
- return baseMasking
13
- }
14
-
15
- const maskHeadersList = isValidArray(masking.maskHeadersList, sensitiveHeaders)
16
- const maskBodyFieldsList = isValidArray(masking.maskBodyFieldsList, sensitiveFields)
17
-
18
- return {
19
- maskHeadersList,
20
- maskBodyFieldsList,
21
- headersToInclude: isValidArray(masking.headersToInclude, baseMasking.headersToInclude ?? []),
22
- headersToExclude: isValidArray(masking.headersToExclude, baseMasking.headersToExclude ?? []),
23
- isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
24
- maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
25
- maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
26
- inputMasking: isValidBoolean(masking.inputMasking, baseMasking.inputMasking ?? true),
27
- }
28
- }