fix: use raw fetch for Dropbox API instead of SDK, add better error logging

api/dropbox-proxy.js

@@ -1,34 +1,57 @@
-const Dropbox = require('dropbox').Dropbox;
+import fetch from 'node:fetch';
+
+const DROPBOX_APP_KEY = process.env.DROPBOX_APP_KEY;
+const DROPBOX_APP_SECRET = process.env.DROPBOX_APP_SECRET;
+const DROPBOX_REFRESH_TOKEN = process.env.DROPBOX_REFRESH_TOKEN;
+
+async function getAccessToken() {
+  const response = await fetch('https://api.dropboxapi.com/oauth2/token', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `grant_type=refresh_token&refresh_token=${DROPBOX_REFRESH_TOKEN}&client_id=${DROPBOX_APP_KEY}&client_secret=${DROPBOX_APP_SECRET}`
+  });
+  const data = await response.json();
+  return data.access_token;
+}
 
 export default async function handler(req, res) {
-  if (req.method === 'GET' && req.query.info === '1') {
+  const accessToken = await getAccessToken();
-    const DBX = new Dropbox({ 
-      accessToken: process.env.DROPBOX_ACCESS_TOKEN 
-    });
   
+  if (req.method === 'GET' && req.query.info === '1') {
     try {
-      const fileInfo = await DBX.filesGetInfo({ path: '/Data-Matrix.xlsx' });
+      const fileInfo = await fetch('https://api.dropboxapi.com/2/files/get_metadata', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${accessToken}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ path: '/Data-Matrix.xlsx' })
+      });
+      const data = await fileInfo.json();
       return res.json({
-        rev: fileInfo.result.rev,
+        rev: data.rev,
-        size: fileInfo.result.size,
+        size: data.size,
-        server_modified: fileInfo.result.server_modified
+        server_modified: data.server_modified
       });
     } catch (err) {
       return res.status(500).json({ error: err.message });
     }
   }
 
-  const DBX = new Dropbox({ 
+  try {
-    accessToken: process.env.DROPBOX_ACCESS_TOKEN 
+    const upstream = await fetch('https://content.dropboxapi.com/2/files/download', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${accessToken}`,
+        'Dropbox-API-Arg': JSON.stringify({ path: '/Data-Matrix.xlsx' })
+      }
     });
     
-  try {
+    const buffer = await upstream.arrayBuffer();
-    const upstream = await DBX.filesDownload({ path: '/Data-Matrix.xlsx' });
-    const buffer = Buffer.from(upstream.result.fileBinary);
     
     res.setHeader('Content-Type', 'application/octet-stream');
     res.setHeader('Cache-Control', 'no-store');
-    res.send(buffer);
+    res.send(Buffer.from(buffer));
   } catch (err) {
     console.error('Dropbox error:', err);
     res.status(500).send('Proxy error: ' + err.message);

api/dropbox-sync.js

@@ -6,6 +6,7 @@ const SUPABASE_KEY = process.env.SUPABASE_SERVICE_KEY || 'sb_publishable_fGXkh0b
 const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);
 
 export default async function handler(req, res) {
+  try {
     if (req.method !== 'POST') {
       return res.status(405).json({ error: 'Method not allowed' });
     }
@@ -32,6 +33,8 @@ export default async function handler(req, res) {
       }
     }
 
+    console.log('Upserting', productsToUpsert.length, 'products to Supabase...');
+
     const { error } = await supabase
       .from('products')
       .upsert(productsToUpsert, { 
@@ -48,4 +51,8 @@ export default async function handler(req, res) {
       success: true, 
       syncedCount: productsToUpsert.length 
     });
+  } catch (err) {
+    console.error('Handler error:', err);
+    res.status(500).json({ error: err.message });
+  }
 }

src/App.tsx

@@ -54,6 +54,7 @@ export default function App() {
         const isDev = import.meta.env.DEV;
         
         let rows: any[][];
+        let allData: any[][];
         let fileMeta = { rev: '', size: 0 };
         
         if (isDev) {
@@ -67,8 +68,8 @@ export default function App() {
           const wb = XLSX.read(arrayBuffer, { type: 'array' });
           const wsname = wb.SheetNames[0];
           const ws = wb.Sheets[wsname];
-          const data = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1 });
+          allData = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1 });
-          rows = data.slice(1);
+          rows = allData.slice(1);
           fileMeta = { rev: 'dev', size: arrayBuffer.byteLength };
         } else {
           console.log('Fetching file info from Dropbox...');
@@ -87,12 +88,12 @@ export default function App() {
           const wb = XLSX.read(arrayBuffer, { type: 'array' });
           const wsname = wb.SheetNames[0];
           const ws = wb.Sheets[wsname];
-          const data = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1 });
+          allData = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1 });
-          rows = data.slice(1);
+          rows = allData.slice(1);
         }
 
         if (rows.length > 0) {
-          const rawHeaders = (data: any[]) => data[0];
+          const headers = allData.slice(0, 1)[0];
           
           console.log('Syncing Excel data to Supabase...');
           const syncRes = await fetch('/api/dropbox-sync', {
@@ -105,7 +106,8 @@ export default function App() {
             const syncResult = await syncRes.json();
             console.log('Supabase sync result:', syncResult);
           } else {
-            console.warn('Supabase sync failed, falling back to direct Excel data');
+            const errorText = await syncRes.text();
+            console.warn('Supabase sync failed:', syncRes.status, errorText);
           }
           
           console.log('Fetching synced data from Supabase...');
@@ -123,7 +125,7 @@ export default function App() {
             
             return finalRow.map((val: any, idx: number) => {
               if (val === undefined || val === null || val === '') return val;
-              const header = (rawHeaders[idx] || '').toLowerCase();
+              const header = (headers[idx] || '').toLowerCase();
               
               if ((header.includes('id') || header.includes('no') || header.includes('code') ||
                 header.includes('art.') || header.includes('barcode') || header.includes('article')) &&
@@ -149,12 +151,12 @@ export default function App() {
             });
           });
           
-          const asinIdx = (rawHeaders(rows) as string[]).findIndex((h: string) => 
+          const asinIdx = (headers as string[]).findIndex((h: string) => 
             String(h).toLowerCase().trim() === 'asin'
           );
           
           setAppState({
-            headers: rawHeaders(rows),
+            headers: headers,
             data: processedRows,
             fileName: 'Data-Matrix.xlsx (Cloud Sync)',
             fileDate: new Date(),
@@ -194,13 +196,13 @@ export default function App() {
       const data = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1 });
 
       if (data.length > 0) {
-        const rawHeaders = data[0];
+        const headers = data[0];
         const rawRows = data.slice(1);
 
         const processedRows = rawRows.map(row => {
           return row.map((val, idx) => {
             if (val === undefined || val === null || val === '') return val;
-            const header = (rawHeaders[idx] || '').toLowerCase();
+            const header = (headers[idx] || '').toLowerCase();
 
             if (header.includes('id') || header.includes('no') || header.includes('code') ||
               header.includes('art.') || header.includes('barcode') || header.includes('article')) {
@@ -239,7 +241,7 @@ export default function App() {
         });
 
         setAppState({
-          headers: rawHeaders,
+          headers: headers,
           data: processedRows,
           fileName: file.name,
           fileDate: new Date(),