Troubleshooting Guide

// ✅ Correct - import first
import '@databrainhq/plugin/web';
import Dashboard from './Dashboard';

// ❌ Wrong - import after component
import Dashboard from './Dashboard';
import '@databrainhq/plugin/web';

// Add this check
if (!customElements.get('dbn-dashboard')) {
  console.error('DataBrain web components not loaded');
}

.dashboard-container {
  min-height: 600px; /* or 100vh */
}

dbn-dashboard {
  position: relative;
  z-index: 1;
}

import { useRef, useEffect } from 'react';

function Dashboard({ token }) {
  const dashboardRef = useRef(null);

  useEffect(() => {
    if (dashboardRef.current && token) {
      dashboardRef.current.setAttribute('token', token);
    }
  }, [token]);

  return (
    <dbn-dashboard
      ref={dashboardRef}
      dashboard-id="your-dashboard-id"
    />
  );
}

<!-- ✅ Better -->
<dbn-dashboard v-show="token" :token="token" />

<!-- ❌ May cause issues -->
<dbn-dashboard v-if="token" :token="token" />

<Dashboard key="stable-key" />

// Check token format
console.log('Token:', token);
// Should be a UUID like: 3affda8b-7bd4-4a88-9687-105a94cfffab

// Verify dashboard-id
console.log('Dashboard ID:', dashboardId);
// Should match ID from Data App

# Test API token
curl --request POST \
  --url https://api.usedatabrain.com/api/v2/guest-token/create \
  --header 'Authorization: Bearer YOUR_API_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{"clientId":"test","dataAppName":"your-app"}'

// ✅ Correct
headers: {
  'Authorization': `Bearer ${apiToken}`
}

// ❌ Wrong
headers: {
  'Authorization': apiToken
}

// Backend token generation
{
  clientId: userId,
  dataAppName: 'your-app',
  expiryTime: 3600000 // 1 hour (adjust as needed)
}

import { useEffect, useState, useCallback } from 'react';

function useDataBrainToken() {
  const [token, setToken] = useState(null);

  const refreshToken = useCallback(async () => {
    const response = await fetch('/api/databrain/guest-token');
    const data = await response.json();
    setToken(data.token);
  }, []);

  useEffect(() => {
    refreshToken();
    
    // Refresh token every 50 minutes (if set to 1 hour expiry)
    const interval = setInterval(refreshToken, 50 * 60 * 1000);
    
    return () => clearInterval(interval);
  }, [refreshToken]);

  return token;
}

window.handleTokenExpiry = async (event) => {
  if (event.type === 'TOKEN_EXPIRED') {
    const newToken = await fetchFreshToken();
    // Update token in component
    document.querySelector('dbn-dashboard')
      .setAttribute('token', newToken);
  }
};

<dbn-dashboard 
  handle-server-event="handleTokenExpiry"
/>

// ✅ Correct - backend generates token
// backend/api/token.js
const token = await generateGuestToken(userId);

// ❌ Wrong - frontend trying to generate
// Causes CORS errors
fetch('https://api.usedatabrain.com/api/v2/guest-token/create')

// Ensure HTTPS if embedding on HTTPS site
const apiUrl = window.location.protocol === 'https:' 
  ? 'https://api.usedatabrain.com'
  : 'http://api.usedatabrain.com';

dbn-dashboard {
  position: relative;
  z-index: 10;
}

/* If dashboard needs to be on top */
dbn-dashboard::part(modal) {
  z-index: 9999;
}

.dashboard-container {
  position: relative;
  z-index: auto; /* Don't create new stacking context */
}

.dashboard-wrapper {
  isolation: isolate;
}

.dashboard-container {
  width: 100%;
  max-width: 100vw;
  min-height: 600px;
  overflow: auto;
}

@media (max-width: 768px) {
  .dashboard-container {
    min-height: 400px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">

const theme = {
  general: {
    primaryColor: '#0066CC'
  },
  responsive: {
    breakpoints: {
      mobile: 768,
      tablet: 1024
    }
  }
};

// ✅ Correct
<dbn-dashboard 
  theme={JSON.stringify(themeObject)}
/>

// ❌ Wrong
<dbn-dashboard 
  theme={themeObject}
/>

const theme = {
  general: {
    primaryColor: '#0066CC',
    backgroundColor: '#FFFFFF',
    fontFamily: 'Inter, sans-serif'
  },
  chart: {
    colors: ['#0066CC', '#00C2B8'] // Array of colors
  }
};

/* Your styles might be overriding */
dbn-dashboard {
  all: initial; /* Reset if needed */
}

const tokenRequest = {
  clientId: userId,
  dataAppName: 'your-app',
  params: {
    dashboardAppFilters: [{
      dashboardId: 'dashboard-id',
      values: {
        date_range: {
          startDate: '2024-01-01',
          endDate: '2024-03-31'
        }
      }
    }]
  }
};

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

<Suspense fallback={<Loader />}>
  <Dashboard />
</Suspense>

useEffect(() => {
  const dashboard = document.querySelector('dbn-dashboard');
  
  return () => {
    // Clean up event listeners
    if (dashboard) {
      dashboard.removeEventListener('*', handleEvent);
    }
  };
}, []);

// Don't recreate handler on every render
const handleEvent = useCallback((event) => {
  // Handle event
}, []);

// Use memo for expensive components
const MemoizedDashboard = React.memo(Dashboard);