fix: Cannot set property attributeName of #<MutationRecord> which has only a getter (#1173)

* fix: Cannot set property attributeName of #<MutationRecord> which has only a getter

* fix: attributeName readonly

Author: wfk007

packages/rrweb-snapshot/src/snapshot.ts

@@ -1200,7 +1200,7 @@ function snapshot(
     maskAllInputs?: boolean | MaskInputOptions;
     maskTextFn?: MaskTextFn;
     maskInputFn?: MaskTextFn;
-    slimDOM?: boolean | SlimDOMOptions;
+    slimDOM?: 'all' | boolean | SlimDOMOptions;
     dataURLOptions?: DataURLOptions;
     inlineImages?: boolean;
     recordCanvas?: boolean;

packages/rrweb/src/record/mutation.ts

@@ -486,8 +486,9 @@ export default class MutationBuffer {
       }
       case 'attributes': {
         const target = m.target as HTMLElement;
-        let value = (m.target as HTMLElement).getAttribute(m.attributeName!);
-        if (m.attributeName === 'value') {
+        let attributeName = m.attributeName as string;
+        let value = (m.target as HTMLElement).getAttribute(attributeName);
+        if (attributeName === 'value') {
           value = maskInputValue({
             maskInputOptions: this.maskInputOptions,
             tagName: (m.target as HTMLElement).tagName,
@@ -508,13 +509,13 @@ export default class MutationBuffer {
         );
         if (
           target.tagName === 'IFRAME' &&
-          m.attributeName === 'src' &&
+          attributeName === 'src' &&
           !this.keepIframeSrcFn(value as string)
         ) {
           if (!(target as HTMLIFrameElement).contentDocument) {
             // we can't record it directly as we can't see into it
             // preserve the src attribute so a decision can be taken at replay time
-            m.attributeName = 'rr_src';
+            attributeName = 'rr_src';
           } else {
             return;
           }
@@ -526,7 +527,7 @@ export default class MutationBuffer {
           };
           this.attributes.push(item);
         }
-        if (m.attributeName === 'style') {
+        if (attributeName === 'style') {
           const old = this.doc.createElement('span');
           if (m.oldValue) {
             old.setAttribute('style', m.oldValue);
@@ -558,12 +559,12 @@ export default class MutationBuffer {
               styleObj[pname] = false; // delete
             }
           }
-        } else if (!ignoreAttribute(target.tagName, m.attributeName!, value)) {
+        } else if (!ignoreAttribute(target.tagName, attributeName, value)) {
           // overwrite attribute if the mutations was triggered in same time
-          item.attributes[m.attributeName!] = transformAttribute(
+          item.attributes[attributeName] = transformAttribute(
             this.doc,
             target.tagName,
-            m.attributeName!,
+            attributeName,
             value,
           );
         }

packages/types/src/index.ts

@@ -265,14 +265,14 @@ export type hooksParam = {
 };
 
 // https://dom.spec.whatwg.org/#interface-mutationrecord
-export type mutationRecord = {
+export type mutationRecord = Readonly<{
   type: string;
   target: Node;
   oldValue: string | null;
   addedNodes: NodeList;
   removedNodes: NodeList;
   attributeName: string | null;
-};
+}>;
 
 export type textCursor = {
   node: Node;