fix: resolve white screen by removing stack-unfriendly spread operators and adding diagnostic logs

App.tsx

@@ -513,11 +513,14 @@ const App: React.FC = () => {
   }, [handleDataFetch]);
 
 
+  console.log('[App] Render Start. RawData count:', rawData.length, 'AdsData count:', adsData.length);
+
   // Derive Data
   const globalAsinMetadata = useMemo(() => {
     const metaMap = new Map<string, { sku: string; title: string; line: string }>();
     rawData.forEach(r => {
-      const asin = r.asin.trim().toUpperCase();
+      const asin = (r.asin || '').trim().toUpperCase();
+      if (!asin) return;
       const existing = metaMap.get(asin);
       // Keep most complete title
       if (!existing || (r.title && r.title.length > (existing.title?.length || 0))) {
@@ -527,6 +530,8 @@ const App: React.FC = () => {
     return metaMap;
   }, [rawData]);
 
+  console.log('[App] Metadata ready');
+
   const filteredData = useMemo(() => filterData(rawData, deferredFilters, stockMap, vendorStockMap, top50Mode), [rawData, deferredFilters, stockMap, vendorStockMap, top50Mode]);
   const filteredAdsData = useMemo(() => filterAdsData(adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
 
@@ -715,6 +720,7 @@ const App: React.FC = () => {
     setAdsData([]);
   };
 
+  console.log('[App] Render Finish');
   return (
     <div className="min-h-screen flex flex-col bg-background text-slate-200">
 

components/DataGrid.tsx

@@ -554,7 +554,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
         // 2. Sort
         if (sortConfig.key) {
             // Create a copy to avoid mutating the original array and ensure React detects the change
-            result = [...result].sort((a, b) => {
+            result = result.slice().sort((a, b) => {
                 let valA: number | string = '';
                 let valB: number | string = '';
 
@@ -611,7 +611,7 @@ const DataGrid: React.FC<DataGridProps> = ({ data, filters, hasCustomerFilter, a
         } else if (showOnlyTop50 && top50Ranking) {
             // Default sort by Rank when Top 50 is active
             const rankMap = top50Mode === 'eu' ? top50Ranking.eu : top50Ranking.uk;
-            result = [...result].sort((a, b) => {
+            result = result.slice().sort((a, b) => {
                 const rankA = a.asin ? rankMap.get(a.asin.toUpperCase()) || 999 : 999;
                 const rankB = b.asin ? rankMap.get(b.asin.toUpperCase()) || 999 : 999;
                 return rankA - rankB;

components/ForecastView.tsx

@@ -253,7 +253,7 @@ const ForecastView: React.FC<ForecastViewProps> = ({
     }, [baseFilteredData, activeMonths]);
 
     const processedData = useMemo(() => {
-        let result = [...calculatedData];
+        let result = calculatedData.slice();
 
         if (showOnlyTop50 && top50Ranking) {
             const currentRankMap = top50Mode === 'eu' ? top50Ranking.eu : top50Ranking.uk;

components/WeeklyGrid.tsx

@@ -561,7 +561,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
 
     // 1. Filter by search term, Top 50, and growth (using debounced value)
     const filteredRows = useMemo(() => {
-        let result = rows;
+        let result = rows.slice();
 
         // Top 50 Filter
         if (showOnlyTop50 && top50Ranking) {
@@ -711,7 +711,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
     const sortedRows = useMemo(() => {
         if (!sortConfig || filteredRows.length === 0) return filteredRows;
 
-        const result = [...filteredRows];
+        const result = filteredRows.slice();
         const { key: weekKey, direction, metric } = sortConfig;
 
         if (metric === 'rank') {

components/mkt/MasterTable.tsx

@@ -42,7 +42,7 @@ export const MasterTable: React.FC<MasterTableProps> = ({ products, includeCOGS,
   const totalAcos = totals.grossSales > 0 ? totals.ppcSpend / totals.grossSales : 0;
 
   const sortedProducts = useMemo(() => {
-    return [...products].sort((a, b) => {
+    return products.slice().sort((a, b) => {
       const metricsA = calculateProductMetrics(a, includeCOGS);
       const metricsB = calculateProductMetrics(b, includeCOGS);