@stevederico/skateboard-ui 1.1.1 → 1.1.2

package/App.jsx

@@ -18,7 +18,8 @@ import PaymentView from './PaymentView.jsx';
 import SettingsView from './SettingsView.jsx';
 import NotFound from './NotFound.jsx';
 import ProtectedRoute from './ProtectedRoute.jsx';
-import { useAppSetup, initializeUtilities } from './Utilities.js';
+import ErrorBoundary from './ErrorBoundary.jsx';
+import { useAppSetup, initializeUtilities, validateConstants } from './Utilities.js';
 import { ContextProvider, getState } from './Context.jsx';
 
 function App({ constants, appRoutes, defaultRoute }) {
@@ -59,6 +60,9 @@ function App({ constants, appRoutes, defaultRoute }) {
 }
 
 export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', wrapper: Wrapper }) {
+  // Validate constants before initialization
+  validateConstants(constants);
+
   // Initialize utilities with constants
   initializeUtilities(constants);
 
@@ -66,18 +70,20 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
   const root = createRoot(container);
 
   root.render(
-    <ContextProvider constants={constants}>
-      {Wrapper ? (
-        <Wrapper>
+    <ErrorBoundary>
+      <ContextProvider constants={constants}>
+        {Wrapper ? (
+          <Wrapper>
+            <Router>
+              <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} />
+            </Router>
+          </Wrapper>
+        ) : (
           <Router>
             <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} />
           </Router>
-        </Wrapper>
-      ) : (
-        <Router>
-          <App constants={constants} appRoutes={appRoutes} defaultRoute={defaultRoute} />
-        </Router>
-      )}
-    </ContextProvider>
+        )}
+      </ContextProvider>
+    </ErrorBoundary>
   );
 }

package/Context.jsx

@@ -2,19 +2,74 @@ import React, { createContext, useContext, useReducer } from 'react';
 
 const context = createContext();
 
