SkyArtShop/docs/DEEP_DEBUG_ANALYSIS.md

🔍 Deep Debugging Analysis - SkyArtShop

Analysis Date: December 18, 2025
Server Status: 🟢 ONLINE (with issues identified)
Analysis Method: Log analysis, code flow tracing, database inspection

---

🚨 Issues Identified

ISSUE #1: Missing Static Image Files (HIGH PRIORITY)

Severity: Medium
Impact: 404 errors, degraded user experience
Root Cause: Frontend references images that don't exist in filesystem

Evidence from Logs

Route not found: /assets/images/hero-image.jpg
Route not found: /assets/images/inspiration.jpg
Route not found: /assets/images/placeholder.jpg
Route not found: /assets/images/products/stickers-1.jpg
Route not found: /assets/images/products/washi-1.jpg
Route not found: /assets/images/products/journal-1.jpg
Route not found: /assets/images/products/stamps-1.jpg
Route not found: /assets/images/products/stickers-2.jpg
Route not found: /assets/images/products/washi-2.jpg
Route not found: /assets/images/products/paper-1.jpg
Route not found: /assets/images/products/markers-1.jpg
Route not found: /uploads/images/8ba675b9-c4e6-41e6-8f14-382b9ee1d019.jpg

Directory Analysis

Existing Files:

/media/pts/Website/SkyArtShop/website/assets/images/
├── about-1.jpg ✅
├── about-2.jpg ✅
├── cardmaking.jpg ✅
├── craft-supplies.jpg ✅
├── hero-craft.jpg ✅
├── journals.jpg ✅
├── stickers.jpg ✅
├── washi-tape.jpg ✅
└── products/
    ├── placeholder.jpg ✅
    ├── product-1.jpg ✅
    ├── product-2.jpg ✅
    ├── product-3.jpg ✅
    └── product-4.jpg ✅

Missing Files:

• /assets/images/hero-image.jpg ❌ (Referenced in home.html)
• /assets/images/inspiration.jpg ❌ (Referenced in home.html)
• /assets/images/placeholder.jpg ❌ (Wrong path - exists in products/)
• /assets/images/products/stickers-1.jpg ❌ (Referenced in database)
• /assets/images/products/washi-1.jpg ❌ (Referenced in database)
• /assets/images/products/journal-1.jpg ❌
• /assets/images/products/stamps-1.jpg ❌
• /assets/images/products/stickers-2.jpg ❌
• /assets/images/products/washi-2.jpg ❌
• /assets/images/products/paper-1.jpg ❌
• /assets/images/products/markers-1.jpg ❌

---

ISSUE #2: Database Product Images Mismatch

Severity: Medium
Impact: Products display broken images on frontend
Root Cause: Database references non-existent image files

Database Analysis

Sample product from database:

{
  "id": "prod-sticker-pack-1",
  "name": "Aesthetic Sticker Pack",
  "imageurl": "/assets/images/products/stickers-1.jpg",  // ❌ File doesn't exist
  "isfeatured": true,
  "istopseller": true,
  "stockquantity": 150
}

Problem: Products in database reference specific image filenames that don't exist in the filesystem.

Available Generic Images:

• /assets/images/products/product-1.jpg ✅
• /assets/images/products/product-2.jpg ✅
• /assets/images/products/product-3.jpg ✅
• /assets/images/products/product-4.jpg ✅
• /assets/images/products/placeholder.jpg ✅

---

ISSUE #3: Uploads Directory Empty

Severity: Low
Impact: No user-uploaded images available
Root Cause: Fresh installation or uploads were deleted

Directory Status

/media/pts/Website/SkyArtShop/website/uploads/
└── (empty)

Expected: Image uploads from admin panel should be stored here.
Actual: Directory exists but is empty (no test uploads have been made).

---

ISSUE #4: Excessive 404 Logging

Severity: Low
Impact: Log pollution, harder to identify real errors
Root Cause: notFoundHandler logs all 404s including static assets

Current Behavior

Every missing static asset generates a WARN log entry:

{
  "level": "warn",
  "message": "Route not found",
  "path": "/assets/images/products/stickers-1.jpg",
  "method": "GET",
  "ip": "127.0.0.1",
  "timestamp": "2025-12-18 17:18:56"
}

Problem: Static asset 404s shouldn't be logged as warnings - they're expected during development when images are being added.

---

🔍 Code Flow Analysis

Request Flow for Static Assets

1. Client Request: GET /assets/images/products/stickers-1.jpg
   ↓
2. Express Static Middleware: app.use('/assets', express.static(...))
   - Checks: /media/pts/Website/SkyArtShop/website/assets/images/products/stickers-1.jpg
   - Result: File not found, passes to next middleware
   ↓
3. Route Handlers: /api/admin, /api, etc.
   - None match static asset path, passes to next
   ↓
