Skip to content

Troubleshooting

This page covers common issues that may arise when using the admin panel and their solutions.

CORS Issues

If you encounter CORS issues when connecting to the API, make sure the API is configured to allow requests from the admin panel's origin.

API CORS Configuration

The API is configured to allow requests from the following origins:

  • http://localhost:3000 (React Admin development server)
  • http://localhost:8080 (Production admin panel)

When using credentials mode 'include' for cookies, the server cannot use a wildcard (*) for the Access-Control-Allow-Origin header. Instead, it must specify the exact origin.

Adding Additional Origins

If you need to add additional origins, update the CORS_ORIGINS list in app/core/config.py:

CORS_ORIGINS = [
    "http://localhost:3000",
    "http://localhost:8080",
    "https://your-custom-domain.com",  # Add your custom domain here
]

Proxy Solution

In production, the admin panel uses nginx to proxy requests to the API, which avoids CORS issues. The nginx configuration is defined in the nginx.conf file.

Authentication Issues

If you encounter authentication issues, check the following:

JWT Secret Key

Make sure the API is configured with the correct secret key for JWT token generation and validation. The secret key is defined in the app/core/config.py file:

JWT_SECRET_KEY = os.getenv("JWT_SECRET_KEY", "your-secret-key")

Authorization Header Format

Make sure the admin panel is sending the token in the correct format in the Authorization header:

Authorization: Bearer <token>

Token Refresh Issues

If you encounter issues with automatic token refresh:

  1. Check browser console logs for any token refresh errors
  2. Verify that the refresh token cookie is being properly set by the API
  3. Ensure the API's refresh token endpoint (/api/v1/auth/refresh-cookie) is functioning correctly
  4. Check that the refresh token is being included in requests to the refresh endpoint

Login First Attempt Failure

If the first login attempt fails but subsequent attempts with the same credentials succeed, this may be due to token and cookie state not being properly cleared before login attempts. The admin panel includes a fix for this issue, but if you still experience it, check the following:

  1. Clear any existing tokens from localStorage before attempting login
  2. Add a small delay to ensure cookies are properly cleared
  3. Improve error handling to provide better feedback

Client Filtering and Resource Access

If you encounter issues with resource access:

  1. Check the server logs for client filtering debug messages
  2. Verify that the user has the correct client_list in the database
  3. Ensure the API's client filtering logic is functioning correctly
  4. Check the browser console for dataProvider debugging information

Direct ID Access for Resources

When accessing a resource directly by ID, the API bypasses client filtering for that specific resource if:

  1. The user is an admin, or
  2. The user has access to the resource through their client_list

If this is not working as expected, check the following:

  1. Verify that the user has the correct roles and client_list in the database
  2. Check that the API's client filtering logic is correctly identifying direct ID access
  3. Ensure the frontend is correctly formatting the URL for direct ID access

Duplicate Menu Items

If menu items appear duplicated in the sidebar after login, this may be due to React Admin rendering the menu multiple times during initialization. The admin panel includes a fix for this issue, but if you still experience it, try the following:

  1. Clear your browser cache and reload the application
  2. Implement a custom Menu component that filters out duplicate resource entries
  3. Use React's useMemo hook to efficiently track which resources have already been added to the menu
  4. Ensure each resource appears only once in the menu regardless of how many times it's registered

API Connection Issues

If the admin panel cannot connect to the API, check the following:

  1. Make sure the API is running and accessible at the configured URL
  2. Check that the API URL is correctly configured in the admin panel
  3. Verify that there are no network issues preventing the connection
  4. Check the browser console for any connection errors

API URL Configuration

In development, the API URL can be configured using the REACT_APP_API_URL environment variable. Make sure this is set correctly in your .env file:

REACT_APP_API_URL=http://localhost:8100/api/v1

Performance Issues

If the admin panel is slow or unresponsive, check the following:

Browser Performance

  1. Check the browser console for any performance warnings or errors
  2. Use the browser's performance tools to identify bottlenecks
  3. Consider using a more performant browser (Chrome or Firefox are recommended)

API Performance

  1. Check the API's performance monitoring tools for any issues
  2. Verify that the API's caching mechanisms are working correctly
  3. Consider optimizing API endpoints that are frequently used by the admin panel

React Performance

  1. Use React's performance tools to identify components that are re-rendering unnecessarily
  2. Implement memoization for expensive computations
  3. Use React.memo for components that don't need to re-render when their parent re-renders
  4. Use useCallback for functions that are passed as props to child components

Form Validation Issues

If form validation is not working as expected, check the following:

  1. Verify that the form validation rules are correctly defined
  2. Check that the API's validation logic matches the frontend validation
  3. Ensure that validation errors are being properly displayed to the user

Common Validation Issues

  • Required Fields: Make sure required fields are properly marked as required in both the frontend and backend
  • Field Types: Ensure that field types match between the frontend and backend (e.g., string vs. number)
  • Field Lengths: Verify that field length constraints are consistent between the frontend and backend
  • Custom Validation: Check that custom validation rules are correctly implemented and consistent

Data Display Issues

If data is not being displayed correctly, check the following:

  1. Verify that the API is returning the expected data
  2. Check that the frontend is correctly parsing and formatting the data
  3. Ensure that the data is being properly passed to the components that display it

Common Data Display Issues

  • Date Formatting: Make sure dates are being properly formatted for display
  • Number Formatting: Verify that numbers are being properly formatted (e.g., decimal places, thousands separators)
  • Empty Values: Check that empty or null values are being handled correctly
  • Relationship Data: Ensure that related data is being properly fetched and displayed

Browser Compatibility Issues

The admin panel is designed to work with modern browsers, but if you encounter compatibility issues, check the following:

  1. Verify that you're using a supported browser (Chrome, Firefox, Safari, or Edge)
  2. Check that your browser is up to date
  3. Consider using polyfills for features that may not be supported in older browsers

Known Browser Issues

  • Internet Explorer: The admin panel is not designed to work with Internet Explorer
  • Older Browsers: Some features may not work correctly in older browsers
  • Mobile Browsers: The admin panel is designed primarily for desktop use, but should work on mobile browsers with some limitations