core-outline 1.1.17 → 1.1.18

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 (6) hide show
  1. package/.babelrc +3 -6
  2. package/dist/index.es.js +96 -81
  3. package/dist/index.js +96 -81
  4. package/package.json +1 -1
  5. package/src/components/CoreOutline/CoreOutline.js +152 -95
  6. package/src/components/CoreOutline/socket.js +1 -1
package/.babelrc CHANGED
@@ -1,6 +1,3 @@
1
- {
2
- "presets": [
3
- "@babel/preset-env",
4
- "@babel/preset-react"
5
- ]
6
- }
1
+ {
2
+ "presets": ["@babel/preset-env", "@babel/preset-react"]
3
+ }
package/dist/index.es.js CHANGED
@@ -6347,7 +6347,7 @@ Object.assign(lookup, {
6347
6347
  connect: lookup,
6348
6348
  });
6349
6349
 
6350
- var socket = lookup('http://localhost:8000');
6350
+ var socket = lookup('http://streams.coreoutline.com');
6351
6351
 
6352
6352
  var CoreOutline = function CoreOutline(_ref) {
6353
6353
  var children = _ref.children,
@@ -6377,7 +6377,7 @@ var CoreOutline = function CoreOutline(_ref) {
6377
6377
  _useState10 = _slicedToArray(_useState9, 2),
6378
6378
  browser = _useState10[0];
6379
6379
  _useState10[1];
6380
- var _useState11 = useState(""),
6380
+ var _useState11 = useState(''),
6381
6381
  _useState12 = _slicedToArray(_useState11, 2);
6382
6382
  _useState12[0];
6383
6383
  var setAppToken = _useState12[1];
@@ -6395,22 +6395,22 @@ var CoreOutline = function CoreOutline(_ref) {
6395
6395
  while (1) switch (_context2.prev = _context2.next) {
6396
6396
  case 0:
6397
6397
  requestOptions = {
6398
- method: "POST",
6398
+ method: 'POST',
6399
6399
  headers: {
6400
- "Content-Type": "application/json"
6400
+ 'Content-Type': 'application/json'
6401
6401
  },
6402
6402
  body: JSON.stringify({
6403
6403
  data_source_id: data_source_id,
6404
6404
  data_source_secret: data_source_secret
6405
6405
  })
6406
6406
  };
6407
- response = fetch("http://localhost:4000/data-source/authorize", requestOptions).then(function (response) {
6407
+ response = fetch("http://api.coreoutline.com/data-source/authorize", requestOptions).then(function (response) {
6408
6408
  return response.json();
6409
6409
  }).then(function (data) {
6410
6410
  setAppToken(data.app_token);
6411
6411
  return data;
6412
6412
  })["catch"](function (error) {
6413
- console.error("Error:", error);
6413
+ console.error('Error:', error);
6414
6414
  return error;
6415
6415
  });
6416
6416
  return _context2.abrupt("return", response);
@@ -6423,26 +6423,28 @@ var CoreOutline = function CoreOutline(_ref) {
6423
6423
  return _authorizeApp.apply(this, arguments);
6424
6424
  }
6425
6425
  var offLoadFunctionality = function offLoadFunctionality() {
6426
+ var formattedEvents = events && events.length > 0 ? events : JSON.parse(localStorage.getItem('coreoutlineFormattedEvents') || '[]');
6427
+ var rawEvents = replayEvents && replayEvents.length > 0 ? replayEvents : JSON.parse(localStorage.getItem('coreoutlineRawEvents') || '[]');
6426
6428
  var data = JSON.stringify({
6427
6429
  data_source_id: data_source_id,
6428
6430
  sessionId: sessionId,
6429
- formatted_events: JSON.stringify(events),
6430
- raw_events: JSON.stringify(replayEvents)
6431
+ formatted_events: formattedEvents,
6432
+ raw_events: rawEvents
6431
6433
  });
6432
6434
  socket.send({
6433
- topic: "session-data",
6435
+ topic: 'session-data',
6434
6436
  data_source_id: data_source_id,
6435
- session_id: localStorage.getItem("coreOutlineSessionId"),
6437
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6436
6438
  start_date: new Date().toLocaleString(),
6437
6439
  latitude: location.latitude,
6438
6440
  longitude: location.longitude,
6439
6441
  browser: browser,
6440
- event_id: "SESSION_END"
6442
+ event_id: 'SESSION_END'
6441
6443
  });
6442
6444
  if (navigator.sendBeacon) {
6443
- navigator.sendBeacon("http://localhost:5000/upload-events", data);
6445
+ navigator.sendBeacon("http://data.coreoutline.com/upload-events", data);
6444
6446
  } else {
6445
- fetch("http://localhost:5000/upload-events", {
6447
+ fetch("http://data.coreoutline.com/upload-events", {
6446
6448
  method: 'POST',
6447
6449
  body: data,
6448
6450
  keepalive: true,
@@ -6454,6 +6456,7 @@ var CoreOutline = function CoreOutline(_ref) {
6454
6456
  });
6455
6457
  }
6456
6458
  };
6459
+ useEffect(function () {}, [events, replayEvents]);
6457
6460
  useEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
6458
6461
  var handleBeforeUnload, handleVisibilityChange;
6459
6462
  return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -6472,32 +6475,32 @@ var CoreOutline = function CoreOutline(_ref) {
6472
6475
  _context.next = 6;
6473
6476
  return authorizeApp(data_source_id, data_source_secret);
6474
6477
  case 6:
6475
- localStorage.setItem("coreOutlineSessionId", sessionId);
6476
- localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
6477
- console.log("Session", sessionId);
6478
+ localStorage.setItem('coreOutlineSessionId', sessionId);
6479
+ localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
6480
+ console.log('Session', sessionId);
6478
6481
  socket.send({
6479
- topic: "session-data",
6482
+ topic: 'session-data',
6480
6483
  data_source_id: data_source_id,
6481
- session_id: localStorage.getItem("coreOutlineSessionId"),
6484
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6482
6485
  start_date: new Date().toLocaleString(),
6483
6486
  latitude: location.latitude,
6484
6487
  longitude: location.longitude,
6485
6488
  browser: browser,
6486
- event_id: "SESSION_START"
6489
+ event_id: 'SESSION_START'
6487
6490
  });
6488
6491
  return _context.abrupt("return", function () {
6489
6492
  offLoadFunctionality();
6490
6493
  window.removeEventListener('beforeunload', handleBeforeUnload);
6491
6494
  document.removeEventListener('visibilitychange', handleVisibilityChange);
6492
6495
  socket.send({
6493
- topic: "session-data",
6496
+ topic: 'session-data',
6494
6497
  data_source_id: data_source_id,
6495
- session_id: localStorage.getItem("coreOutlineSessionId"),
6498
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6496
6499
  start_date: new Date().toLocaleString(),
6497
6500
  latitude: location.latitude,
6498
6501
  longitude: location.longitude,
6499
6502
  browser: browser,
6500
- event_id: "SESSION_END"
6503
+ event_id: 'SESSION_END'
6501
6504
  });
6502
6505
  });
6503
6506
  case 11:
@@ -6534,21 +6537,24 @@ var CoreOutline = function CoreOutline(_ref) {
6534
6537
  setEvents(function (prevEvents) {
6535
6538
  return [].concat(_toConsumableArray(prevEvents), [navigationEvent]);
6536
6539
  });
6540
+ localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
6541
+ return [].concat(_toConsumableArray(prevEvents), [navigationEvent]);
6542
+ }));
6537
6543
  var handleNavigation = function handleNavigation() {
6538
6544
  setCurrentPage(window.location.href);
6539
6545
  socket.send({
6540
- topic: "session-data",
6546
+ topic: 'session-data',
6541
6547
  data_source_id: data_source_id,
6542
- session_id: localStorage.getItem("coreOutlineSessionId"),
6548
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6543
6549
  start_date: new Date().toLocaleString(),
6544
6550
  latitude: location.latitude,
6545
6551
  longitude: location.longitude,
6546
6552
  browser: browser,
6547
6553
  page_name: window.location.href,
6548
- event_id: "PAGE_NAVIGATION"
6554
+ event_id: 'PAGE_NAVIGATION'
6549
6555
  });
6550
6556
  };
6551
- window.addEventListener("popstate", handleNavigation);
6557
+ window.addEventListener('popstate', handleNavigation);
6552
6558
  var originalPushState = window.history.pushState;
6553
6559
  window.history.pushState = function () {
6554
6560
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6558,12 +6564,12 @@ var CoreOutline = function CoreOutline(_ref) {
6558
6564
  handleNavigation();
6559
6565
  };
6560
6566
  return function () {
6561
- window.removeEventListener("popstate", handleNavigation);
6567
+ window.removeEventListener('popstate', handleNavigation);
6562
6568
  window.history.pushState = originalPushState;
6563
6569
  };
6564
6570
  }, [currentPage]);
6565
6571
  useEffect(function () {
6566
- console.log("Location", location);
6572
+ console.log('Location', location);
6567
6573
  getLocation();
6568
6574
  }, []);
6569
6575
  useEffect(function () {
@@ -6574,6 +6580,9 @@ var CoreOutline = function CoreOutline(_ref) {
6574
6580
  setReplayEvents(function (prevEvents) {
6575
6581
  return [].concat(_toConsumableArray(prevEvents), [event]);
6576
6582
  });
6583
+ localStorage.setItem('coreoutlineRawEvents', JSON.stringify(function (prevEvents) {
6584
+ return [].concat(_toConsumableArray(replayEvents), [event]);
6585
+ }));
6577
6586
  },
6578
6587
  maskAllInputs: false,
6579
6588
  maskTextSelector: null
@@ -6592,7 +6601,7 @@ var CoreOutline = function CoreOutline(_ref) {
6592
6601
  if (!recorderActive.current) {
6593
6602
  stopFn = record({
6594
6603
  emit: function emit(event) {
6595
- console.log("Event:", event);
6604
+ console.log('Event:', event);
6596
6605
  if (event.type == 3 && event.data.type == 2) {
6597
6606
  return;
6598
6607
  }
@@ -6606,11 +6615,14 @@ var CoreOutline = function CoreOutline(_ref) {
6606
6615
  return;
6607
6616
  }
6608
6617
  if (event.type == 3 && event.data.type == 3) {
6609
- console.log("Contextmenu Event:", event);
6618
+ console.log('Contextmenu Event:', event);
6610
6619
  }
6611
6620
  setEvents(function (prevEvents) {
6612
6621
  return [].concat(_toConsumableArray(prevEvents), [event]);
6613
6622
  });
6623
+ localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
6624
+ return [].concat(_toConsumableArray(prevEvents), [event]);
6625
+ }));
6614
6626
  },
6615
6627
  maskAllInputs: false,
6616
6628
  maskTextSelector: null
@@ -6626,7 +6638,7 @@ var CoreOutline = function CoreOutline(_ref) {
6626
6638
  }, []);
6627
6639
  useEffect(function () {
6628
6640
  var handleClick = function handleClick(event) {
6629
- console.log("Inner text:", event.target.innerText);
6641
+ console.log('Inner text:', event.target.innerText);
6630
6642
  var clickEvent = {
6631
6643
  type: EventType.IncrementalSnapshot,
6632
6644
  data: {
@@ -6641,11 +6653,11 @@ var CoreOutline = function CoreOutline(_ref) {
6641
6653
  var clickedElement = document.elementFromPoint(clickEvent.data.x, clickEvent.data.y);
6642
6654
  if (clickedElement) {
6643
6655
  clickEvent.data.metadata = {
6644
- label: clickedElement.getAttribute("data-label") || clickedElement.innerText || null,
6645
- value: clickedElement.getAttribute("value") || clickedElement.innerText || null,
6646
- id: clickedElement.getAttribute("id") || clickedElement.innerText || null,
6647
- name: clickedElement.getAttribute("name") || clickedElement.innerText || null,
6648
- "class": clickedElement.getAttribute("class") || clickedElement.innerText || null,
6656
+ label: clickedElement.getAttribute('data-label') || clickedElement.innerText || null,
6657
+ value: clickedElement.getAttribute('value') || clickedElement.innerText || null,
6658
+ id: clickedElement.getAttribute('id') || clickedElement.innerText || null,
6659
+ name: clickedElement.getAttribute('name') || clickedElement.innerText || null,
6660
+ "class": clickedElement.getAttribute('class') || clickedElement.innerText || null,
6649
6661
  tag: clickedElement.tagName,
6650
6662
  html: String(clickedElement.getHTML()),
6651
6663
  innerText: event.target.innerText
@@ -6654,37 +6666,40 @@ var CoreOutline = function CoreOutline(_ref) {
6654
6666
  setEvents(function (prevEvents) {
6655
6667
  return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
6656
6668
  });
6669
+ localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
6670
+ return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
6671
+ }));
6657
6672
  socket.send({
6658
- topic: "session-data",
6673
+ topic: 'session-data',
6659
6674
  data_source_id: data_source_id,
6660
- session_id: localStorage.getItem("coreOutlineSessionId"),
6675
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6661
6676
  start_date: new Date().toLocaleString(),
6662
6677
  latitude: location.latitude,
6663
6678
  longitude: location.longitude,
6664
6679
  browser: browser,
6665
- event_id: "ITEM_CLICKED"
6680
+ event_id: 'ITEM_CLICKED'
6666
6681
  // item_clicked: event.target,
6667
6682
  });
6668
6683
  };
6669
- document.addEventListener("click", handleClick);
6684
+ document.addEventListener('click', handleClick);
6670
6685
  return function () {
6671
- document.removeEventListener("click", handleClick);
6686
+ document.removeEventListener('click', handleClick);
6672
6687
  };
6673
6688
  }, []);
6674
6689
  function saveEventsLocally() {
6675
- var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "formatted" ;
6676
- var blob = "";
6677
- if (type === "formatted") {
6690
+ var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'formatted' ;
6691
+ var blob = '';
6692
+ if (type === 'formatted') {
6678
6693
  blob = new Blob([JSON.stringify(events, null, 2)], {
6679
- type: "application/json"
6694
+ type: 'application/json'
6680
6695
  });
6681
- } else if (type === "raw") {
6696
+ } else if (type === 'raw') {
6682
6697
  blob = new Blob([JSON.stringify(replayEvents, null, 2)], {
6683
- type: "application/json"
6698
+ type: 'application/json'
6684
6699
  });
6685
6700
  }
6686
6701
  var url = URL.createObjectURL(blob);
6687
- var a = document.createElement("a");
6702
+ var a = document.createElement('a');
6688
6703
  a.href = url;
6689
6704
  a.download = "".concat(type, "_events.json");
6690
6705
  a.click();
@@ -6692,17 +6707,17 @@ var CoreOutline = function CoreOutline(_ref) {
6692
6707
  }
6693
6708
  function getBrowserInfo() {
6694
6709
  var userAgent = navigator.userAgent;
6695
- var browserName = "Unknown";
6696
- if (userAgent.indexOf("Firefox") > -1) {
6697
- browserName = "Firefox";
6698
- } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
6699
- browserName = "Opera";
6700
- } else if (userAgent.indexOf("Chrome") > -1) {
6701
- browserName = "Chrome";
6702
- } else if (userAgent.indexOf("Safari") > -1) {
6703
- browserName = "Safari";
6704
- } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
6705
- browserName = "Internet Explorer";
6710
+ var browserName = 'Unknown';
6711
+ if (userAgent.indexOf('Firefox') > -1) {
6712
+ browserName = 'Firefox';
6713
+ } else if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
6714
+ browserName = 'Opera';
6715
+ } else if (userAgent.indexOf('Chrome') > -1) {
6716
+ browserName = 'Chrome';
6717
+ } else if (userAgent.indexOf('Safari') > -1) {
6718
+ browserName = 'Safari';
6719
+ } else if (userAgent.indexOf('MSIE') > -1 || userAgent.indexOf('Trident/') > -1) {
6720
+ browserName = 'Internet Explorer';
6706
6721
  }
6707
6722
  return browserName;
6708
6723
  }
@@ -6714,53 +6729,53 @@ var CoreOutline = function CoreOutline(_ref) {
6714
6729
  longitude: position.coords.longitude
6715
6730
  });
6716
6731
  }, function (error) {
6717
- console.error("Error getting location:", error);
6732
+ console.error('Error getting location:', error);
6718
6733
  });
6719
6734
  } else {
6720
- console.error("Geolocation is not supported by this browser.");
6735
+ console.error('Geolocation is not supported by this browser.');
6721
6736
  }
6722
6737
  }
6723
6738
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
6724
6739
  onClick: function onClick() {
6725
- saveEventsLocally("formatted");
6726
- saveEventsLocally("raw");
6740
+ saveEventsLocally('formatted');
6741
+ saveEventsLocally('raw');
6727
6742
  }
6728
6743
  }, "Save Events Locally"), children);
6729
6744
  };
6730
6745
  var flag_item_clicked = function flag_item_clicked(item_id) {
6731
- var sessionId = localStorage.getItem("coreOutlineSessionId");
6732
- var dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
6733
- console.log("Session", sessionId);
6734
- console.log("Data Source", dataSourceId);
6746
+ var sessionId = localStorage.getItem('coreOutlineSessionId');
6747
+ var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
6748
+ console.log('Session', sessionId);
6749
+ console.log('Data Source', dataSourceId);
6735
6750
  socket.send({
6736
- topic: "session-data",
6751
+ topic: 'session-data',
6737
6752
  data_source_id: dataSourceId,
6738
- session_id: localStorage.getItem("coreOutlineSessionId"),
6753
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6739
6754
  start_date: new Date().toLocaleString(),
6740
- event_id: "PRODUCT_CLICKED",
6755
+ event_id: 'PRODUCT_CLICKED',
6741
6756
  item_clicked: item_id
6742
6757
  });
6743
6758
  return {
6744
- status: "success",
6745
- message: "Item click flagged successfully."
6759
+ status: 'success',
6760
+ message: 'Item click flagged successfully.'
6746
6761
  };
6747
6762
  };
6748
6763
  var flag_item_purchased = function flag_item_purchased(item_id) {
6749
- var sessionId = localStorage.getItem("coreOutlineSessionId");
6750
- var dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
6751
- console.log("Session", sessionId);
6752
- console.log("Data Source", dataSourceId);
6764
+ var sessionId = localStorage.getItem('coreOutlineSessionId');
6765
+ var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
6766
+ console.log('Session', sessionId);
6767
+ console.log('Data Source', dataSourceId);
6753
6768
  socket.send({
6754
- topic: "session-data",
6769
+ topic: 'session-data',
6755
6770
  data_source_id: dataSourceId,
6756
- session_id: localStorage.getItem("coreOutlineSessionId"),
6771
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6757
6772
  start_date: new Date().toLocaleString(),
6758
- event_id: "PRODUCT_PURCHASED",
6773
+ event_id: 'PRODUCT_PURCHASED',
6759
6774
  item_clicked: item_id
6760
6775
  });
6761
6776
  return {
6762
- status: "success",
6763
- message: "Item purchase flagged successfully."
6777
+ status: 'success',
6778
+ message: 'Item purchase flagged successfully.'
6764
6779
  };
6765
6780
  };
6766
6781
 
package/dist/index.js CHANGED
@@ -6355,7 +6355,7 @@ Object.assign(lookup, {
6355
6355
  connect: lookup,
6356
6356
  });
6357
6357
 
6358
- var socket = lookup('http://localhost:8000');
6358
+ var socket = lookup('http://streams.coreoutline.com');
6359
6359
 
6360
6360
  var CoreOutline = function CoreOutline(_ref) {
6361
6361
  var children = _ref.children,
@@ -6385,7 +6385,7 @@ var CoreOutline = function CoreOutline(_ref) {
6385
6385
  _useState10 = _slicedToArray(_useState9, 2),
6386
6386
  browser = _useState10[0];
6387
6387
  _useState10[1];
6388
- var _useState11 = React.useState(""),
6388
+ var _useState11 = React.useState(''),
6389
6389
  _useState12 = _slicedToArray(_useState11, 2);
6390
6390
  _useState12[0];
6391
6391
  var setAppToken = _useState12[1];
@@ -6403,22 +6403,22 @@ var CoreOutline = function CoreOutline(_ref) {
6403
6403
  while (1) switch (_context2.prev = _context2.next) {
6404
6404
  case 0:
6405
6405
  requestOptions = {
6406
- method: "POST",
6406
+ method: 'POST',
6407
6407
  headers: {
6408
- "Content-Type": "application/json"
6408
+ 'Content-Type': 'application/json'
6409
6409
  },
6410
6410
  body: JSON.stringify({
6411
6411
  data_source_id: data_source_id,
6412
6412
  data_source_secret: data_source_secret
6413
6413
  })
6414
6414
  };
6415
- response = fetch("http://localhost:4000/data-source/authorize", requestOptions).then(function (response) {
6415
+ response = fetch("http://api.coreoutline.com/data-source/authorize", requestOptions).then(function (response) {
6416
6416
  return response.json();
6417
6417
  }).then(function (data) {
6418
6418
  setAppToken(data.app_token);
6419
6419
  return data;
6420
6420
  })["catch"](function (error) {
6421
- console.error("Error:", error);
6421
+ console.error('Error:', error);
6422
6422
  return error;
6423
6423
  });
6424
6424
  return _context2.abrupt("return", response);
@@ -6431,26 +6431,28 @@ var CoreOutline = function CoreOutline(_ref) {
6431
6431
  return _authorizeApp.apply(this, arguments);
6432
6432
  }
6433
6433
  var offLoadFunctionality = function offLoadFunctionality() {
6434
+ var formattedEvents = events && events.length > 0 ? events : JSON.parse(localStorage.getItem('coreoutlineFormattedEvents') || '[]');
6435
+ var rawEvents = replayEvents && replayEvents.length > 0 ? replayEvents : JSON.parse(localStorage.getItem('coreoutlineRawEvents') || '[]');
6434
6436
  var data = JSON.stringify({
6435
6437
  data_source_id: data_source_id,
6436
6438
  sessionId: sessionId,
6437
- formatted_events: JSON.stringify(events),
6438
- raw_events: JSON.stringify(replayEvents)
6439
+ formatted_events: formattedEvents,
6440
+ raw_events: rawEvents
6439
6441
  });
6440
6442
  socket.send({
6441
- topic: "session-data",
6443
+ topic: 'session-data',
6442
6444
  data_source_id: data_source_id,
6443
- session_id: localStorage.getItem("coreOutlineSessionId"),
6445
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6444
6446
  start_date: new Date().toLocaleString(),
6445
6447
  latitude: location.latitude,
6446
6448
  longitude: location.longitude,
6447
6449
  browser: browser,
6448
- event_id: "SESSION_END"
6450
+ event_id: 'SESSION_END'
6449
6451
  });
6450
6452
  if (navigator.sendBeacon) {
6451
- navigator.sendBeacon("http://localhost:5000/upload-events", data);
6453
+ navigator.sendBeacon("http://data.coreoutline.com/upload-events", data);
6452
6454
  } else {
6453
- fetch("http://localhost:5000/upload-events", {
6455
+ fetch("http://data.coreoutline.com/upload-events", {
6454
6456
  method: 'POST',
6455
6457
  body: data,
6456
6458
  keepalive: true,
@@ -6462,6 +6464,7 @@ var CoreOutline = function CoreOutline(_ref) {
6462
6464
  });
6463
6465
  }
6464
6466
  };
6467
+ React.useEffect(function () {}, [events, replayEvents]);
6465
6468
  React.useEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
6466
6469
  var handleBeforeUnload, handleVisibilityChange;
6467
6470
  return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -6480,32 +6483,32 @@ var CoreOutline = function CoreOutline(_ref) {
6480
6483
  _context.next = 6;
6481
6484
  return authorizeApp(data_source_id, data_source_secret);
6482
6485
  case 6:
6483
- localStorage.setItem("coreOutlineSessionId", sessionId);
6484
- localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
6485
- console.log("Session", sessionId);
6486
+ localStorage.setItem('coreOutlineSessionId', sessionId);
6487
+ localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
6488
+ console.log('Session', sessionId);
6486
6489
  socket.send({
6487
- topic: "session-data",
6490
+ topic: 'session-data',
6488
6491
  data_source_id: data_source_id,
6489
- session_id: localStorage.getItem("coreOutlineSessionId"),
6492
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6490
6493
  start_date: new Date().toLocaleString(),
6491
6494
  latitude: location.latitude,
6492
6495
  longitude: location.longitude,
6493
6496
  browser: browser,
6494
- event_id: "SESSION_START"
6497
+ event_id: 'SESSION_START'
6495
6498
  });
6496
6499
  return _context.abrupt("return", function () {
6497
6500
  offLoadFunctionality();
6498
6501
  window.removeEventListener('beforeunload', handleBeforeUnload);
6499
6502
  document.removeEventListener('visibilitychange', handleVisibilityChange);
6500
6503
  socket.send({
6501
- topic: "session-data",
6504
+ topic: 'session-data',
6502
6505
  data_source_id: data_source_id,
6503
- session_id: localStorage.getItem("coreOutlineSessionId"),
6506
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6504
6507
  start_date: new Date().toLocaleString(),
6505
6508
  latitude: location.latitude,
6506
6509
  longitude: location.longitude,
6507
6510
  browser: browser,
6508
- event_id: "SESSION_END"
6511
+ event_id: 'SESSION_END'
6509
6512
  });
6510
6513
  });
6511
6514
  case 11:
@@ -6542,21 +6545,24 @@ var CoreOutline = function CoreOutline(_ref) {
6542
6545
  setEvents(function (prevEvents) {
6543
6546
  return [].concat(_toConsumableArray(prevEvents), [navigationEvent]);
6544
6547
  });
6548
+ localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
6549
+ return [].concat(_toConsumableArray(prevEvents), [navigationEvent]);
6550
+ }));
6545
6551
  var handleNavigation = function handleNavigation() {
6546
6552
  setCurrentPage(window.location.href);
6547
6553
  socket.send({
6548
- topic: "session-data",
6554
+ topic: 'session-data',
6549
6555
  data_source_id: data_source_id,
6550
- session_id: localStorage.getItem("coreOutlineSessionId"),
6556
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6551
6557
  start_date: new Date().toLocaleString(),
6552
6558
  latitude: location.latitude,
6553
6559
  longitude: location.longitude,
6554
6560
  browser: browser,
6555
6561
  page_name: window.location.href,
6556
- event_id: "PAGE_NAVIGATION"
6562
+ event_id: 'PAGE_NAVIGATION'
6557
6563
  });
6558
6564
  };
6559
- window.addEventListener("popstate", handleNavigation);
6565
+ window.addEventListener('popstate', handleNavigation);
6560
6566
  var originalPushState = window.history.pushState;
6561
6567
  window.history.pushState = function () {
6562
6568
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -6566,12 +6572,12 @@ var CoreOutline = function CoreOutline(_ref) {
6566
6572
  handleNavigation();
6567
6573
  };
6568
6574
  return function () {
6569
- window.removeEventListener("popstate", handleNavigation);
6575
+ window.removeEventListener('popstate', handleNavigation);
6570
6576
  window.history.pushState = originalPushState;
6571
6577
  };
6572
6578
  }, [currentPage]);
6573
6579
  React.useEffect(function () {
6574
- console.log("Location", location);
6580
+ console.log('Location', location);
6575
6581
  getLocation();
6576
6582
  }, []);
6577
6583
  React.useEffect(function () {
@@ -6582,6 +6588,9 @@ var CoreOutline = function CoreOutline(_ref) {
6582
6588
  setReplayEvents(function (prevEvents) {
6583
6589
  return [].concat(_toConsumableArray(prevEvents), [event]);
6584
6590
  });
6591
+ localStorage.setItem('coreoutlineRawEvents', JSON.stringify(function (prevEvents) {
6592
+ return [].concat(_toConsumableArray(replayEvents), [event]);
6593
+ }));
6585
6594
  },
6586
6595
  maskAllInputs: false,
6587
6596
  maskTextSelector: null
@@ -6600,7 +6609,7 @@ var CoreOutline = function CoreOutline(_ref) {
6600
6609
  if (!recorderActive.current) {
6601
6610
  stopFn = record({
6602
6611
  emit: function emit(event) {
6603
- console.log("Event:", event);
6612
+ console.log('Event:', event);
6604
6613
  if (event.type == 3 && event.data.type == 2) {
6605
6614
  return;
6606
6615
  }
@@ -6614,11 +6623,14 @@ var CoreOutline = function CoreOutline(_ref) {
6614
6623
  return;
6615
6624
  }
6616
6625
  if (event.type == 3 && event.data.type == 3) {
6617
- console.log("Contextmenu Event:", event);
6626
+ console.log('Contextmenu Event:', event);
6618
6627
  }
6619
6628
  setEvents(function (prevEvents) {
6620
6629
  return [].concat(_toConsumableArray(prevEvents), [event]);
6621
6630
  });
6631
+ localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
6632
+ return [].concat(_toConsumableArray(prevEvents), [event]);
6633
+ }));
6622
6634
  },
6623
6635
  maskAllInputs: false,
6624
6636
  maskTextSelector: null
@@ -6634,7 +6646,7 @@ var CoreOutline = function CoreOutline(_ref) {
6634
6646
  }, []);
6635
6647
  React.useEffect(function () {
6636
6648
  var handleClick = function handleClick(event) {
6637
- console.log("Inner text:", event.target.innerText);
6649
+ console.log('Inner text:', event.target.innerText);
6638
6650
  var clickEvent = {
6639
6651
  type: EventType.IncrementalSnapshot,
6640
6652
  data: {
@@ -6649,11 +6661,11 @@ var CoreOutline = function CoreOutline(_ref) {
6649
6661
  var clickedElement = document.elementFromPoint(clickEvent.data.x, clickEvent.data.y);
6650
6662
  if (clickedElement) {
6651
6663
  clickEvent.data.metadata = {
6652
- label: clickedElement.getAttribute("data-label") || clickedElement.innerText || null,
6653
- value: clickedElement.getAttribute("value") || clickedElement.innerText || null,
6654
- id: clickedElement.getAttribute("id") || clickedElement.innerText || null,
6655
- name: clickedElement.getAttribute("name") || clickedElement.innerText || null,
6656
- "class": clickedElement.getAttribute("class") || clickedElement.innerText || null,
6664
+ label: clickedElement.getAttribute('data-label') || clickedElement.innerText || null,
6665
+ value: clickedElement.getAttribute('value') || clickedElement.innerText || null,
6666
+ id: clickedElement.getAttribute('id') || clickedElement.innerText || null,
6667
+ name: clickedElement.getAttribute('name') || clickedElement.innerText || null,
6668
+ "class": clickedElement.getAttribute('class') || clickedElement.innerText || null,
6657
6669
  tag: clickedElement.tagName,
6658
6670
  html: String(clickedElement.getHTML()),
6659
6671
  innerText: event.target.innerText
@@ -6662,37 +6674,40 @@ var CoreOutline = function CoreOutline(_ref) {
6662
6674
  setEvents(function (prevEvents) {
6663
6675
  return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
6664
6676
  });
6677
+ localStorage.setItem('coreoutlineFormattedEvents', JSON.stringify(function (prevEvents) {
6678
+ return [].concat(_toConsumableArray(prevEvents), [clickEvent]);
6679
+ }));
6665
6680
  socket.send({
6666
- topic: "session-data",
6681
+ topic: 'session-data',
6667
6682
  data_source_id: data_source_id,
6668
- session_id: localStorage.getItem("coreOutlineSessionId"),
6683
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6669
6684
  start_date: new Date().toLocaleString(),
6670
6685
  latitude: location.latitude,
6671
6686
  longitude: location.longitude,
6672
6687
  browser: browser,
6673
- event_id: "ITEM_CLICKED"
6688
+ event_id: 'ITEM_CLICKED'
6674
6689
  // item_clicked: event.target,
6675
6690
  });
6676
6691
  };
6677
- document.addEventListener("click", handleClick);
6692
+ document.addEventListener('click', handleClick);
6678
6693
  return function () {
6679
- document.removeEventListener("click", handleClick);
6694
+ document.removeEventListener('click', handleClick);
6680
6695
  };
6681
6696
  }, []);
6682
6697
  function saveEventsLocally() {
6683
- var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "formatted" ;
6684
- var blob = "";
6685
- if (type === "formatted") {
6698
+ var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'formatted' ;
6699
+ var blob = '';
6700
+ if (type === 'formatted') {
6686
6701
  blob = new Blob([JSON.stringify(events, null, 2)], {
6687
- type: "application/json"
6702
+ type: 'application/json'
6688
6703
  });
6689
- } else if (type === "raw") {
6704
+ } else if (type === 'raw') {
6690
6705
  blob = new Blob([JSON.stringify(replayEvents, null, 2)], {
6691
- type: "application/json"
6706
+ type: 'application/json'
6692
6707
  });
6693
6708
  }
6694
6709
  var url = URL.createObjectURL(blob);
6695
- var a = document.createElement("a");
6710
+ var a = document.createElement('a');
6696
6711
  a.href = url;
6697
6712
  a.download = "".concat(type, "_events.json");
6698
6713
  a.click();
@@ -6700,17 +6715,17 @@ var CoreOutline = function CoreOutline(_ref) {
6700
6715
  }
6701
6716
  function getBrowserInfo() {
6702
6717
  var userAgent = navigator.userAgent;
6703
- var browserName = "Unknown";
6704
- if (userAgent.indexOf("Firefox") > -1) {
6705
- browserName = "Firefox";
6706
- } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
6707
- browserName = "Opera";
6708
- } else if (userAgent.indexOf("Chrome") > -1) {
6709
- browserName = "Chrome";
6710
- } else if (userAgent.indexOf("Safari") > -1) {
6711
- browserName = "Safari";
6712
- } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
6713
- browserName = "Internet Explorer";
6718
+ var browserName = 'Unknown';
6719
+ if (userAgent.indexOf('Firefox') > -1) {
6720
+ browserName = 'Firefox';
6721
+ } else if (userAgent.indexOf('Opera') > -1 || userAgent.indexOf('OPR') > -1) {
6722
+ browserName = 'Opera';
6723
+ } else if (userAgent.indexOf('Chrome') > -1) {
6724
+ browserName = 'Chrome';
6725
+ } else if (userAgent.indexOf('Safari') > -1) {
6726
+ browserName = 'Safari';
6727
+ } else if (userAgent.indexOf('MSIE') > -1 || userAgent.indexOf('Trident/') > -1) {
6728
+ browserName = 'Internet Explorer';
6714
6729
  }
6715
6730
  return browserName;
6716
6731
  }
@@ -6722,53 +6737,53 @@ var CoreOutline = function CoreOutline(_ref) {
6722
6737
  longitude: position.coords.longitude
6723
6738
  });
6724
6739
  }, function (error) {
6725
- console.error("Error getting location:", error);
6740
+ console.error('Error getting location:', error);
6726
6741
  });
6727
6742
  } else {
6728
- console.error("Geolocation is not supported by this browser.");
6743
+ console.error('Geolocation is not supported by this browser.');
6729
6744
  }
6730
6745
  }
6731
6746
  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
6732
6747
  onClick: function onClick() {
6733
- saveEventsLocally("formatted");
6734
- saveEventsLocally("raw");
6748
+ saveEventsLocally('formatted');
6749
+ saveEventsLocally('raw');
6735
6750
  }
6736
6751
  }, "Save Events Locally"), children);
6737
6752
  };
6738
6753
  var flag_item_clicked = function flag_item_clicked(item_id) {
6739
- var sessionId = localStorage.getItem("coreOutlineSessionId");
6740
- var dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
6741
- console.log("Session", sessionId);
6742
- console.log("Data Source", dataSourceId);
6754
+ var sessionId = localStorage.getItem('coreOutlineSessionId');
6755
+ var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
6756
+ console.log('Session', sessionId);
6757
+ console.log('Data Source', dataSourceId);
6743
6758
  socket.send({
6744
- topic: "session-data",
6759
+ topic: 'session-data',
6745
6760
  data_source_id: dataSourceId,
6746
- session_id: localStorage.getItem("coreOutlineSessionId"),
6761
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6747
6762
  start_date: new Date().toLocaleString(),
6748
- event_id: "PRODUCT_CLICKED",
6763
+ event_id: 'PRODUCT_CLICKED',
6749
6764
  item_clicked: item_id
6750
6765
  });
6751
6766
  return {
6752
- status: "success",
6753
- message: "Item click flagged successfully."
6767
+ status: 'success',
6768
+ message: 'Item click flagged successfully.'
6754
6769
  };
6755
6770
  };
6756
6771
  var flag_item_purchased = function flag_item_purchased(item_id) {
6757
- var sessionId = localStorage.getItem("coreOutlineSessionId");
6758
- var dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
6759
- console.log("Session", sessionId);
6760
- console.log("Data Source", dataSourceId);
6772
+ var sessionId = localStorage.getItem('coreOutlineSessionId');
6773
+ var dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
6774
+ console.log('Session', sessionId);
6775
+ console.log('Data Source', dataSourceId);
6761
6776
  socket.send({
6762
- topic: "session-data",
6777
+ topic: 'session-data',
6763
6778
  data_source_id: dataSourceId,
6764
- session_id: localStorage.getItem("coreOutlineSessionId"),
6779
+ session_id: localStorage.getItem('coreOutlineSessionId'),
6765
6780
  start_date: new Date().toLocaleString(),
6766
- event_id: "PRODUCT_PURCHASED",
6781
+ event_id: 'PRODUCT_PURCHASED',
6767
6782
  item_clicked: item_id
6768
6783
  });
6769
6784
  return {
6770
- status: "success",
6771
- message: "Item purchase flagged successfully."
6785
+ status: 'success',
6786
+ message: 'Item purchase flagged successfully.'
6772
6787
  };
6773
6788
  };
6774
6789
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "core-outline",
3
- "version": "1.1.17",
3
+ "version": "1.1.18",
4
4
  "description": "A React component for Core&Outline",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/components/CoreOutline/CoreOutline.js CHANGED
@@ -1,10 +1,14 @@
1
- import React, { useEffect, useRef, useState } from "react";
2
- import { record } from "rrweb";
3
- import { v4 } from "uuid";
4
- import socket from "./socket";
5
-
6
- import { EventType, eventWithTime, IncrementalSource, MouseInteractions } from "rrweb";
7
-
1
+ import React, { use, useEffect, useRef, useState } from 'react';
2
+ import { record } from 'rrweb';
3
+ import { v4 } from 'uuid';
4
+ import socket from './socket';
5
+
6
+ import {
7
+ EventType,
8
+ eventWithTime,
9
+ IncrementalSource,
10
+ MouseInteractions,
11
+ } from 'rrweb';
8
12
 
9
13
  const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
10
14
  const [events, setEvents] = useState([]);
@@ -13,69 +17,80 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
13
17
  const [currentPage, setCurrentPage] = useState(window.location.href);
14
18
  const [location, setLocation] = useState({ latitude: null, longitude: null });
15
19
  const [browser, setBrowser] = useState(getBrowserInfo());
16
- const [appToken, setAppToken] = useState("");
20
+ const [appToken, setAppToken] = useState('');
17
21
  const [sessionId, setSessionId] = useState(v4());
18
22
 
19
23
  async function authorizeApp(data_source_id, data_source_secret) {
20
24
  const requestOptions = {
21
- method: "POST",
25
+ method: 'POST',
22
26
  headers: {
23
- "Content-Type": "application/json",
27
+ 'Content-Type': 'application/json',
24
28
  },
25
29
  body: JSON.stringify({
26
30
  data_source_id: data_source_id,
27
31
  data_source_secret: data_source_secret,
28
32
  }),
29
33
  };
30
- const response = fetch(`http://localhost:4000/data-source/authorize`, requestOptions)
34
+ const response = fetch(
35
+ `http://api.coreoutline.com/data-source/authorize`,
36
+ requestOptions
37
+ )
31
38
  .then((response) => response.json())
32
39
  .then((data) => {
33
40
  setAppToken(data.app_token);
34
41
  return data;
35
42
  })
36
43
  .catch((error) => {
37
- console.error("Error:", error);
44
+ console.error('Error:', error);
38
45
  return error;
39
46
  });
40
47
  return response;
41
48
  }
42
49
 
43
50
  const offLoadFunctionality = () => {
51
+ const formattedEvents =
52
+ events && events.length > 0
53
+ ? events
54
+ : JSON.parse(
55
+ localStorage.getItem('coreoutlineFormattedEvents') || '[]'
56
+ );
57
+ const rawEvents =
58
+ replayEvents && replayEvents.length > 0
59
+ ? replayEvents
60
+ : JSON.parse(localStorage.getItem('coreoutlineRawEvents') || '[]');
61
+
44
62
  const data = JSON.stringify({
45
63
  data_source_id: data_source_id,
46
64
  sessionId: sessionId,
47
- formatted_events: JSON.stringify(events),
48
- raw_events: JSON.stringify(replayEvents),
65
+ formatted_events: formattedEvents,
66
+ raw_events: rawEvents,
49
67
  });
50
68
 
51
69
  socket.send({
52
- topic: "session-data",
70
+ topic: 'session-data',
53
71
  data_source_id: data_source_id,
54
- session_id: localStorage.getItem("coreOutlineSessionId"),
72
+ session_id: localStorage.getItem('coreOutlineSessionId'),
55
73
  start_date: new Date().toLocaleString(),
56
74
  latitude: location.latitude,
57
75
  longitude: location.longitude,
58
76
  browser: browser,
59
- event_id: "SESSION_END",
77
+ event_id: 'SESSION_END',
60
78
  });
61
79
 
62
80
  if (navigator.sendBeacon) {
63
- navigator.sendBeacon(
64
- `http://localhost:5000/upload-events`, data
65
- );
66
- }
67
- else {
68
- fetch(`http://localhost:5000/upload-events`, {
81
+ navigator.sendBeacon(`http://data.coreoutline.com/upload-events`, data);
82
+ } else {
83
+ fetch(`http://data.coreoutline.com/upload-events`, {
69
84
  method: 'POST',
70
85
  body: data,
71
86
  keepalive: true,
72
87
  headers: {
73
88
  'Content-Type': 'application/json',
74
89
  },
75
- }).catch(err => console.error('Upload failed:', err));
90
+ }).catch((err) => console.error('Upload failed:', err));
76
91
  }
77
92
  };
78
-
93
+ useEffect(() => {}, [events, replayEvents]);
79
94
 
80
95
  useEffect(async () => {
81
96
  const handleBeforeUnload = () => {
@@ -90,18 +105,18 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
90
105
  window.addEventListener('beforeunload', handleBeforeUnload);
91
106
  document.addEventListener('visibilitychange', handleVisibilityChange);
92
107
  await authorizeApp(data_source_id, data_source_secret);
93
- localStorage.setItem("coreOutlineSessionId", sessionId);
94
- localStorage.setItem("coreOutlineDataSourceIdId", data_source_id);
95
- console.log("Session", sessionId);
108
+ localStorage.setItem('coreOutlineSessionId', sessionId);
109
+ localStorage.setItem('coreOutlineDataSourceIdId', data_source_id);
110
+ console.log('Session', sessionId);
96
111
  socket.send({
97
- topic: "session-data",
112
+ topic: 'session-data',
98
113
  data_source_id: data_source_id,
99
- session_id: localStorage.getItem("coreOutlineSessionId"),
114
+ session_id: localStorage.getItem('coreOutlineSessionId'),
100
115
  start_date: new Date().toLocaleString(),
101
116
  latitude: location.latitude,
102
117
  longitude: location.longitude,
103
118
  browser: browser,
104
- event_id: "SESSION_START",
119
+ event_id: 'SESSION_START',
105
120
  });
106
121
 
107
122
  return () => {
@@ -109,14 +124,14 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
109
124
  window.removeEventListener('beforeunload', handleBeforeUnload);
110
125
  document.removeEventListener('visibilitychange', handleVisibilityChange);
111
126
  socket.send({
112
- topic: "session-data",
127
+ topic: 'session-data',
113
128
  data_source_id: data_source_id,
114
- session_id: localStorage.getItem("coreOutlineSessionId"),
129
+ session_id: localStorage.getItem('coreOutlineSessionId'),
115
130
  start_date: new Date().toLocaleString(),
116
131
  latitude: location.latitude,
117
132
  longitude: location.longitude,
118
133
  browser: browser,
119
- event_id: "SESSION_END",
134
+ event_id: 'SESSION_END',
120
135
  });
121
136
  };
122
137
  }, []);
@@ -144,22 +159,26 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
144
159
  });
145
160
  observer.observe(document, { childList: true, subtree: true });
146
161
  setEvents((prevEvents) => [...prevEvents, navigationEvent]);
162
+ localStorage.setItem(
163
+ 'coreoutlineFormattedEvents',
164
+ JSON.stringify((prevEvents) => [...prevEvents, navigationEvent])
165
+ );
147
166
  const handleNavigation = () => {
148
167
  setCurrentPage(window.location.href);
149
168
  socket.send({
150
- topic: "session-data",
169
+ topic: 'session-data',
151
170
  data_source_id: data_source_id,
152
- session_id: localStorage.getItem("coreOutlineSessionId"),
171
+ session_id: localStorage.getItem('coreOutlineSessionId'),
153
172
  start_date: new Date().toLocaleString(),
154
173
  latitude: location.latitude,
155
174
  longitude: location.longitude,
156
175
  browser: browser,
157
176
  page_name: window.location.href,
158
- event_id: "PAGE_NAVIGATION",
177
+ event_id: 'PAGE_NAVIGATION',
159
178
  });
160
179
  };
161
180
 
162
- window.addEventListener("popstate", handleNavigation);
181
+ window.addEventListener('popstate', handleNavigation);
163
182
  const originalPushState = window.history.pushState;
164
183
  window.history.pushState = function (...args) {
165
184
  originalPushState.apply(this, args);
@@ -167,13 +186,13 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
167
186
  };
168
187
 
169
188
  return () => {
170
- window.removeEventListener("popstate", handleNavigation);
189
+ window.removeEventListener('popstate', handleNavigation);
171
190
  window.history.pushState = originalPushState;
172
191
  };
173
192
  }, [currentPage]);
174
193
 
175
194
  useEffect(() => {
176
- console.log("Location", location);
195
+ console.log('Location', location);
177
196
  getLocation();
178
197
  }, []);
179
198
 
@@ -183,6 +202,10 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
183
202
  stopFn = record({
184
203
  emit(event) {
185
204
  setReplayEvents((prevEvents) => [...prevEvents, event]);
205
+ localStorage.setItem(
206
+ 'coreoutlineRawEvents',
207
+ JSON.stringify((prevEvents) => [...replayEvents, event])
208
+ );
186
209
  },
187
210
  maskAllInputs: false,
188
211
  maskTextSelector: null,
@@ -205,7 +228,7 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
205
228
  if (!recorderActive.current) {
206
229
  stopFn = record({
207
230
  emit(event) {
208
- console.log("Event:", event);
231
+ console.log('Event:', event);
209
232
  if (event.type == 3 && event.data.type == 2) {
210
233
  return;
211
234
  }
@@ -219,9 +242,13 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
219
242
  return;
220
243
  }
221
244
  if (event.type == 3 && event.data.type == 3) {
222
- console.log("Contextmenu Event:", event);
245
+ console.log('Contextmenu Event:', event);
223
246
  }
224
247
  setEvents((prevEvents) => [...prevEvents, event]);
248
+ localStorage.setItem(
249
+ 'coreoutlineFormattedEvents',
250
+ JSON.stringify((prevEvents) => [...prevEvents, event])
251
+ );
225
252
  },
226
253
  maskAllInputs: false,
227
254
  maskTextSelector: null,
@@ -241,7 +268,7 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
241
268
 
242
269
  useEffect(() => {
243
270
  const handleClick = (event) => {
244
- console.log("Inner text:", event.target.innerText);
271
+ console.log('Inner text:', event.target.innerText);
245
272
  const clickEvent = {
246
273
  type: EventType.IncrementalSnapshot,
247
274
  data: {
@@ -253,52 +280,76 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
253
280
  },
254
281
  timestamp: Date.now(),
255
282
  };
256
- const clickedElement = document.elementFromPoint(clickEvent.data.x, clickEvent.data.y);
283
+ const clickedElement = document.elementFromPoint(
284
+ clickEvent.data.x,
285
+ clickEvent.data.y
286
+ );
257
287
 
258
288
  if (clickedElement) {
259
289
  clickEvent.data.metadata = {
260
- label: clickedElement.getAttribute("data-label") || clickedElement.innerText || null,
261
- value: clickedElement.getAttribute("value") || clickedElement.innerText || null,
262
- id: clickedElement.getAttribute("id") || clickedElement.innerText || null,
263
- name: clickedElement.getAttribute("name") || clickedElement.innerText || null,
264
- class: clickedElement.getAttribute("class") || clickedElement.innerText || null,
290
+ label:
291
+ clickedElement.getAttribute('data-label') ||
292
+ clickedElement.innerText ||
293
+ null,
294
+ value:
295
+ clickedElement.getAttribute('value') ||
296
+ clickedElement.innerText ||
297
+ null,
298
+ id:
299
+ clickedElement.getAttribute('id') ||
300
+ clickedElement.innerText ||
301
+ null,
302
+ name:
303
+ clickedElement.getAttribute('name') ||
304
+ clickedElement.innerText ||
305
+ null,
306
+ class:
307
+ clickedElement.getAttribute('class') ||
308
+ clickedElement.innerText ||
309
+ null,
265
310
  tag: clickedElement.tagName,
266
311
  html: String(clickedElement.getHTML()),
267
312
  innerText: event.target.innerText,
268
313
  };
269
314
  }
270
315
  setEvents((prevEvents) => [...prevEvents, clickEvent]);
271
-
316
+ localStorage.setItem(
317
+ 'coreoutlineFormattedEvents',
318
+ JSON.stringify((prevEvents) => [...prevEvents, clickEvent])
319
+ );
272
320
  socket.send({
273
- topic: "session-data",
321
+ topic: 'session-data',
274
322
  data_source_id: data_source_id,
275
- session_id: localStorage.getItem("coreOutlineSessionId"),
323
+ session_id: localStorage.getItem('coreOutlineSessionId'),
276
324
  start_date: new Date().toLocaleString(),
277
325
  latitude: location.latitude,
278
326
  longitude: location.longitude,
279
327
  browser: browser,
280
- event_id: "ITEM_CLICKED",
328
+ event_id: 'ITEM_CLICKED',
281
329
  // item_clicked: event.target,
282
330
  });
283
331
  };
284
332
 
285
- document.addEventListener("click", handleClick);
333
+ document.addEventListener('click', handleClick);
286
334
 
287
335
  return () => {
288
- document.removeEventListener("click", handleClick);
336
+ document.removeEventListener('click', handleClick);
289
337
  };
290
338
  }, []);
291
339
 
292
-
293
- function saveEventsLocally(type = "formatted" || "raw") {
294
- let blob = "";
295
- if (type === "formatted") {
296
- blob = new Blob([JSON.stringify(events, null, 2)], { type: "application/json" });
297
- } else if (type === "raw") {
298
- blob = new Blob([JSON.stringify(replayEvents, null, 2)], { type: "application/json" });
340
+ function saveEventsLocally(type = 'formatted' || 'raw') {
341
+ let blob = '';
342
+ if (type === 'formatted') {
343
+ blob = new Blob([JSON.stringify(events, null, 2)], {
344
+ type: 'application/json',
345
+ });
346
+ } else if (type === 'raw') {
347
+ blob = new Blob([JSON.stringify(replayEvents, null, 2)], {
348
+ type: 'application/json',
349
+ });
299
350
  }
300
351
  const url = URL.createObjectURL(blob);
301
- const a = document.createElement("a");
352
+ const a = document.createElement('a');
302
353
  a.href = url;
303
354
  a.download = `${type}_events.json`;
304
355
  a.click();
@@ -307,18 +358,24 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
307
358
 
308
359
  function getBrowserInfo() {
309
360
  const userAgent = navigator.userAgent;
310
- let browserName = "Unknown";
311
-
312
- if (userAgent.indexOf("Firefox") > -1) {
313
- browserName = "Firefox";
314
- } else if (userAgent.indexOf("Opera") > -1 || userAgent.indexOf("OPR") > -1) {
315
- browserName = "Opera";
316
- } else if (userAgent.indexOf("Chrome") > -1) {
317
- browserName = "Chrome";
318
- } else if (userAgent.indexOf("Safari") > -1) {
319
- browserName = "Safari";
320
- } else if (userAgent.indexOf("MSIE") > -1 || userAgent.indexOf("Trident/") > -1) {
321
- browserName = "Internet Explorer";
361
+ let browserName = 'Unknown';
362
+
363
+ if (userAgent.indexOf('Firefox') > -1) {
364
+ browserName = 'Firefox';
365
+ } else if (
366
+ userAgent.indexOf('Opera') > -1 ||
367
+ userAgent.indexOf('OPR') > -1
368
+ ) {
369
+ browserName = 'Opera';
370
+ } else if (userAgent.indexOf('Chrome') > -1) {
371
+ browserName = 'Chrome';
372
+ } else if (userAgent.indexOf('Safari') > -1) {
373
+ browserName = 'Safari';
374
+ } else if (
375
+ userAgent.indexOf('MSIE') > -1 ||
376
+ userAgent.indexOf('Trident/') > -1
377
+ ) {
378
+ browserName = 'Internet Explorer';
322
379
  }
323
380
 
324
381
  return browserName;
@@ -334,11 +391,11 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
334
391
  });
335
392
  },
336
393
  (error) => {
337
- console.error("Error getting location:", error);
394
+ console.error('Error getting location:', error);
338
395
  }
339
396
  );
340
397
  } else {
341
- console.error("Geolocation is not supported by this browser.");
398
+ console.error('Geolocation is not supported by this browser.');
342
399
  }
343
400
  }
344
401
 
@@ -346,8 +403,8 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
346
403
  <div>
347
404
  <button
348
405
  onClick={() => {
349
- saveEventsLocally("formatted");
350
- saveEventsLocally("raw");
406
+ saveEventsLocally('formatted');
407
+ saveEventsLocally('raw');
351
408
  }}
352
409
  >
353
410
  Save Events Locally
@@ -358,35 +415,35 @@ const CoreOutline = ({ children, data_source_id, data_source_secret }) => {
358
415
  };
359
416
 
360
417
  export const flag_item_clicked = (item_id) => {
361
- const sessionId = localStorage.getItem("coreOutlineSessionId");
362
- const dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
363
- console.log("Session", sessionId);
364
- console.log("Data Source", dataSourceId);
418
+ const sessionId = localStorage.getItem('coreOutlineSessionId');
419
+ const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
420
+ console.log('Session', sessionId);
421
+ console.log('Data Source', dataSourceId);
365
422
  socket.send({
366
- topic: "session-data",
423
+ topic: 'session-data',
367
424
  data_source_id: dataSourceId,
368
- session_id: localStorage.getItem("coreOutlineSessionId"),
425
+ session_id: localStorage.getItem('coreOutlineSessionId'),
369
426
  start_date: new Date().toLocaleString(),
370
- event_id: "PRODUCT_CLICKED",
427
+ event_id: 'PRODUCT_CLICKED',
371
428
  item_clicked: item_id,
372
429
  });
373
- return { status: "success", message: "Item click flagged successfully." };
430
+ return { status: 'success', message: 'Item click flagged successfully.' };
374
431
  };
375
432
 
376
433
  export const flag_item_purchased = (item_id) => {
377
- const sessionId = localStorage.getItem("coreOutlineSessionId");
378
- const dataSourceId = localStorage.getItem("coreOutlineDataSourceIdId");
379
- console.log("Session", sessionId);
380
- console.log("Data Source", dataSourceId);
434
+ const sessionId = localStorage.getItem('coreOutlineSessionId');
435
+ const dataSourceId = localStorage.getItem('coreOutlineDataSourceIdId');
436
+ console.log('Session', sessionId);
437
+ console.log('Data Source', dataSourceId);
381
438
  socket.send({
382
- topic: "session-data",
439
+ topic: 'session-data',
383
440
  data_source_id: dataSourceId,
384
- session_id: localStorage.getItem("coreOutlineSessionId"),
441
+ session_id: localStorage.getItem('coreOutlineSessionId'),
385
442
  start_date: new Date().toLocaleString(),
386
- event_id: "PRODUCT_PURCHASED",
443
+ event_id: 'PRODUCT_PURCHASED',
387
444
  item_clicked: item_id,
388
445
  });
389
- return { status: "success", message: "Item purchase flagged successfully." };
446
+ return { status: 'success', message: 'Item purchase flagged successfully.' };
390
447
  };
391
448
 
392
449
  export default CoreOutline;
package/src/components/CoreOutline/socket.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import { io } from 'socket.io-client';
2
- const socket = io('http://localhost:8000');
2
+ const socket = io('http://streams.coreoutline.com');
3
3
  export default socket;