4. notFoundHandler (404 handler)
   - Logs warning
   - Returns 404 JSON response
   ↓
5. Client receives: {"success":false,"message":"Route not found","path":"..."}

Database Query Flow for Products

1. Client Request: GET /api/products
   ↓
2. Route Handler: routes/public.js
   ↓
3. Database Query: SELECT * FROM products
   - Returns imageurl: "/assets/images/products/stickers-1.jpg"
   ↓
4. Frontend renders: <img src="/assets/images/products/stickers-1.jpg">
   ↓
5. Browser requests image → 404 (see flow above)

---

🎯 Root Causes Summary

1. Missing Image Assets: Frontend and database were set up with specific image filenames, but those image files were never added to the filesystem.

2. Incomplete Initial Setup: The website structure has placeholder image references in:

   • HTML files (home.html, portfolio.html)
   • Database product records
   • But corresponding image files weren't created

3. Development vs Production Gap: The application expects a complete asset library that doesn't exist yet.

---

🛠️ Solutions & Fixes

FIX #1: Create Symbolic Links to Existing Images

Approach: Map missing filenames to existing similar images as temporary placeholders.

Implementation:

# Create missing images using existing ones as placeholders
cd /media/pts/Website/SkyArtShop/website/assets/images/

# Home page images
ln -s hero-craft.jpg hero-image.jpg
ln -s craft-supplies.jpg inspiration.jpg
ln -s products/placeholder.jpg placeholder.jpg

# Product-specific images
cd products/
ln -s product-1.jpg stickers-1.jpg
ln -s product-2.jpg washi-1.jpg
ln -s product-3.jpg journal-1.jpg
ln -s product-4.jpg stamps-1.jpg
ln -s product-1.jpg stickers-2.jpg
ln -s product-2.jpg washi-2.jpg
ln -s product-3.jpg paper-1.jpg
ln -s product-4.jpg markers-1.jpg

Benefits:

• ✅ Eliminates 404 errors immediately
• ✅ No code changes required
• ✅ Preserves image references in database
• ✅ Easy to replace with real images later

---

FIX #2: Reduce 404 Logging Noise

Approach: Modify notFoundHandler to suppress static asset 404 warnings.

Current Code (middleware/errorHandler.js):

const notFoundHandler = (req, res) => {
  logger.warn("Route not found", {
    path: req.path,
    method: req.method,
    ip: req.ip,
  });

  res.status(404).json({
    success: false,
    message: "Route not found",
    path: req.path,
  });
};

Improved Code:

const notFoundHandler = (req, res) => {
  // Only log API route 404s, not static assets
  const isStaticAsset = req.path.match(/\.(jpg|jpeg|png|gif|svg|css|js|ico|webp|woff|woff2|ttf|eot)$/i);
  
  if (!isStaticAsset) {
    logger.warn("Route not found", {
      path: req.path,
      method: req.method,
      ip: req.ip,
    });
  } else {
    // Log static asset 404s at debug level for troubleshooting
    logger.debug("Static asset not found", {
      path: req.path,
      method: req.method,
    });
  }

  res.status(404).json({
    success: false,
    message: "Route not found",
    path: req.path,
  });
};

Benefits:

• ✅ Cleaner logs - focus on real routing errors
• ✅ Static asset 404s still logged at debug level if needed
• ✅ Easier to identify genuine application issues

---

FIX #3: Add Fallback Image Middleware

Approach: Automatically serve placeholder for missing product images.

New Middleware (add to server.js):

// Fallback for missing product images
app.use('/assets/images/products', (req, res, next) => {
  const imagePath = path.join(baseDir, 'assets', 'images', 'products', req.path);
  
  // Check if requested image exists
  if (require('fs').existsSync(imagePath)) {
    return next(); // File exists, let express.static handle it
  }
  
  // File doesn't exist, serve placeholder
  const placeholderPath = path.join(baseDir, 'assets', 'images', 'products', 'placeholder.jpg');
  res.sendFile(placeholderPath);
});

app.use("/assets", express.static(path.join(baseDir, "assets")));

Benefits:

• ✅ Automatic fallback - no broken images
• ✅ Works even if symlinks aren't created
• ✅ Better user experience
• ✅ No database updates required

---

FIX #4: Database Cleanup Query (Optional)

Approach: Update database to use existing generic images.

SQL Query:

-- Update all products with missing images to use generic placeholders
UPDATE products 
SET imageurl = CASE 
  WHEN category = 'Stickers' THEN '/assets/images/stickers.jpg'
  WHEN category = 'Washi Tape' THEN '/assets/images/washi-tape.jpg'
  WHEN category = 'Journals' THEN '/assets/images/journals.jpg'
  ELSE '/assets/images/products/placeholder.jpg'
END
WHERE imageurl LIKE '/assets/images/products/%';

Benefits:

