feat: implement unified logging system with LogRocket integration

MAJOR IMPROVEMENT: Replace all scattered console.log statements with a centralized, professional logging system.

New unified logger features:
- ✅ Consistent formatting with emojis and colors
- ✅ Multiple log levels (debug, info, warn, error, critical)
- ✅ Automatic LogRocket integration for production monitoring
- ✅ Context-aware logging (PAGE_SAVE, VERSION_SAVE, API, USER, etc.)
- ✅ Structured data logging for better debugging
- ✅ Works in both client and server environments

Applied to critical page saving flow:
- API endpoint (/api/pages PUT) - Complete request/response logging
- Version saving system - Detailed process tracking
- Client-side save function - User action and API call logging
- Error handling - Proper error categorization and reporting

This provides absolute simplicity while ensuring comprehensive monitoring and debugging capabilities. All logs go to both console (development) and LogRocket (production) automatically.

Author: sirjamesgray

app/api/pages/route.ts

@@ -7,6 +7,7 @@ import { NextRequest, NextResponse } from 'next/server';
 import { getUserIdFromRequest, createApiResponse, createErrorResponse } from '../auth-helper';
 import { getFirebaseAdmin } from '../../firebase/firebaseAdmin';
 import { getCollectionName } from '../../utils/environmentConfig';
