Performance Troubleshooting¶

Common causes and solutions:

1. Browser Cache and Storage:

Symptoms: - Dashboard loads slowly after updates - Interface appears broken or outdated - Login redirects fail

Solution: 1. Open browser developer tools (F12) 2. Go to Application/Storage tab 3. Clear data for *.dxtra.ai domains: - Local Storage - Session Storage - IndexedDB - Cookies 4. Hard refresh (Ctrl+Shift+R or Cmd+Shift+R)

1. Browser Compatibility:

For best performance: Use Chrome or Firefox latest versions

1. Browser Extensions Interference:
2. Test in incognito/private mode
3. Disable ad blockers temporarily
4. Check for privacy extensions blocking scripts
5. Whitelist *.dxtra.ai domains

Network diagnostics:

1. Connection Speed:
2. Minimum: 5 Mbps download, 1 Mbps upload

3. Optimal: 25+ Mbps download, 5+ Mbps upload

4. Test Network Performance:

   Bash

   ping dashboard.dxtra.ai
   ping api.dxtra.ai
   

5. Corporate Network Issues:

Browser resource optimization:

1. Memory Management:
2. Close unused browser tabs
3. Restart browser daily for heavy usage
4. Check for memory-heavy extensions

5. Use browser task manager (Shift+Esc in Chrome)

6. CPU Usage: If browser becomes unresponsive or fan noise increases:

7. Close resource-intensive tabs
8. Disable hardware acceleration if issues persist

9. Update browser to latest version

10. System Requirements:

11. RAM: 4GB minimum (8GB+ recommended)
12. CPU: Dual-core 2.0GHz+
13. OS: Windows 10+, macOS 10.14+, or modern Linux

Impact of date ranges on performance:

Optimization strategies:

1. Break Down Large Reports: Instead of "Last 12 months", generate 3 separate "Last 90 days" reports

2. Use Appropriate Granularity:

3. Daily: For periods up to 3 months
4. Weekly: For periods 3-12 months
5. Monthly: For periods over 12 months

Optimize report parameters:

1. Filter Usage:
2. Apply specific filters before generating
3. Use integration-specific filters
4. Filter by data controller when possible

5. Exclude unnecessary data subjects/activities

6. Report Type Selection:

1. Schedule Heavy Reports:
2. Generate during off-peak hours
3. Use email delivery for large reports
4. Set up recurring reports for regular needs

Large file handling:

1. File Size Guidelines:
2. <1MB: Instant download
3. 1-10MB: 10-30 second generation
4. 10-100MB: 1-5 minute generation

5. 100MB+: Consider API export or segmentation

6. When Standard Export Fails:

7. Use API pagination for large datasets
8. Request data in smaller date ranges
9. Export specific data subsets

GraphQL query performance:

1. Query Structure Optimization:

Inefficient Query:

query {
  dataControllers {
    id
    name
    users {
      id
      name
      email
      dataSubjects {
        id
        name
        email
        consents {
          id
          status
          createdAt
        }
      }
    }
  }
}

Optimized Query:

query {
  dataControllers(limit: 10) {
    id
    name
    users(limit: 5) {
      id
      name
    }
  }
}

1. Pagination Best Practices:

   GraphQL

   query DataSubjectsPaginated($limit: Int!, $offset: Int!) {
     dataSubjects(limit: $limit, offset: $offset) {
       id
       name
       email
     }
   }
   

2. Performance Tips:

3. Only request fields you need
4. Avoid deeply nested relationships
5. Use fragments for repeated field sets
6. Limit array sizes with pagination

Client-side optimization:

1. Response Caching:

   JavaScript

   // Implement client-side caching
   const cache = new Map();
   
   async function cachedApiCall(query, variables) {
     const key = JSON.stringify({ query, variables });
   
     if (cache.has(key)) {
       return cache.get(key);
     }
   
     const response = await apiCall(query, variables);
     cache.set(key, response);
   
     return response;
   }
   

2. Request Batching:

   JavaScript

   // Batch multiple queries
   const batchedQuery = `
     query BatchedData {
       dataControllers { id name }
       dataSubjects(limit: 10) { id name }
       recentActivities(limit: 5) { id timestamp }
     }
   `;
   

3. Rate Limit Best Practices:

4. Implement exponential backoff
5. Cache responses when possible
6. Use webhooks instead of polling
7. Monitor rate limit headers

Widget performance factors:

1. Script Loading Strategy:

Async Loading (Recommended):

<script async src="https://transparencycenter.dxtra.ai/embed.js"></script>
<script>
  window.dxtraWidget = window.dxtraWidget || [];
  dxtraWidget.push(['init', { dataControllerId: 'YOUR_ID' }]);
</script>

Synchronous Loading (Blocks Rendering):

<!-- Avoid this pattern -->
<script src="https://transparencycenter.dxtra.ai/embed.js"></script>

1. Widget Configuration:
   JavaScript

   // Optimized widget configuration
   dxtraWidget.push(['init', {
     dataControllerId: 'YOUR_ID',
     lazy: true,           // Load widget when needed
     minimize: true,       // Use compressed version
     cache: true,          // Enable browser caching
     timeout: 5000         // 5-second timeout
   }]);
   

Website performance impact:

1. Content Security Policy (CSP):

   HTML

   <!-- Add Dxtra domains to CSP -->
   <meta http-equiv="Content-Security-Policy"
         content="script-src 'self' https://transparencycenter.dxtra.ai;
                  connect-src 'self' https://api.dxtra.ai;">
   

2. Resource Prioritization:

   HTML

   <!-- Preload critical Dxtra resources -->
   <link rel="preconnect" href="https://transparencycenter.dxtra.ai">
   <link rel="dns-prefetch" href="https://api.dxtra.ai">
   

3. Loading Strategy Options:

4. Critical: Load immediately (compliance-required widgets)
5. Deferred: Load after page content (analytics widgets)
6. On-demand: Load on user interaction (preference centers)

Using browser tools for performance analysis:

1. Network Tab Analysis: Key metrics to monitor:
2. DNS lookup time: Should be <50ms
3. Initial connection: Should be <100ms
4. SSL negotiation: Should be <200ms
5. Time to first byte: Should be <500ms

6. Content download: Should be <2s

7. Performance Tab:

8. Open DevTools (F12)
9. Go to Performance tab
10. Click Record
11. Perform slow action in Dxtra

12. Stop recording and analyze:

    • JavaScript execution time
    • Render blocking resources
    • Layout thrashing
    • Memory usage patterns

13. Lighthouse Audits:

14. DevTools > Lighthouse tab
15. Select Performance category
16. Run audit on Dxtra pages
17. Focus on:
    • First Contentful Paint
    • Time to Interactive
    • Cumulative Layout Shift

Testing API endpoints:

1. Response Time Testing:

   Bash

   # Test multiple API calls for consistency
   for i in {1..10}; do
     curl -w "Request $i: %{time_total}s\n" -o /dev/null -s \
          -H "Authorization: Bearer YOUR_JWT" \
          "https://api.dxtra.ai/v1/graphql" \
          -d '{"query":"{ dataControllers { id } }"}'
   done
   

2. Query Analysis: Monitor:

3. Execution time in response
4. Data transfer size
5. Query complexity
6. Cache hit rate