+// Check if localStorage is available
+function isLocalStorageAvailable() {
+  try {
+    const test = '__storage_test__';
+    localStorage.setItem(test, test);
+    localStorage.removeItem(test);
+    return true;
+  } catch (e) {
+    console.warn('localStorage not available:', e.message);
+    return false;
+  }
+}
+
+// Safe localStorage operations for Context
+function safeLSSetItem(key, value) {
+  if (!isLocalStorageAvailable()) {
+    console.warn(`Could not save to localStorage: ${key}`);
+    return false;
+  }
+  try {
+    localStorage.setItem(key, value);
+    return true;
+  } catch (error) {
+    console.error('localStorage setItem error:', error.message);
+    return false;
+  }
+}
+
+function safeLSGetItem(key) {
+  if (!isLocalStorageAvailable()) return null;
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    console.error('localStorage getItem error:', error.message);
+    return null;
+  }
+}
+
+function safeLSRemoveItem(key) {
+  if (!isLocalStorageAvailable()) return false;
+  try {
+    localStorage.removeItem(key);
+    return true;
+  } catch (error) {
+    console.error('localStorage removeItem error:', error.message);
+    return false;
+  }
+}
+
 export function ContextProvider({ children, constants }) {
   const getStorageKey = () => {
     const appName = constants.appName || 'skateboard';
     return `${appName.toLowerCase().replace(/\s+/g, '-')}_user`;
   };
 
+  const getCSRFKey = () => {
+    const appName = constants.appName || 'skateboard';
+    return `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
+  };
+
   const getInitialUser = () => {
     try {
       const storageKey = getStorageKey();
-      const storedUser = localStorage.getItem(storageKey);
+      const storedUser = safeLSGetItem(storageKey);
       if (!storedUser || storedUser === "undefined") return null;
       return JSON.parse(storedUser);
     } catch (e) {
+      console.error('Error parsing user data:', e.message);
       return null;
     }
   };
@@ -22,24 +77,29 @@ export function ContextProvider({ children, constants }) {
   const initialState = { user: getInitialUser() };
 
   function reducer(state, action) {
-    try {
-      const storageKey = getStorageKey();
-      const appName = constants.appName || 'skateboard';
-      const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
-
-      switch (action.type) {
-        case 'SET_USER':
-          localStorage.setItem(storageKey, JSON.stringify(action.payload));
-          return { ...state, user: action.payload };
-        case 'CLEAR_USER':
-          localStorage.removeItem(storageKey);
-          localStorage.removeItem(csrfKey);
-          return { ...state, user: null };
-        default:
-          return state;
+    const storageKey = getStorageKey();
+    const csrfKey = getCSRFKey();
+
+    switch (action.type) {
+      case 'SET_USER': {
+        try {
+          const success = safeLSSetItem(storageKey, JSON.stringify(action.payload));
+          if (!success) {
+            console.error('Failed to persist user data to localStorage');
+          }
+        } catch (error) {
+          console.error('Error setting user:', error.message);
+        }
+        return { ...state, user: action.payload };
       }
-    } catch (e) {
-      return state;
+      case 'CLEAR_USER': {
+        // Clean up both user and CSRF token
+        safeLSRemoveItem(storageKey);
+        safeLSRemoveItem(csrfKey);
+        return { ...state, user: null };
+      }
+      default:
+        return state;
     }
   }
 

package/ErrorBoundary.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  componentDidMount() {
+    // Handle unhandled promise rejections (async errors)
+    const handleUnhandledRejection = (event) => {
+      console.error('Unhandled promise rejection:', event.reason);
+      this.setState({
+        hasError: true,
+        error: new Error(`Async Error: ${event.reason?.message || String(event.reason)}`)
+      });
+    };
+
+    // Handle errors in event handlers and other non-React contexts
+    const handleError = (event) => {
+      if (event.error && !(this.state.hasError)) {
+        console.error('Global error:', event.error);
+        this.setState({ hasError: true, error: event.error });
+      }
+    };
+
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+    window.addEventListener('error', handleError);
+
+    this.unsubscribeRejection = () => {
+      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+    };
+    this.unsubscribeError = () => {
+      window.removeEventListener('error', handleError);
+    };
+  }
+
+  componentWillUnmount() {
+    if (this.unsubscribeRejection) this.unsubscribeRejection();
+    if (this.unsubscribeError) this.unsubscribeError();
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center w-full h-screen bg-background">
+          <div className="text-center max-w-md">
+            <h1 className="text-2xl font-bold mb-4">Something went wrong</h1>
+            <p className="text-muted-foreground mb-4 break-words">{this.state.error?.message || 'Unknown error'}</p>
+            <div className="flex gap-2 justify-center">
+              <button
+                onClick={() => this.setState({ hasError: false, error: null })}
+                className="px-4 py-2 bg-accent text-accent-foreground rounded-md hover:bg-accent/90"
+              >
+                Try Again
+              </button>
+              <button
+                onClick={() => window.location.reload()}
+                className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
+              >
+                Reload Page
+              </button>
+            </div>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

package/Layout.jsx

@@ -9,19 +9,35 @@ export default function Layout({ children }) {
 
   useEffect(() => {
     const root = document.documentElement;
-    let theme = localStorage.getItem('theme');
+    let theme;
+
+    // Safely get theme from localStorage
+    try {
+      theme = localStorage.getItem('theme');
+    } catch (error) {
+      console.warn('Could not read theme from localStorage:', error.message);
+      theme = null;
+    }
+
     const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    
+
     if (!theme) {
       theme = systemPrefersDark ? 'dark' : 'light';
     }
-    
+
     if (theme === 'dark') {
       root.classList.add('dark');
     } else {
       root.classList.remove('dark');
     }
-    localStorage.setItem('theme', theme);
+
+    // Safely save theme to localStorage
+    try {
+      localStorage.setItem('theme', theme);
+    } catch (error) {
+      console.warn('Could not save theme to localStorage:', error.message);
+      // Theme will still be applied visually even if not persisted
+    }
   }, []);
 
   return (

package/SignInView.jsx

@@ -24,7 +24,7 @@ import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getState } from './Context.jsx';
 import constants from "@/constants.json";
-import { getBackendURL } from './Utilities'
+import { getBackendURL, getAppKey } from './Utilities'
 
 export default function LoginForm({
   className,
@@ -64,16 +64,34 @@ export default function LoginForm({
         const data = await response.json();
         // Store CSRF token in localStorage with app-specific key
         if (data.csrfToken) {
-          const appName = constants.appName || 'skateboard';
-          const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
-          localStorage.setItem(csrfKey, data.csrfToken);
+          const csrfKey = getAppKey('csrf');
+          try {
+            localStorage.setItem(csrfKey, data.csrfToken);
+          } catch (storageError) {
+            console.error('Failed to store CSRF token:', storageError.message);
+            // Continue even if storage fails
+          }
         }
         dispatch({ type: 'SET_USER', payload: data });
         navigate('/app');
       } else {
+        // Clean up stale CSRF token on failed sign-in
+        try {
+          const csrfKey = getAppKey('csrf');
+          localStorage.removeItem(csrfKey);
+        } catch (cleanupError) {
+          console.warn('Could not clean up CSRF token:', cleanupError.message);
+        }
         setErrorMessage('Invalid Credentials');
       }
     } catch (error) {
+      // Clean up stale CSRF token on error
+      try {
+        const csrfKey = getAppKey('csrf');
+        localStorage.removeItem(csrfKey);
+      } catch (cleanupError) {
+        console.warn('Could not clean up CSRF token:', cleanupError.message);
+      }
       setErrorMessage('Server Error');
     } finally {
       setIsSubmitting(false);

package/Utilities.js

@@ -3,6 +3,63 @@ import { useEffect, useState } from 'react';
 // Constants will be initialized by the app shell
 let _constants = null;
 
+// Check if localStorage is available (respects private mode, etc.)
+let _localStorageAvailable = null;
+function isLocalStorageAvailable() {
+    if (_localStorageAvailable !== null) return _localStorageAvailable;
+    try {
+        const test = '__storage_test__';
+        localStorage.setItem(test, test);
+        localStorage.removeItem(test);
+        _localStorageAvailable = true;
+        return true;
+    } catch (e) {
+        console.warn('localStorage not available (private mode or quota exceeded):', e.message);
+        _localStorageAvailable = false;
+        return false;
+    }
+}
+
+// Safe localStorage wrapper with error handling
+function safeSetItem(key, value) {
+    if (!isLocalStorageAvailable()) {
+        console.warn(`Could not save to localStorage: ${key} (storage unavailable)`);
+        return false;
+    }
+    try {
+        localStorage.setItem(key, value);
+        return true;
+    } catch (error) {
+        if (error.name === 'QuotaExceededError') {
+            console.error('localStorage quota exceeded - data not persisted');
+        } else {
+            console.error('localStorage setItem error:', error.message);
+        }
+        return false;
+    }
+}
+
+function safeGetItem(key) {
+    if (!isLocalStorageAvailable()) return null;
+    try {
+        return localStorage.getItem(key);
+    } catch (error) {
+        console.error('localStorage getItem error:', error.message);
+        return null;
+    }
+}
+
+function safeRemoveItem(key) {
+    if (!isLocalStorageAvailable()) return false;
+    try {
+        localStorage.removeItem(key);
+        return true;
+    } catch (error) {
+        console.error('localStorage removeItem error:', error.message);
+        return false;
+    }
+}
+
 export function initializeUtilities(constants) {
     _constants = constants;
 }
@@ -31,7 +88,7 @@ export function getCookie(name) {
 export function getCSRFToken() {
     const appName = getConstants().appName || 'skateboard';
     const csrfKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_csrf`;
-    return localStorage.getItem(csrfKey);
+    return safeGetItem(csrfKey);
 }
 
 export function getAppKey(suffix) {
@@ -44,7 +101,7 @@ export function isAuthenticated() {
         return true;
     }
     const csrfKey = getAppKey('csrf');
-    return Boolean(localStorage.getItem(csrfKey));
+    return Boolean(safeGetItem(csrfKey));
 }
 
 export function getBackendURL() {
@@ -143,9 +200,7 @@ export async function showManage(stripeID) {
             const data = await response.json();
             console.log("/portal response: ", data);
             if (data.url) {
-
-                localStorage.setItem(getAppKey("beforeManageURL"), window.location.href);
-
+                safeSetItem(getAppKey("beforeManageURL"), window.location.href);
                 window.location.href = data.url; // Redirect to Stripe billing portal
             } else {
                 console.error("No URL returned from server");
@@ -182,7 +237,7 @@ export async function showCheckout(email, productIndex = 0) {
             const data = await response.json();
             if (data.url) {
                 // Save the current URL in localStorage before redirecting
-                localStorage.setItem(getAppKey("beforeCheckoutURL"), window.location.href);
+                safeSetItem(getAppKey("beforeCheckoutURL"), window.location.href);
                 // Redirect to payment checkout
                 window.location.href = data.url;
                 return true;
@@ -274,13 +329,18 @@ export async function showUpgradeSheet(upgradeSheetRef) {
     // Check subscription from user data in localStorage instead of API call
     const appName = getConstants().appName || 'skateboard';
     const storageKey = `${appName.toLowerCase().replace(/\s+/g, '-')}_user`;
-    const storedUser = localStorage.getItem(storageKey);
+    const storedUser = safeGetItem(storageKey);
 
     let subscriber = false;
     if (storedUser && storedUser !== "undefined") {
-        const user = JSON.parse(storedUser);
-        subscriber = user?.subscription?.status === 'active' &&
-            (!user?.subscription?.expires || user?.subscription?.expires > Math.floor(Date.now() / 1000));
+        try {
+            const user = JSON.parse(storedUser);
+            subscriber = user?.subscription?.status === 'active' &&
+                (!user?.subscription?.expires || user?.subscription?.expires > Math.floor(Date.now() / 1000));
+        } catch (error) {
+            console.error('Error parsing user data from storage:', error.message);
+            subscriber = false;
+        }
     }
 
     if (subscriber) {
@@ -421,15 +481,20 @@ export async function apiRequest(endpoint, options = {}) {
         (options.method || 'GET').toUpperCase()
     );
 
-    const response = await fetch(`${getBackendURL()}${endpoint}`, {
-        ...options,
-        credentials: 'include',
-        headers: {
-            'Content-Type': 'application/json',
-            ...(needsCSRF && csrfToken && { 'X-CSRF-Token': csrfToken }),
-            ...options.headers
-        }
-    });
+    let response;
+    try {
+        response = await fetch(`${getBackendURL()}${endpoint}`, {
+            ...options,
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+                ...(needsCSRF && csrfToken && { 'X-CSRF-Token': csrfToken }),
+                ...options.headers
+            }
+        });
+    } catch (error) {
+        throw new Error(`Network error: ${error.message}`);
+    }
 
     // Handle 401 (redirect to signout)
     if (response.status === 401) {
@@ -442,7 +507,12 @@ export async function apiRequest(endpoint, options = {}) {
         throw new Error(`Request failed: ${response.status} ${response.statusText}`);
     }
 
-    return response.json();
+    // Parse JSON with error handling
+    try {
+        return await response.json();
+    } catch (error) {
+        throw new Error(`Invalid JSON response from server: ${error.message}`);
+    }
 }
 
 /**
@@ -462,33 +532,41 @@ export async function apiRequestWithParams(endpoint, params = {}, options = {})
 // ===== CONSTANTS VALIDATION =====
 
 /**
- * Validate constants.json has all required fields
+ * Validate constants.json has all required fields with proper values
  * @param {object} constants - Constants object to validate
  * @returns {object} - Same constants if valid
- * @throws {Error} - If required fields are missing
+ * @throws {Error} - If required fields are missing or invalid
  */
 export function validateConstants(constants) {
     const required = [
-        'appName',
-        'appIcon',
-        'tagline',
-        'cta',
-        'backendURL',
-        'devBackendURL',
-        'features.title',
-        'features.items',
-        'companyName',
-        'companyWebsite',
-        'companyEmail',
+        { key: 'appName', type: 'string' },
+        { key: 'appIcon', type: 'string' },
+        { key: 'tagline', type: 'string' },
+        { key: 'cta', type: 'string' },
+        { key: 'backendURL', type: 'string' },
+        { key: 'devBackendURL', type: 'string' },
+        { key: 'features.title', type: 'string' },
+        { key: 'features.items', type: 'array' },
+        { key: 'companyName', type: 'string' },
+        { key: 'companyWebsite', type: 'string' },
+        { key: 'companyEmail', type: 'string' },
     ];
 
-    const missing = required.filter(key => {
+    const errors = required.filter(({ key, type }) => {
         const value = key.split('.').reduce((obj, k) => obj?.[k], constants);
+
+        if (type === 'string') {
+            // Must be non-empty string
+            return !value || typeof value !== 'string' || value.trim().length === 0;
+        } else if (type === 'array') {
+            // Must be non-empty array
+            return !Array.isArray(value) || value.length === 0;
+        }
         return !value;
-    });
+    }).map(({ key }) => key);
 
-    if (missing.length > 0) {
-        throw new Error(`Missing required constants: ${missing.join(', ')}`);
+    if (errors.length > 0) {
+        throw new Error(`Invalid constants configuration: ${errors.join(', ')} (must be non-empty strings/arrays)`);
     }
 
     return constants;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "exports": {
     "./AppSidebar": {
@@ -12,6 +12,10 @@
       "import": "./DynamicIcon.jsx",
       "default": "./DynamicIcon.jsx"
     },
+    "./ErrorBoundary": {
+      "import": "./ErrorBoundary.jsx",
+      "default": "./ErrorBoundary.jsx"
+    },
     "./Header": {
       "import": "./Header.jsx",
       "default": "./Header.jsx"