+import logger from '../../utils/unifiedLogger';
 
 interface PageData {
   id?: string;
@@ -314,42 +315,81 @@ export async function POST(request: NextRequest) {
 
 // PUT endpoint - Update an existing page
 export async function PUT(request: NextRequest) {
+  logger.apiRequest('PUT', '/api/pages');
+
   try {
+    logger.debug('Initializing Firebase Admin', undefined, 'PAGE_SAVE');
     const admin = getFirebaseAdmin();
     const db = admin.firestore();
 
+    logger.debug('Getting authenticated user', undefined, 'PAGE_SAVE');
     const currentUserId = await getUserIdFromRequest(request);
+
     if (!currentUserId) {
-      console.error('🔴 Page save failed: No authenticated user found');
-      console.error('🔴 Request headers:', Object.fromEntries(request.headers.entries()));
-      console.error('🔴 Request cookies:', request.cookies.getAll());
+      logger.error('Authentication failed - no user found', {
+        headers: Object.fromEntries(request.headers.entries()),
+        cookies: request.cookies.getAll()
+      }, 'PAGE_SAVE');
       return createErrorResponse('UNAUTHORIZED', 'Authentication required. Please log in again.');
     }
 
+    logger.debug('Parsing request body', undefined, 'PAGE_SAVE');
     const body = await request.json();
     const { id, title, content, location, groupId, customDate } = body;
 
+    logger.info('Page save request', {
+      pageId: id,
+      title: title ? `"${title}"` : 'undefined',
+      hasContent: !!content,
+      contentLength: content ? JSON.stringify(content).length : 0,
+      hasLocation: !!location,
+      groupId,
+      customDate,
+      userId: currentUserId
+    }, 'PAGE_SAVE');
+
     if (!id) {
+      logger.error('No page ID provided', undefined, 'PAGE_SAVE');
       return createErrorResponse('BAD_REQUEST', 'Page ID is required');
     }
 
+    logger.debug('Loading page document', {
+      collection: getCollectionName('pages'),
+      pageId: id
+    }, 'PAGE_SAVE');
+
     // Get the existing page
     const pageRef = db.collection(getCollectionName('pages')).doc(id);
     const pageDoc = await pageRef.get();
 
+    logger.debug('Page document loaded', { exists: pageDoc.exists }, 'PAGE_SAVE');
+
     if (!pageDoc.exists) {
+      logger.error('Page not found', { pageId: id }, 'PAGE_SAVE');
       return createErrorResponse('NOT_FOUND', 'Page not found');
     }
 
     const pageData = pageDoc.data();
+    logger.debug('Page data loaded', {
+      userId: pageData.userId,
+      title: pageData.title,
+      hasContent: !!pageData.content,
+      lastModified: pageData.lastModified,
+      deleted: pageData.deleted
+    }, 'PAGE_SAVE');
 
     // Check ownership
     if (pageData.userId !== currentUserId) {
+      logger.error('Permission denied - user does not own page', {
+        pageUserId: pageData.userId,
+        currentUserId: currentUserId
+      }, 'PAGE_SAVE');
       return createErrorResponse('FORBIDDEN', 'You can only edit your own pages');
     }
 
     // Check if page is deleted
     if (pageData.deleted) {
+      logger.error('Cannot edit deleted page', { pageId: id }, 'PAGE_SAVE');
       return createErrorResponse('BAD_REQUEST', 'Cannot edit deleted pages');
     }
 
@@ -383,9 +423,10 @@ export async function PUT(request: NextRequest) {
 
     // If content is being updated, use the version saving system to create activity records
     if (content !== undefined) {
-      console.log('🔍 Content update detected, using version saving system for activity tracking');
+      logger.info('Content update detected - using version saving system', { pageId: id }, 'PAGE_SAVE');
 
       // Get current user data for version saving
+      logger.debug('Loading user profile for version save', { userId: currentUserId }, 'PAGE_SAVE');
       const { getUserProfile } = await import('../../firebase/database/users');
       const currentUser = await getUserProfile(currentUserId);
 
@@ -400,14 +441,30 @@ export async function PUT(request: NextRequest) {
         groupId: groupId
       };
 
+      logger.debug('Calling saveNewVersion', {
+        pageId: id,
+        username: versionData.username,
+        hasContent: !!content,
+        contentLength: JSON.stringify(content).length
+      }, 'PAGE_SAVE');
+
       // Save new version (this creates activity records and updates lastDiff)
       const versionResult = await saveNewVersion(id, versionData);
 
       if (!versionResult || !versionResult.success) {
-        console.error('Failed to save version:', versionResult?.error || 'Version save returned null');
+        logger.error('Version save failed', {
+          pageId: id,
+          error: versionResult?.error || 'Version save returned null',
+          versionResult
+        }, 'PAGE_SAVE');
         return createErrorResponse('INTERNAL_ERROR', 'Failed to save page version');
       }
 
+      logger.info('Version saved successfully', {
+        pageId: id,
+        versionId: versionResult?.versionId
+      }, 'PAGE_SAVE');
+
       // Update any additional metadata (title, location) that wasn't handled by saveNewVersion
       const metadataUpdate: any = {};
       if (title !== undefined) {
@@ -483,20 +540,24 @@ export async function PUT(request: NextRequest) {
       }
     }
 
+    logger.info('Page save completed successfully', {
+      pageId: id,
+      updateFields: Object.keys(updateData)
+    }, 'PAGE_SAVE');
+
     return createApiResponse({
       id,
       ...updateData,
       message: 'Page updated successfully'
     });
 
   } catch (error: any) {
-    console.error('Error updating page:', error);
-    console.error('Error details:', {
-      message: error.message,
+    logger.critical('Page save failed with error', {
+      error: error.message,
       stack: error.stack,
       name: error.name,
-      pageId: body.id
-    });
+      pageId: body?.id
+    }, 'PAGE_SAVE');
 
     // Don't expose internal errors that might cause session issues
     const userMessage = error.message?.includes('permission') || error.message?.includes('auth')

app/components/pages/PageView.tsx

@@ -13,7 +13,7 @@ import { TextSelectionProvider } from "../../providers/TextSelectionProvider";
 import { PageProvider } from "../../contexts/PageContext";
 import { useRecentPages } from "../../contexts/RecentPagesContext";
 import { useLineSettings } from "../../contexts/LineSettingsContext";
-import { createLogger } from '../../utils/logger';
+import logger from '../../utils/unifiedLogger';
 
 // UI Components
 import PublicLayout from "../layout/PublicLayout";
@@ -620,22 +620,22 @@ export default function PageView({
   // No need for handleSetIsEditing - always in edit mode
 
   const handleSave = useCallback(async () => {
-    console.log('🚨 SAVE DEBUG: handleSave called', { pageId, hasPage: !!page, title });
+    logger.userAction('Page save initiated', { pageId, hasPage: !!page, title });
 
     if (!page || !pageId) {
-      console.log('🚨 SAVE DEBUG: Early return - no page or pageId');
+      logger.warn('Save aborted - no page or pageId', { pageId, hasPage: !!page });
       return;
     }
 
     // Validate title is not empty
     if (!title || title.trim() === '') {
-      console.log('🚨 SAVE DEBUG: Early return - no title');
+      logger.warn('Save aborted - no title provided', { pageId });
       setTitleError("Title is required");
       setError("Please add a title before saving");
       return;
     }
 
-    console.log('🚨 SAVE DEBUG: Starting save process...');
+    logger.info('Starting page save process', { pageId, title });
     setIsSaving(true);
     setError(null);
     setTitleError(null);
@@ -653,7 +653,12 @@ export default function PageView({
         customDate: customDate
       };
 
-      console.log('🚨 SAVE DEBUG: Calling API route with data:', { ...updateData, content: '(content omitted)' });
+      logger.apiRequest('PUT', '/api/pages', {
+        pageId: id,
+        title,
+        hasContent: !!content,
+        contentLength: editorStateJSON.length
+      });
 
       const response = await fetch('/api/pages', {
         method: 'PUT',
@@ -665,7 +670,7 @@ export default function PageView({
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        console.error('🚨 SAVE DEBUG: API error response:', errorData);
+        logger.apiResponse('PUT', '/api/pages', response.status, errorData);
 
         // Handle authentication errors specifically
         if (response.status === 401) {
@@ -677,7 +682,7 @@ export default function PageView({
       }
 
       const result = await response.json();
-      console.log('🚨 SAVE DEBUG: API response:', result);
+      logger.apiResponse('PUT', '/api/pages', response.status, result);
 
       if (!result.success) {
         throw new Error(result.message || 'Failed to update page');
@@ -710,7 +715,7 @@ export default function PageView({
       }
 
       // Clear unsaved changes flag and stay in always-editable mode
-      console.log('🚨 SAVE DEBUG: Save successful, clearing unsaved changes flag');
+      logger.pageSave(pageId, true, { title });
       setHasUnsavedChanges(false);
       setError(null);
 
@@ -721,7 +726,7 @@ export default function PageView({
       // Page data should already be updated after save
       // No need to reload since the save operation updates the page state
     } catch (error) {
-      console.error("Error saving page:", error);
+      logger.pageSave(pageId, false, { error: error.message, title });
       setError("Failed to save page. Please try again.");
     } finally {
       setIsSaving(false);

app/firebase/database/versions.ts

@@ -17,6 +17,7 @@ import { extractLinksFromNodes } from "./links";
 import { recordUserActivity } from "../streaks";
 import { hasContentChangedSync } from "../../utils/diffService";
 import { getCollectionName } from "../../utils/environmentConfig";
+import logger from "../../utils/unifiedLogger";
 
 import type { PageVersion } from "../../types/database";
 
@@ -290,13 +291,16 @@ await setDoc(doc(db, getCollectionName("pages"), pageId), {
  */
 export const saveNewVersion = async (pageId: string, data: any): Promise<any> => {
   try {
-    console.log('🚨 ACTIVITY DEBUG: saveNewVersion called with pageId:', pageId);
-    console.log('🚨 ACTIVITY DEBUG: saveNewVersion data:', { ...data, content: '(content omitted)' });
-    console.log('🚨 ACTIVITY DEBUG: Starting version save process...');
+    logger.info('Starting version save process', {
+      pageId,
+      userId: data.userId,
+      username: data.username,
+      hasContent: !!data.content
+    }, 'VERSION_SAVE');
 
     // Validate content to prevent saving empty versions
     if (!data.content) {
-      console.error("Cannot save empty content");
+      logger.error("Cannot save empty content", { pageId }, 'VERSION_SAVE');
       return null;
     }