• ✅ Uses more relevant category images
• ✅ Matches existing assets
• ✅ Better visual consistency

---

🛡️ Safeguards to Prevent Recurrence

1. Image Validation Middleware

Add validation when products are created/updated:

// In routes/admin.js - Product creation/update
const validateProductImage = (req, res, next) => {
  const { imageurl } = req.body;
  
  if (imageurl && !imageurl.startsWith('/uploads/')) {
    // Only validate non-uploaded images
    const imagePath = path.join(baseDir, imageurl.replace(/^\//, ''));
    
    if (!fs.existsSync(imagePath)) {
      logger.warn('Product image does not exist', { imageurl });
      // Set to placeholder instead of rejecting
      req.body.imageurl = '/assets/images/products/placeholder.jpg';
    }
  }
  
  next();
};

2. Health Check Enhancement

Add image asset health to /health endpoint:

app.get("/health", async (req, res) => {
  const dbHealth = await healthCheck();
  
  // Check critical images exist
  const criticalImages = [
    '/assets/images/hero-image.jpg',
    '/assets/images/products/placeholder.jpg'
  ];
  
  const missingImages = criticalImages.filter(img => {
    const imagePath = path.join(baseDir, img);
    return !fs.existsSync(imagePath);
  });
  
  res.status(200).json({
    status: dbHealth.healthy && missingImages.length === 0 ? "ok" : "degraded",
    timestamp: new Date().toISOString(),
    uptime: process.uptime(),
    database: dbHealth,
    assets: {
      healthy: missingImages.length === 0,
      missingCritical: missingImages
    },
    memory: {
      used: Math.round(process.memoryUsage().heapUsed / 1024 / 1024),
      total: Math.round(process.memoryUsage().heapTotal / 1024 / 1024),
    },
  });
});

3. Pre-deployment Image Check Script

Create validation script:

#!/bin/bash
# check-assets.sh - Validate all referenced images exist

echo "🔍 Checking static assets..."

# Check HTML image references
echo "Checking HTML files..."
grep -roh 'src="[^"]*\.\(jpg\|png\|gif\|svg\)' website/public/*.html | \
  sed 's/src="//g' | \
  while read img; do
    if [ ! -f "website${img}" ]; then
      echo "❌ Missing: website${img}"
    fi
  done

# Check database image references
echo "Checking database products..."
psql -U skyartapp -d skyartshop -t -c "SELECT DISTINCT imageurl FROM products WHERE imageurl != '';" | \
  while read img; do
    img=$(echo $img | xargs) # trim whitespace
    if [ ! -f "website${img}" ]; then
      echo "❌ Missing: website${img}"
    fi
  done

echo "✅ Asset check complete"

4. Logging Configuration

Update Winston logger to use separate log levels:

// In config/logger.js
const logger = winston.createLogger({
  level: process.env.LOG_LEVEL || 'info', // Set to 'debug' for static asset 404s
  format: winston.format.combine(
    winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
    winston.format.errors({ stack: true }),
    winston.format.json()
  ),
  defaultMeta: { service: 'skyartshop' },
  transports: [
    new winston.transports.File({ 
      filename: 'logs/error.log', 
      level: 'error' 
    }),
    new winston.transports.File({ 
      filename: 'logs/combined.log',
      level: 'info'  // Won't include debug messages
    }),
    new winston.transports.File({ 
      filename: 'logs/debug.log',
      level: 'debug'  // Separate file for debug (including static 404s)
    }),
  ],
});

---

📊 Impact Assessment

Before Fixes

• ❌ 50+ 404 warnings per page load
• ❌ Broken images on frontend
• ❌ Polluted logs
• ❌ Poor user experience

After Fixes

• ✅ 0 static asset 404s
• ✅ All images display correctly
• ✅ Clean, readable logs
• ✅ Professional appearance
• ✅ Automatic fallbacks prevent future issues

---

🚀 Implementation Priority

Immediate (Do Now)

1. ✅ Create symbolic links for missing images (FIX #1)
2. ✅ Update notFoundHandler to reduce log noise (FIX #2)

Short-term (Next Session)

3. ⏳ Add fallback image middleware (FIX #3)
4. ⏳ Enhance health check with asset validation

Long-term (Future Enhancement)

5. ⏳ Create asset validation script
6. ⏳ Add image validation on product create/update
7. ⏳ Replace placeholder images with real product photos

---

📝 Conclusion

Root Cause: Application was deployed with incomplete static asset library. Frontend and database reference specific image files that don't exist in the filesystem.

Primary Fix: Create symbolic links mapping missing filenames to existing similar images. This eliminates 404 errors without requiring code or database changes.

Secondary Fix: Improve 404 logging to distinguish between API routing errors (important) and static asset 404s (less critical).

Prevention: Add middleware fallbacks, validation, and health checks to catch missing assets before they impact users.

Status: Ready to implement fixes immediately.