feat(replay): Add breadcrumb when encountering large mutations

Author: mydea

packages/replay/src/replay.ts

@@ -198,6 +198,21 @@ export class ReplayContainer implements ReplayContainerInterface {
         // instead, we'll always keep the last 60 seconds of replay before an error happened
         ...(this.recordingMode === 'error' && { checkoutEveryNms: ERROR_CHECKOUT_TIME }),
         emit: this._handleRecordingEmit,
+        onMutation: (mutations: unknown[]) => {
+          const count = mutations.length;
+
+          if (count > 500) {
+            const breadcrumb = createBreadcrumb({
+              category: 'replay.mutations',
+              message: `A mutation with ${count} changes was recorded, which indicate slow performance.`,
+              data: {
+                mutationsCount: count,
+              },
+            });
+            this._createCustomBreadcrumb(breadcrumb);
+          }
+          return true;
+        },
       });
     } catch (err) {
       this._handleException(err);