fix: fixes several cases where we access an undefined value (#171)

Fixes several cases where we access an undefined value.

In the case of `lastFullSnapshotEvent`, it can be undefined if we
receive an incremental event before a full snapshot. This can happen,
for example, if a user refreshes while canvas worker is working and on
reload it finishes to call the mutation callback and before fullsnapshot
occurs.

Fixes JAVASCRIPT-2S3R
Fixes JAVASCRIPT-2QS1
Fixes JAVASCRIPT-2FQ5
Fixes JAVASCRIPT-2H2H

Author: billyvg

packages/rrweb/src/record/index.ts

@@ -252,6 +252,7 @@ function record<T = eventWithTime>(
         checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth;
       const exceedTime =
         checkoutEveryNms &&
+        lastFullSnapshotEvent &&
         e.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms;
       if (exceedCount || exceedTime) {
         takeFullSnapshot(true);

packages/rrweb/src/replay/index.ts

@@ -815,9 +815,10 @@ export class Replayer {
     const { documentElement, head } = this.iframe.contentDocument;
     this.insertStyleRules(documentElement, head);
     if (!this.service.state.matches('playing')) {
-      this.iframe.contentDocument
-        .getElementsByTagName('html')[0]
-        .classList.add('rrweb-paused');
+      const iframeHtmlElement =
+        this.iframe.contentDocument.getElementsByTagName('html')[0];
+
+      iframeHtmlElement && iframeHtmlElement.classList.add('rrweb-paused');
     }
     this.emitter.emit(ReplayerEvents.FullsnapshotRebuilded, event);
     if (!isSync) {
@@ -1960,7 +1961,8 @@ export class Replayer {
         styleSheet.rules,
         data.index,
       ) as unknown as CSSStyleRule;
-      rule.style &&
+      rule &&
+        rule.style &&
         rule.style.setProperty(
           data.set.property,
           data.set.value,
@@ -1973,7 +1975,7 @@ export class Replayer {
         styleSheet.rules,
         data.index,
       ) as unknown as CSSStyleRule;
-      rule.style && rule.style.removeProperty(data.remove.property);
+      rule && rule.style && rule.style.removeProperty(data.remove.property);
     }
   }
 
@@ -2131,11 +2133,16 @@ export class Replayer {
   }
 
   private hoverElements(el: Element) {
-    (this.lastHoveredRootNode || this.iframe.contentDocument)
-      ?.querySelectorAll('.\\:hover')
-      .forEach((hoveredEl) => {
+    const rootElement = this.lastHoveredRootNode || this.iframe.contentDocument;
+
+    // Sometimes this throws because `querySelectorAll` is not a function,
+    // unsure of value of rootElement when this occurs
+    if (rootElement && typeof rootElement.querySelectorAll === 'function') {
+      rootElement.querySelectorAll('.\\:hover').forEach((hoveredEl) => {
         hoveredEl.classList.remove(':hover');
       });
+    }
+
     this.lastHoveredRootNode = el.getRootNode() as Document | ShadowRoot;
     let currentEl: Element | null = el;
     while (currentEl) {