@multiplayer-app/session-recorder-browser 1.2.31 → 1.2.33
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 +3 -81
- package/dist/browser/index.js +91 -17
- package/dist/browser/index.js.map +1 -1
- package/dist/exporters/index.js +1 -1
- package/dist/index.js +91 -17
- package/dist/index.js.map +1 -1
- package/dist/index.umd.js +91 -17
- package/dist/index.umd.js.map +1 -1
- package/dist/sessionWidget/index.d.ts +1 -0
- package/dist/sessionWidget/index.d.ts.map +1 -1
- package/dist/sessionWidget/index.js +90 -16
- package/dist/sessionWidget/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.umd.js
CHANGED
|
@@ -24317,7 +24317,7 @@ const DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE = 100000;
|
|
|
24317
24317
|
const SESSION_RESPONSE = 'multiplayer-debug-session-response';
|
|
24318
24318
|
const CONTINUOUS_DEBUGGING_TIMEOUT = 60000; // 1 minutes
|
|
24319
24319
|
const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30; // TODO: move to shared config otel core
|
|
24320
|
-
const PACKAGE_VERSION_EXPORT = "1.2.
|
|
24320
|
+
const PACKAGE_VERSION_EXPORT = "1.2.33" || 0;
|
|
24321
24321
|
// Regex patterns for OpenTelemetry ignore URLs
|
|
24322
24322
|
const OTEL_IGNORE_URLS = [
|
|
24323
24323
|
// Traces endpoint
|
|
@@ -27430,29 +27430,36 @@ class DragManager {
|
|
|
27430
27430
|
|
|
27431
27431
|
class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observable {
|
|
27432
27432
|
set buttonState(newState) {
|
|
27433
|
+
var _a, _b;
|
|
27433
27434
|
this._buttonState = newState;
|
|
27435
|
+
if (!this.isBrowser)
|
|
27436
|
+
return;
|
|
27434
27437
|
const { icon, tooltip, classes, excludeClasses } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.buttonStates[newState];
|
|
27435
27438
|
if (newState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CANCEL) {
|
|
27436
|
-
this.buttonDraggabilityObserver.observe(this.recorderButton, {
|
|
27439
|
+
(_a = this.buttonDraggabilityObserver) === null || _a === void 0 ? void 0 : _a.observe(this.recorderButton, {
|
|
27437
27440
|
attributes: true,
|
|
27438
27441
|
attributeOldValue: true,
|
|
27439
27442
|
attributeFilter: ['class'],
|
|
27440
27443
|
});
|
|
27441
27444
|
}
|
|
27442
27445
|
else {
|
|
27443
|
-
this.buttonDraggabilityObserver.disconnect();
|
|
27446
|
+
(_b = this.buttonDraggabilityObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
27444
27447
|
}
|
|
27445
27448
|
this.updateButton(icon, tooltip, excludeClasses, classes);
|
|
27446
27449
|
}
|
|
27447
27450
|
set initialPopoverVisible(v) {
|
|
27448
27451
|
var _a;
|
|
27449
27452
|
this._initialPopoverVisible = v;
|
|
27450
|
-
(
|
|
27453
|
+
if (this.isBrowser) {
|
|
27454
|
+
(_a = this.initialPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
|
|
27455
|
+
}
|
|
27451
27456
|
}
|
|
27452
27457
|
set finalPopoverVisible(v) {
|
|
27453
27458
|
var _a;
|
|
27454
27459
|
this._finalPopoverVisible = v;
|
|
27455
|
-
(
|
|
27460
|
+
if (this.isBrowser) {
|
|
27461
|
+
(_a = this.finalPopover) === null || _a === void 0 ? void 0 : _a.classList.toggle('hidden', !v);
|
|
27462
|
+
}
|
|
27456
27463
|
}
|
|
27457
27464
|
get error() {
|
|
27458
27465
|
return this._error;
|
|
@@ -27471,6 +27478,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27471
27478
|
}
|
|
27472
27479
|
set isStarted(v) {
|
|
27473
27480
|
this._isStarted = v;
|
|
27481
|
+
if (!this.isBrowser)
|
|
27482
|
+
return;
|
|
27474
27483
|
if (!this.showRecorderButton && v && !this._continuousRecording) {
|
|
27475
27484
|
this.overlay.classList.remove('hidden');
|
|
27476
27485
|
this.makeOverlayDraggable();
|
|
@@ -27498,6 +27507,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27498
27507
|
}
|
|
27499
27508
|
set isPaused(v) {
|
|
27500
27509
|
this._isPaused = v;
|
|
27510
|
+
if (!this.isBrowser)
|
|
27511
|
+
return;
|
|
27501
27512
|
if (this._isInitialized && !this.showRecorderButton && v && !this._continuousRecording) {
|
|
27502
27513
|
this.overlay.classList.add('hidden');
|
|
27503
27514
|
this.submitSessionDialog.classList.remove('hidden');
|
|
@@ -27541,6 +27552,18 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27541
27552
|
}
|
|
27542
27553
|
}
|
|
27543
27554
|
};
|
|
27555
|
+
this.isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
|
|
27556
|
+
if (!this.isBrowser) {
|
|
27557
|
+
// Create dummy elements for SSR to prevent crashes
|
|
27558
|
+
this.recorderButton = {};
|
|
27559
|
+
this.initialPopover = {};
|
|
27560
|
+
this.finalPopover = {};
|
|
27561
|
+
this.overlay = {};
|
|
27562
|
+
this.toast = {};
|
|
27563
|
+
this.submitSessionDialog = {};
|
|
27564
|
+
this.uiManager = {};
|
|
27565
|
+
return;
|
|
27566
|
+
}
|
|
27544
27567
|
this.recorderButton = document.createElement('button');
|
|
27545
27568
|
this.initialPopover = document.createElement('div');
|
|
27546
27569
|
this.finalPopover = document.createElement('div');
|
|
@@ -27579,6 +27602,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27579
27602
|
}
|
|
27580
27603
|
}
|
|
27581
27604
|
updateContinuousRecordingState(checked, disabled = false) {
|
|
27605
|
+
if (!this.isBrowser)
|
|
27606
|
+
return;
|
|
27582
27607
|
const toggleCheckbox = this.initialPopover.querySelector('#mp-session-debugger-continuous-debugging-checkbox');
|
|
27583
27608
|
if (toggleCheckbox) {
|
|
27584
27609
|
toggleCheckbox.checked = checked;
|
|
@@ -27586,6 +27611,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27586
27611
|
}
|
|
27587
27612
|
}
|
|
27588
27613
|
updateSaveContinuousDebugSessionState(state) {
|
|
27614
|
+
if (!this.isBrowser)
|
|
27615
|
+
return;
|
|
27589
27616
|
const saveButton = this.initialPopover.querySelector('#mp-save-continuous-debug-session');
|
|
27590
27617
|
if (saveButton) {
|
|
27591
27618
|
const { textContent, disabled } = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.continuousRecordingSaveButtonStates[state];
|
|
@@ -27599,15 +27626,21 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27599
27626
|
* @param duration - Duration in milliseconds to show the toast (default: 10000ms)
|
|
27600
27627
|
*/
|
|
27601
27628
|
showToast(config, duration = 10000) {
|
|
27629
|
+
if (!this.isBrowser)
|
|
27630
|
+
return;
|
|
27602
27631
|
this.uiManager.showToast(config, duration);
|
|
27603
27632
|
}
|
|
27604
27633
|
/**
|
|
27605
27634
|
* Hides the currently displayed toast message
|
|
27606
27635
|
*/
|
|
27607
27636
|
hideToast() {
|
|
27637
|
+
if (!this.isBrowser)
|
|
27638
|
+
return;
|
|
27608
27639
|
this.uiManager.hideToast();
|
|
27609
27640
|
}
|
|
27610
27641
|
observeButtonDraggableMode() {
|
|
27642
|
+
if (!this.isBrowser)
|
|
27643
|
+
return;
|
|
27611
27644
|
this.buttonDraggabilityObserver = new MutationObserver((mutationsList) => {
|
|
27612
27645
|
for (const mutation of mutationsList) {
|
|
27613
27646
|
if (mutation.type === 'attributes' &&
|
|
@@ -27629,6 +27662,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27629
27662
|
init(options) {
|
|
27630
27663
|
if (this._isInitialized)
|
|
27631
27664
|
return;
|
|
27665
|
+
if (!this.isBrowser)
|
|
27666
|
+
return;
|
|
27632
27667
|
this._isInitialized = true;
|
|
27633
27668
|
this.showRecorderButton = options.showWidget;
|
|
27634
27669
|
this._showContinuousRecording = options.showContinuousRecording;
|
|
@@ -27668,6 +27703,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27668
27703
|
this.addEventListeners();
|
|
27669
27704
|
}
|
|
27670
27705
|
appendElements(elements) {
|
|
27706
|
+
if (!this.isBrowser || typeof document === 'undefined')
|
|
27707
|
+
return;
|
|
27671
27708
|
const rootWrapper = document.createElement('mp-root');
|
|
27672
27709
|
rootWrapper.classList.add('mp-root-wrapper');
|
|
27673
27710
|
rootWrapper.setAttribute('data-rr-ignore', 'true');
|
|
@@ -27675,6 +27712,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27675
27712
|
document.body.appendChild(rootWrapper);
|
|
27676
27713
|
}
|
|
27677
27714
|
addRecorderDragFunctionality() {
|
|
27715
|
+
if (!this.isBrowser)
|
|
27716
|
+
return;
|
|
27678
27717
|
this.dragManager = new _dragManager__WEBPACK_IMPORTED_MODULE_2__.DragManager(this.recorderButton, this._recorderPlacement, () => {
|
|
27679
27718
|
if (this._isPaused) {
|
|
27680
27719
|
this.finalPopoverVisible = true;
|
|
@@ -27683,6 +27722,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27683
27722
|
this.dragManager.init();
|
|
27684
27723
|
}
|
|
27685
27724
|
updatePopoverPosition() {
|
|
27725
|
+
if (!this.isBrowser || typeof window === 'undefined')
|
|
27726
|
+
return;
|
|
27686
27727
|
const { top, right, bottom, left } = this.recorderButton.getBoundingClientRect();
|
|
27687
27728
|
const isDraggable = !this.recorderButton.classList.contains('no-draggable');
|
|
27688
27729
|
const POPOVER_HEIGHT = this._isStarted ? 400 : 300;
|
|
@@ -27719,6 +27760,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27719
27760
|
});
|
|
27720
27761
|
}
|
|
27721
27762
|
addEventListeners() {
|
|
27763
|
+
if (!this.isBrowser)
|
|
27764
|
+
return;
|
|
27722
27765
|
const events = [];
|
|
27723
27766
|
if (this.showRecorderButton) {
|
|
27724
27767
|
events.push({
|
|
@@ -27776,14 +27819,20 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27776
27819
|
});
|
|
27777
27820
|
}
|
|
27778
27821
|
handleStopRecording() {
|
|
27822
|
+
if (!this.isBrowser)
|
|
27823
|
+
return;
|
|
27779
27824
|
this.onStop();
|
|
27780
27825
|
this.handleUIReseting();
|
|
27781
27826
|
}
|
|
27782
27827
|
handleUIReseting() {
|
|
27828
|
+
if (!this.isBrowser)
|
|
27829
|
+
return;
|
|
27783
27830
|
this.finalPopoverVisible = false;
|
|
27784
27831
|
this.resetRecordingButton();
|
|
27785
27832
|
}
|
|
27786
27833
|
handleCloseInitialPopover() {
|
|
27834
|
+
if (!this.isBrowser)
|
|
27835
|
+
return;
|
|
27787
27836
|
if (this._buttonState === _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.LOADING) {
|
|
27788
27837
|
this.onCancel();
|
|
27789
27838
|
this.uiManager.setPopoverLoadingState(false);
|
|
@@ -27792,18 +27841,26 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27792
27841
|
this.buttonState = this._continuousRecording
|
|
27793
27842
|
? _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CONTINUOUS_DEBUGGING
|
|
27794
27843
|
: _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
|
|
27795
|
-
document
|
|
27844
|
+
if (typeof document !== 'undefined') {
|
|
27845
|
+
document.removeEventListener('click', this.handleClickOutside);
|
|
27846
|
+
}
|
|
27796
27847
|
}
|
|
27797
27848
|
handleCloseFinalPopover() {
|
|
27798
27849
|
this.onResume();
|
|
27799
27850
|
}
|
|
27800
27851
|
onRequestError() {
|
|
27852
|
+
if (!this.isBrowser)
|
|
27853
|
+
return;
|
|
27801
27854
|
this.initialPopoverVisible = false;
|
|
27802
27855
|
this.finalPopoverVisible = false;
|
|
27803
27856
|
this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
|
|
27804
|
-
document
|
|
27857
|
+
if (typeof document !== 'undefined') {
|
|
27858
|
+
document.removeEventListener('click', this.handleClickOutside);
|
|
27859
|
+
}
|
|
27805
27860
|
}
|
|
27806
27861
|
handleDismissRecording() {
|
|
27862
|
+
if (!this.isBrowser)
|
|
27863
|
+
return;
|
|
27807
27864
|
this.onCancel();
|
|
27808
27865
|
this.finalPopoverVisible = !this._finalPopoverVisible;
|
|
27809
27866
|
this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.IDLE;
|
|
@@ -27822,6 +27879,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27822
27879
|
(_a = element === null || element === void 0 ? void 0 : element.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.addEventListener(event, handler);
|
|
27823
27880
|
}
|
|
27824
27881
|
onRecordingButtonClick(e) {
|
|
27882
|
+
if (!this.isBrowser)
|
|
27883
|
+
return;
|
|
27825
27884
|
if (this.buttonClickExternalHandler) {
|
|
27826
27885
|
const shouldPropagate = this.buttonClickExternalHandler();
|
|
27827
27886
|
if (shouldPropagate === false) {
|
|
@@ -27853,15 +27912,17 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27853
27912
|
: _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.CANCEL;
|
|
27854
27913
|
this.initialPopoverVisible = !this._initialPopoverVisible;
|
|
27855
27914
|
}
|
|
27856
|
-
if (
|
|
27857
|
-
|
|
27858
|
-
|
|
27859
|
-
|
|
27860
|
-
|
|
27915
|
+
if (typeof document !== 'undefined') {
|
|
27916
|
+
if (this._initialPopoverVisible || this._finalPopoverVisible) {
|
|
27917
|
+
document.addEventListener('click', this.handleClickOutside);
|
|
27918
|
+
}
|
|
27919
|
+
else {
|
|
27920
|
+
document.removeEventListener('click', this.handleClickOutside);
|
|
27921
|
+
}
|
|
27861
27922
|
}
|
|
27862
27923
|
}
|
|
27863
27924
|
updateButton(innerHTML, tooltip, excludeClasses, classes) {
|
|
27864
|
-
if (!this.recorderButton)
|
|
27925
|
+
if (!this.isBrowser || !this.recorderButton)
|
|
27865
27926
|
return;
|
|
27866
27927
|
(0,_utils__WEBPACK_IMPORTED_MODULE_0__.insertTrustedHTML)(this.recorderButton, `${innerHTML}`);
|
|
27867
27928
|
this.recorderButton.dataset['tooltip'] = tooltip;
|
|
@@ -27892,6 +27953,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27892
27953
|
this.emit('toggle', [true]);
|
|
27893
27954
|
}
|
|
27894
27955
|
onStop() {
|
|
27956
|
+
if (!this.isBrowser)
|
|
27957
|
+
return;
|
|
27895
27958
|
if (this.showRecorderButton && !this.recorderButton)
|
|
27896
27959
|
return;
|
|
27897
27960
|
this.submitSessionDialog.classList.add('hidden');
|
|
@@ -27909,6 +27972,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27909
27972
|
this.emit('pause', []);
|
|
27910
27973
|
}
|
|
27911
27974
|
onResume() {
|
|
27975
|
+
if (!this.isBrowser)
|
|
27976
|
+
return;
|
|
27912
27977
|
this.finalPopoverVisible = false;
|
|
27913
27978
|
if (!this._continuousRecording) {
|
|
27914
27979
|
this.buttonState = _buttonStateConfigs__WEBPACK_IMPORTED_MODULE_6__.ButtonState.RECORDING;
|
|
@@ -27919,28 +27984,35 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27919
27984
|
}
|
|
27920
27985
|
}
|
|
27921
27986
|
onCancel() {
|
|
27987
|
+
if (!this.isBrowser)
|
|
27988
|
+
return;
|
|
27922
27989
|
this.submitSessionDialog.classList.add('hidden');
|
|
27923
27990
|
this.emit('cancel', []);
|
|
27924
27991
|
}
|
|
27925
27992
|
enable() {
|
|
27926
|
-
if (!this.recorderButton)
|
|
27993
|
+
if (!this.isBrowser || !this.recorderButton)
|
|
27927
27994
|
return;
|
|
27928
27995
|
this.recorderButton.disabled = false;
|
|
27929
27996
|
this.recorderButton.style.opacity = '1';
|
|
27930
27997
|
}
|
|
27931
27998
|
disable() {
|
|
27932
|
-
if (!this.recorderButton)
|
|
27999
|
+
if (!this.isBrowser || !this.recorderButton)
|
|
27933
28000
|
return;
|
|
27934
28001
|
this.recorderButton.disabled = true;
|
|
27935
28002
|
this.recorderButton.style.opacity = '0.5';
|
|
27936
28003
|
}
|
|
27937
28004
|
destroy() {
|
|
27938
|
-
if (!this.recorderButton)
|
|
28005
|
+
if (!this.isBrowser || !this.recorderButton || typeof document === 'undefined')
|
|
27939
28006
|
return;
|
|
27940
|
-
document.
|
|
28007
|
+
const rootWrapper = document.querySelector('.mp-root-wrapper');
|
|
28008
|
+
if (rootWrapper && rootWrapper.contains(this.recorderButton)) {
|
|
28009
|
+
document.body.removeChild(rootWrapper);
|
|
28010
|
+
}
|
|
27941
28011
|
document.removeEventListener('click', this.handleClickOutside);
|
|
27942
28012
|
}
|
|
27943
28013
|
startTimer() {
|
|
28014
|
+
if (!this.isBrowser)
|
|
28015
|
+
return;
|
|
27944
28016
|
if (this.timerInterval) {
|
|
27945
28017
|
clearInterval(this.timerInterval);
|
|
27946
28018
|
this.timerInterval = null;
|
|
@@ -27959,6 +28031,8 @@ class SessionWidget extends lib0_observable__WEBPACK_IMPORTED_MODULE_7__.Observa
|
|
|
27959
28031
|
}
|
|
27960
28032
|
}
|
|
27961
28033
|
makeOverlayDraggable() {
|
|
28034
|
+
if (!this.isBrowser || typeof document === 'undefined')
|
|
28035
|
+
return;
|
|
27962
28036
|
const element = this.overlay;
|
|
27963
28037
|
const dragHandle = element.querySelector('.mp-drag-handle');
|
|
27964
28038
|
if (!dragHandle)
|