![\"TailPanel](\"screenshots/tailpanel.png\")
\n ![\"Admindek](\"screenshots/admindek.png\")
\n ![\"Adminty](\"screenshots/adminty.png\")
\n ![\"ArchitectUI](\"screenshots/architectui.png\")
\n ![\"Kero](\"screenshots/kero.png\")
\n ![\"Cryptocurrency](\"screenshots/cryptocurrency.png\")
\n \n \n \n
\n\n\n
\n\n
\n\n
\n
\n
\n
\n
\n\n \n \n\n
\n \n\n\n
\n \n \n \n API Integration Guide\n \n \n
\n \n\nLearn how to integrate Gentelella Admin Template with backend APIs and external services
\n\n \n \n Table of contents\n \n \n
\n \n\n- \n
- REST API Integration
- \n
- HTTP Client Setup
- \n
- Axios Configuration \n
\n - API Service Layer \n \n
\n - HTTP Client Setup
- Real-time Integration \n \n
- Data Management
- \n
- State Management \n
- Data Caching \n
\n - Authentication Integration
- \n
- JWT Token Management \n
\n - Error Handling
- \n
- Global Error Handler \n
\n - Performance Optimization
- \n
- Request Batching \n
\n - Next Steps \n
\n
\n \n \n REST API Integration\n \n \n
\n \n\n \n \n HTTP Client Setup\n \n \n
\n \n\n \n \n Axios Configuration\n \n \n
\n \n\n// src/js/api/http-client.js\nimport axios from 'axios';\n\nclass HttpClient {\n constructor() {\n this.client = axios.create({\n baseURL: import.meta.env.VITE_API_URL || 'http://localhost:8080/api',\n timeout: 10000,\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n }\n });\n \n this.setupInterceptors();\n }\n \n setupInterceptors() {\n // Request interceptor - add auth token\n this.client.interceptors.request.use(\n (config) => {\n const token = localStorage.getItem('auth_token');\n if (token) {\n config.headers.Authorization = `Bearer ${token}`;\n }\n return config;\n },\n (error) => Promise.reject(error)\n );\n \n // Response interceptor - handle errors\n this.client.interceptors.response.use(\n (response) => response.data,\n (error) => {\n if (error.response?.status === 401) {\n this.handleUnauthorized();\n }\n return Promise.reject(this.formatError(error));\n }\n );\n }\n \n handleUnauthorized() {\n localStorage.removeItem('auth_token');\n localStorage.removeItem('user_data');\n window.location.href = '/login.html';\n }\n \n formatError(error) {\n if (error.response) {\n return {\n message: error.response.data?.message || 'Server error',\n status: error.response.status,\n data: error.response.data\n };\n } else if (error.request) {\n return {\n message: 'Network error - please check your connection',\n status: 0\n };\n } else {\n return {\n message: error.message || 'Unknown error occurred',\n status: -1\n };\n }\n }\n \n // HTTP methods\n get(url, config = {}) {\n return this.client.get(url, config);\n }\n \n post(url, data = {}, config = {}) {\n return this.client.post(url, data, config);\n }\n \n put(url, data = {}, config = {}) {\n return this.client.put(url, data, config);\n }\n \n patch(url, data = {}, config = {}) {\n return this.client.patch(url, data, config);\n }\n \n delete(url, config = {}) {\n return this.client.delete(url, config);\n }\n \n // File upload\n upload(url, file, onProgress = null) {\n const formData = new FormData();\n formData.append('file', file);\n \n return this.client.post(url, formData, {\n headers: {\n 'Content-Type': 'multipart/form-data'\n },\n onUploadProgress: (progressEvent) => {\n if (onProgress) {\n const progress = Math.round(\n (progressEvent.loaded * 100) / progressEvent.total\n );\n onProgress(progress);\n }\n }\n });\n }\n}\n\n// Create singleton instance\nexport const httpClient = new HttpClient();\n\n \n \n API Service Layer\n \n \n
\n \n\n \n \n Base Service Class\n \n \n
\n \n\n// src/js/api/base-service.js\nimport { httpClient } from './http-client.js';\n\nexport class BaseService {\n constructor(endpoint) {\n this.endpoint = endpoint;\n this.http = httpClient;\n }\n \n async getAll(params = {}) {\n try {\n const response = await this.http.get(this.endpoint, { params });\n return {\n success: true,\n data: response.data,\n meta: response.meta\n };\n } catch (error) {\n return {\n success: false,\n error: error.message,\n details: error\n };\n }\n }\n \n async getById(id) {\n try {\n const response = await this.http.get(`${this.endpoint}/${id}`);\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message,\n details: error\n };\n }\n }\n \n async create(data) {\n try {\n const response = await this.http.post(this.endpoint, data);\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message,\n details: error\n };\n }\n }\n \n async update(id, data) {\n try {\n const response = await this.http.put(`${this.endpoint}/${id}`, data);\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message,\n details: error\n };\n }\n }\n \n async delete(id) {\n try {\n await this.http.delete(`${this.endpoint}/${id}`);\n return {\n success: true\n };\n } catch (error) {\n return {\n success: false,\n error: error.message,\n details: error\n };\n }\n }\n \n async search(query, params = {}) {\n try {\n const response = await this.http.get(`${this.endpoint}/search`, {\n params: { q: query, ...params }\n });\n return {\n success: true,\n data: response.data,\n meta: response.meta\n };\n } catch (error) {\n return {\n success: false,\n error: error.message,\n details: error\n };\n }\n }\n}\n\n \n \n Specific Service Classes\n \n \n
\n \n\n// src/js/api/user-service.js\nimport { BaseService } from './base-service.js';\n\nclass UserService extends BaseService {\n constructor() {\n super('/users');\n }\n \n async authenticate(credentials) {\n try {\n const response = await this.http.post('/auth/login', credentials);\n \n // Store auth token\n if (response.token) {\n localStorage.setItem('auth_token', response.token);\n localStorage.setItem('user_data', JSON.stringify(response.user));\n }\n \n return {\n success: true,\n data: response\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n \n async logout() {\n try {\n await this.http.post('/auth/logout');\n } catch (error) {\n console.warn('Logout API call failed:', error.message);\n } finally {\n localStorage.removeItem('auth_token');\n localStorage.removeItem('user_data');\n window.location.href = '/login.html';\n }\n }\n \n async getCurrentUser() {\n try {\n const response = await this.http.get('/auth/me');\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n \n async updateProfile(data) {\n try {\n const response = await this.http.put('/auth/profile', data);\n \n // Update stored user data\n localStorage.setItem('user_data', JSON.stringify(response.data));\n \n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n \n async changePassword(passwordData) {\n try {\n const response = await this.http.post('/auth/change-password', passwordData);\n return {\n success: true,\n data: response\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n \n async uploadAvatar(file, onProgress) {\n try {\n const response = await this.http.upload('/auth/avatar', file, onProgress);\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n}\n\nexport const userService = new UserService();\n\n// src/js/api/dashboard-service.js\nimport { BaseService } from './base-service.js';\n\nclass DashboardService extends BaseService {\n constructor() {\n super('/dashboard');\n }\n \n async getStats(dateRange = '30d') {\n try {\n const response = await this.http.get('/dashboard/stats', {\n params: { range: dateRange }\n });\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n \n async getChartData(chartType, params = {}) {\n try {\n const response = await this.http.get(`/dashboard/charts/${chartType}`, {\n params\n });\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n \n async getRecentActivity(limit = 10) {\n try {\n const response = await this.http.get('/dashboard/activity', {\n params: { limit }\n });\n return {\n success: true,\n data: response.data\n };\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n}\n\nexport const dashboardService = new DashboardService();\n\n
\n \n \n Real-time Integration\n \n \n
\n \n\n \n \n WebSocket Connection\n \n \n
\n \n\n// src/js/api/websocket-client.js\nclass WebSocketClient {\n constructor() {\n this.ws = null;\n this.reconnectAttempts = 0;\n this.maxReconnectAttempts = 5;\n this.reconnectDelay = 1000;\n this.listeners = new Map();\n this.isConnected = false;\n }\n \n connect() {\n const wsUrl = import.meta.env.VITE_WS_URL || 'ws://localhost:8080/ws';\n const token = localStorage.getItem('auth_token');\n \n this.ws = new WebSocket(`${wsUrl}?token=${token}`);\n \n this.ws.onopen = () => {\n console.log('WebSocket connected');\n this.isConnected = true;\n this.reconnectAttempts = 0;\n this.emit('connected');\n };\n \n this.ws.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data);\n this.handleMessage(message);\n } catch (error) {\n console.error('Failed to parse WebSocket message:', error);\n }\n };\n \n this.ws.onclose = () => {\n console.log('WebSocket disconnected');\n this.isConnected = false;\n this.emit('disconnected');\n this.reconnect();\n };\n \n this.ws.onerror = (error) => {\n console.error('WebSocket error:', error);\n this.emit('error', error);\n };\n }\n \n reconnect() {\n if (this.reconnectAttempts >= this.maxReconnectAttempts) {\n console.error('Max reconnection attempts reached');\n return;\n }\n \n this.reconnectAttempts++;\n const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);\n \n console.log(`Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts})`);\n \n setTimeout(() => {\n this.connect();\n }, delay);\n }\n \n handleMessage(message) {\n const { type, data } = message;\n this.emit(type, data);\n }\n \n send(type, data = {}) {\n if (!this.isConnected) {\n console.warn('WebSocket not connected');\n return false;\n }\n \n const message = JSON.stringify({ type, data });\n this.ws.send(message);\n return true;\n }\n \n on(event, callback) {\n if (!this.listeners.has(event)) {\n this.listeners.set(event, []);\n }\n this.listeners.get(event).push(callback);\n }\n \n off(event, callback) {\n if (!this.listeners.has(event)) return;\n \n const callbacks = this.listeners.get(event);\n const index = callbacks.indexOf(callback);\n \n if (index > -1) {\n callbacks.splice(index, 1);\n }\n }\n \n emit(event, data) {\n if (!this.listeners.has(event)) return;\n \n this.listeners.get(event).forEach(callback => {\n try {\n callback(data);\n } catch (error) {\n console.error(`Error in WebSocket event handler for ${event}:`, error);\n }\n });\n }\n \n disconnect() {\n if (this.ws) {\n this.ws.close();\n this.ws = null;\n }\n this.isConnected = false;\n }\n}\n\n// Create singleton instance\nexport const wsClient = new WebSocketClient();\n\n// Auto-connect if user is authenticated\nif (localStorage.getItem('auth_token')) {\n wsClient.connect();\n}\n\n \n \n Real-time Dashboard Updates\n \n \n
\n \n\n// src/js/dashboard/real-time-dashboard.js\nimport { wsClient } from '../api/websocket-client.js';\nimport { dashboardService } from '../api/dashboard-service.js';\n\nclass RealTimeDashboard {\n constructor() {\n this.charts = new Map();\n this.stats = new Map();\n this.init();\n }\n \n init() {\n this.setupWebSocketListeners();\n this.loadInitialData();\n }\n \n setupWebSocketListeners() {\n // Listen for real-time stats updates\n wsClient.on('stats.update', (data) => {\n this.updateStats(data);\n });\n \n // Listen for new chart data\n wsClient.on('chart.data', (data) => {\n this.updateChart(data.chartId, data.data);\n });\n \n // Listen for new notifications\n wsClient.on('notification', (data) => {\n this.showNotification(data);\n });\n \n // Listen for user activity\n wsClient.on('user.activity', (data) => {\n this.updateActivityFeed(data);\n });\n }\n \n async loadInitialData() {\n try {\n // Load dashboard stats\n const statsResult = await dashboardService.getStats();\n if (statsResult.success) {\n this.renderStats(statsResult.data);\n }\n \n // Load chart data\n const chartTypes = ['sales', 'users', 'revenue'];\n for (const chartType of chartTypes) {\n const chartResult = await dashboardService.getChartData(chartType);\n if (chartResult.success) {\n this.renderChart(chartType, chartResult.data);\n }\n }\n \n // Load recent activity\n const activityResult = await dashboardService.getRecentActivity();\n if (activityResult.success) {\n this.renderActivity(activityResult.data);\n }\n } catch (error) {\n console.error('Failed to load dashboard data:', error);\n }\n }\n \n updateStats(data) {\n Object.entries(data).forEach(([key, value]) => {\n const element = document.querySelector(`[data-stat=\"${key}\"]`);\n if (element) {\n // Animate value change\n this.animateValue(element, value);\n }\n });\n }\n \n animateValue(element, newValue) {\n const currentValue = parseFloat(element.textContent.replace(/[^0-9.-]/g, '')) || 0;\n const difference = newValue - currentValue;\n const steps = 30;\n const stepValue = difference / steps;\n let current = currentValue;\n \n const timer = setInterval(() => {\n current += stepValue;\n element.textContent = this.formatValue(current, element.dataset.format);\n \n if (--steps <= 0) {\n clearInterval(timer);\n element.textContent = this.formatValue(newValue, element.dataset.format);\n }\n }, 16);\n }\n \n formatValue(value, format) {\n switch (format) {\n case 'currency':\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD'\n }).format(value);\n case 'percentage':\n return `${value.toFixed(1)}%`;\n case 'number':\n return new Intl.NumberFormat('en-US').format(Math.round(value));\n default:\n return value.toString();\n }\n }\n \n updateChart(chartId, newData) {\n const chart = this.charts.get(chartId);\n if (!chart) return;\n \n // Update chart data\n chart.data = newData;\n chart.update('active');\n }\n \n showNotification(data) {\n // Use notification plugin or create custom notification\n if (window.GentelellaPlugins && window.GentelellaPlugins.getPlugin('notifications')) {\n const notifications = window.GentelellaPlugins.getPlugin('notifications');\n notifications.show(data.message, data.type);\n }\n }\n \n updateActivityFeed(activity) {\n const feedContainer = document.querySelector('#activity-feed');\n if (!feedContainer) return;\n \n const activityItem = document.createElement('div');\n activityItem.className = 'activity-item';\n activityItem.innerHTML = `\n <div class=\"activity-icon\">\n <i class=\"fa fa-${activity.icon}\"></i>\n </div>\n <div class=\"activity-content\">\n <div class=\"activity-text\">${activity.message}</div>\n <div class=\"activity-time\">${this.formatTime(activity.timestamp)}</div>\n </div>\n `;\n \n // Add to top of feed\n feedContainer.insertBefore(activityItem, feedContainer.firstChild);\n \n // Remove oldest items if feed is too long\n const items = feedContainer.querySelectorAll('.activity-item');\n if (items.length > 10) {\n for (let i = 10; i < items.length; i++) {\n items[i].remove();\n }\n }\n }\n \n formatTime(timestamp) {\n const date = new Date(timestamp);\n const now = new Date();\n const diff = now - date;\n \n if (diff < 60000) return 'Just now';\n if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n return date.toLocaleDateString();\n }\n}\n\n// Initialize real-time dashboard\nnew RealTimeDashboard();\n\n
\n \n \n Data Management\n \n \n
\n \n\n \n \n State Management\n \n \n
\n \n\n// src/js/store/app-store.js\nclass AppStore {\n constructor() {\n this.state = {\n user: null,\n theme: 'light',\n sidebarCollapsed: false,\n notifications: [],\n loading: false,\n error: null\n };\n \n this.listeners = new Map();\n this.loadFromStorage();\n }\n \n // Get current state\n getState() {\n return { ...this.state };\n }\n \n // Update state\n setState(updates) {\n const prevState = { ...this.state };\n this.state = { ...this.state, ...updates };\n \n // Notify listeners\n this.notifyListeners(prevState, this.state);\n \n // Persist certain state to localStorage\n this.saveToStorage();\n }\n \n // Subscribe to state changes\n subscribe(listener) {\n const id = Date.now() + Math.random();\n this.listeners.set(id, listener);\n \n // Return unsubscribe function\n return () => {\n this.listeners.delete(id);\n };\n }\n \n notifyListeners(prevState, newState) {\n this.listeners.forEach(listener => {\n try {\n listener(newState, prevState);\n } catch (error) {\n console.error('Error in state listener:', error);\n }\n });\n }\n \n loadFromStorage() {\n try {\n const userData = localStorage.getItem('user_data');\n if (userData) {\n this.state.user = JSON.parse(userData);\n }\n \n const theme = localStorage.getItem('theme');\n if (theme) {\n this.state.theme = theme;\n }\n \n const sidebarCollapsed = localStorage.getItem('sidebar-collapsed');\n if (sidebarCollapsed) {\n this.state.sidebarCollapsed = sidebarCollapsed === 'true';\n }\n } catch (error) {\n console.error('Failed to load state from storage:', error);\n }\n }\n \n saveToStorage() {\n try {\n if (this.state.user) {\n localStorage.setItem('user_data', JSON.stringify(this.state.user));\n }\n \n localStorage.setItem('theme', this.state.theme);\n localStorage.setItem('sidebar-collapsed', this.state.sidebarCollapsed.toString());\n } catch (error) {\n console.error('Failed to save state to storage:', error);\n }\n }\n \n // Action methods\n setUser(user) {\n this.setState({ user });\n }\n \n clearUser() {\n this.setState({ user: null });\n localStorage.removeItem('user_data');\n localStorage.removeItem('auth_token');\n }\n \n setTheme(theme) {\n this.setState({ theme });\n document.documentElement.setAttribute('data-theme', theme);\n }\n \n toggleSidebar() {\n this.setState({ sidebarCollapsed: !this.state.sidebarCollapsed });\n }\n \n addNotification(notification) {\n const notifications = [...this.state.notifications, {\n id: Date.now(),\n timestamp: new Date(),\n ...notification\n }];\n this.setState({ notifications });\n }\n \n removeNotification(id) {\n const notifications = this.state.notifications.filter(n => n.id !== id);\n this.setState({ notifications });\n }\n \n setLoading(loading) {\n this.setState({ loading });\n }\n \n setError(error) {\n this.setState({ error });\n }\n \n clearError() {\n this.setState({ error: null });\n }\n}\n\n// Create singleton instance\nexport const appStore = new AppStore();\n\n// Helper hook for components\nexport function useStore(selector) {\n const state = appStore.getState();\n return selector ? selector(state) : state;\n}\n\n \n \n Data Caching\n \n \n
\n \n\n// src/js/cache/data-cache.js\nclass DataCache {\n constructor() {\n this.cache = new Map();\n this.expiry = new Map();\n this.defaultTTL = 5 * 60 * 1000; // 5 minutes\n }\n \n set(key, data, ttl = this.defaultTTL) {\n this.cache.set(key, data);\n this.expiry.set(key, Date.now() + ttl);\n }\n \n get(key) {\n if (!this.cache.has(key)) {\n return null;\n }\n \n const expiryTime = this.expiry.get(key);\n if (Date.now() > expiryTime) {\n this.delete(key);\n return null;\n }\n \n return this.cache.get(key);\n }\n \n has(key) {\n return this.get(key) !== null;\n }\n \n delete(key) {\n this.cache.delete(key);\n this.expiry.delete(key);\n }\n \n clear() {\n this.cache.clear();\n this.expiry.clear();\n }\n \n cleanup() {\n const now = Date.now();\n for (const [key, expiryTime] of this.expiry.entries()) {\n if (now > expiryTime) {\n this.delete(key);\n }\n }\n }\n \n size() {\n return this.cache.size;\n }\n}\n\n// Create singleton instance\nexport const dataCache = new DataCache();\n\n// Auto cleanup every 5 minutes\nsetInterval(() => {\n dataCache.cleanup();\n}, 5 * 60 * 1000);\n\n
\n \n \n Authentication Integration\n \n \n
\n \n\n \n \n JWT Token Management\n \n \n
\n \n\n// src/js/auth/auth-manager.js\nclass AuthManager {\n constructor() {\n this.token = localStorage.getItem('auth_token');\n this.refreshTimer = null;\n this.init();\n }\n \n init() {\n if (this.token) {\n this.scheduleTokenRefresh();\n }\n }\n \n async login(credentials) {\n try {\n const response = await userService.authenticate(credentials);\n \n if (response.success) {\n this.token = response.data.token;\n this.scheduleTokenRefresh();\n \n // Update app state\n appStore.setUser(response.data.user);\n \n return response;\n }\n \n return response;\n } catch (error) {\n return {\n success: false,\n error: error.message\n };\n }\n }\n \n logout() {\n this.clearTokenRefresh();\n this.token = null;\n \n // Clear app state\n appStore.clearUser();\n \n // Call logout service\n userService.logout();\n }\n \n isAuthenticated() {\n return !!this.token && !this.isTokenExpired();\n }\n \n isTokenExpired() {\n if (!this.token) return true;\n \n try {\n const payload = JSON.parse(atob(this.token.split('.')[1]));\n return payload.exp * 1000 < Date.now();\n } catch (error) {\n return true;\n }\n }\n \n async refreshToken() {\n try {\n const response = await httpClient.post('/auth/refresh');\n \n if (response.token) {\n this.token = response.token;\n localStorage.setItem('auth_token', this.token);\n this.scheduleTokenRefresh();\n return true;\n }\n \n return false;\n } catch (error) {\n console.error('Token refresh failed:', error);\n this.logout();\n return false;\n }\n }\n \n scheduleTokenRefresh() {\n this.clearTokenRefresh();\n \n if (!this.token) return;\n \n try {\n const payload = JSON.parse(atob(this.token.split('.')[1]));\n const expiryTime = payload.exp * 1000;\n const refreshTime = expiryTime - (5 * 60 * 1000); // 5 minutes before expiry\n const timeUntilRefresh = refreshTime - Date.now();\n \n if (timeUntilRefresh > 0) {\n this.refreshTimer = setTimeout(() => {\n this.refreshToken();\n }, timeUntilRefresh);\n } else {\n // Token expired or will expire soon\n this.refreshToken();\n }\n } catch (error) {\n console.error('Failed to schedule token refresh:', error);\n }\n }\n \n clearTokenRefresh() {\n if (this.refreshTimer) {\n clearTimeout(this.refreshTimer);\n this.refreshTimer = null;\n }\n }\n \n getToken() {\n return this.token;\n }\n \n getUser() {\n const userData = localStorage.getItem('user_data');\n return userData ? JSON.parse(userData) : null;\n }\n}\n\n// Create singleton instance\nexport const authManager = new AuthManager();\n\n// Route protection\nexport function requireAuth() {\n if (!authManager.isAuthenticated()) {\n window.location.href = '/login.html';\n return false;\n }\n return true;\n}\n\n// Auto-redirect if not authenticated (for protected pages)\nif (document.querySelector('[data-require-auth]')) {\n requireAuth();\n}\n\n
\n \n \n Error Handling\n \n \n
\n \n\n \n \n Global Error Handler\n \n \n
\n \n\n// src/js/error/error-handler.js\nclass ErrorHandler {\n constructor() {\n this.setupGlobalHandlers();\n }\n \n setupGlobalHandlers() {\n // Handle unhandled promise rejections\n window.addEventListener('unhandledrejection', (event) => {\n console.error('Unhandled promise rejection:', event.reason);\n this.handleError(event.reason, 'Promise Rejection');\n event.preventDefault();\n });\n \n // Handle JavaScript errors\n window.addEventListener('error', (event) => {\n console.error('JavaScript error:', event.error);\n this.handleError(event.error, 'JavaScript Error');\n });\n \n // Handle API errors\n document.addEventListener('api-error', (event) => {\n this.handleApiError(event.detail);\n });\n }\n \n handleError(error, context = 'Unknown') {\n const errorInfo = {\n message: error.message || 'Unknown error',\n stack: error.stack,\n context,\n timestamp: new Date(),\n userAgent: navigator.userAgent,\n url: window.location.href,\n user: authManager.getUser()?.id\n };\n \n // Log to console\n console.error('Error handled:', errorInfo);\n \n // Send to error tracking service\n this.reportError(errorInfo);\n \n // Show user-friendly notification\n this.showErrorNotification(error);\n }\n \n handleApiError(error) {\n if (error.status === 401) {\n this.handleUnauthorized();\n } else if (error.status >= 500) {\n this.showErrorNotification({\n message: 'Server error occurred. Please try again later.'\n });\n } else {\n this.showErrorNotification(error);\n }\n }\n \n handleUnauthorized() {\n // Clear auth data and redirect to login\n authManager.logout();\n }\n \n showErrorNotification(error) {\n // Use notification plugin if available\n if (window.GentelellaPlugins && window.GentelellaPlugins.getPlugin('notifications')) {\n const notifications = window.GentelellaPlugins.getPlugin('notifications');\n notifications.show(error.message || 'An error occurred', 'error');\n } else {\n // Fallback to alert\n alert(error.message || 'An error occurred');\n }\n }\n \n async reportError(errorInfo) {\n try {\n // Send error to monitoring service\n await httpClient.post('/errors/report', errorInfo);\n } catch (reportingError) {\n console.error('Failed to report error:', reportingError);\n }\n }\n}\n\n// Initialize global error handler\nnew ErrorHandler();\n\n
\n \n \n Performance Optimization\n \n \n
\n \n\n \n \n Request Batching\n \n \n
\n \n\n// src/js/api/request-batcher.js\nclass RequestBatcher {\n constructor() {\n this.batches = new Map();\n this.batchDelay = 100; // ms\n }\n \n batch(endpoint, id, params = {}) {\n return new Promise((resolve, reject) => {\n if (!this.batches.has(endpoint)) {\n this.batches.set(endpoint, {\n requests: [],\n timer: null\n });\n }\n \n const batch = this.batches.get(endpoint);\n batch.requests.push({ id, params, resolve, reject });\n \n // Clear existing timer and set new one\n if (batch.timer) {\n clearTimeout(batch.timer);\n }\n \n batch.timer = setTimeout(() => {\n this.executeBatch(endpoint);\n }, this.batchDelay);\n });\n }\n \n async executeBatch(endpoint) {\n const batch = this.batches.get(endpoint);\n if (!batch || batch.requests.length === 0) return;\n \n const requests = batch.requests.slice();\n batch.requests = [];\n batch.timer = null;\n \n try {\n const ids = requests.map(req => req.id);\n const response = await httpClient.post(`${endpoint}/batch`, { ids });\n \n // Resolve individual requests\n requests.forEach(request => {\n const result = response.data.find(item => item.id === request.id);\n if (result) {\n request.resolve(result);\n } else {\n request.reject(new Error('Item not found in batch response'));\n }\n });\n } catch (error) {\n // Reject all requests\n requests.forEach(request => {\n request.reject(error);\n });\n }\n }\n}\n\nexport const requestBatcher = new RequestBatcher();\n\n
\n \n \n Next Steps\n \n \n
\n \n\n- \n
- Security Guide - Implement security best practices \n
- Testing Guide - Test your API integrations \n
- Monitoring Guide - Monitor API performance \n
\n\n
💡 Pro Tip: Always implement proper error handling and retry logic for API calls. Use caching strategically to reduce API load and improve user experience.
\n\n \n\n \n \n \n\n \n\n\n