From fd48a88a838fdc0ce680a0c5880d9e374f05cbd7 Mon Sep 17 00:00:00 2001
From: Eray Bulut <eray.bulut@ditravo.com>
Date: Fri, 17 Jan 2025 01:56:40 +0300
Subject: [PATCH] fix(reactivity): add warning for array operations on
 null/undefined values

Enhance the MutableReactiveHandler to include a development-only warning when attempting to perform operations on null or undefined values in arrays. This change aims to prevent unexpected behavior during reactive state management.
---
 packages/reactivity/src/baseHandlers.ts | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
index faec3012f40..43afffecec2 100644
--- a/packages/reactivity/src/baseHandlers.ts
+++ b/packages/reactivity/src/baseHandlers.ts
@@ -144,7 +144,24 @@ class MutableReactiveHandler extends BaseReactiveHandler {
     value: unknown,
     receiver: object,
   ): boolean {
-    let oldValue = target[key]
+    if (__DEV__) {
+      if (isArray(target)) {
+        if (
+          key === 'length' || 
+          !Number.isNaN(Number(key))
+        ) {
+          const targetValue = target[key as keyof typeof target]
+          if (targetValue === null || targetValue === undefined) {
+            console.warn(
+              `Attempting to perform array operation on null/undefined value at index ${key}. ` +
+              `This may cause unexpected behavior.`,
+            )
+          }
+        }
+      }
+    }
+
+    let oldValue = (target as any)[key]
     if (!this._isShallow) {
       const isOldValueReadonly = isReadonly(oldValue)
       if (!isShallow(value) && !isReadonly(value)) {