Skip to content

Commit ae334d6

Browse files
mbertelsenmbertelsen
committed
Enhances env-based auth debugging
Provides a detailed environment info panel for diagnosing local vs. cloud authentication issues. Logs config, token data, and network details to guide resolutions of deployment discrepancies.
1 parent 74f5ffe commit ae334d6

File tree

6 files changed

+470
-2
lines changed

6 files changed

+470
-2
lines changed

‎DEBUGGING_ENHANCEMENT.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Cloud Deployment Debugging Enhancement
2+
3+
## Summary
4+
Enhanced the app-scripting editor with comprehensive debugging tools to help diagnose the authentication issue between local and cloud environments.
5+
6+
## Changes Made
7+
8+
### 1. Environment Debug Component (`EnvironmentDebug.tsx`)
9+
- **Purpose**: Provides a collapsible debug panel showing environment configuration
10+
- **Location**: Added to main App component, appears at the top when needed
11+
- **Features**:
12+
- Shows all relevant environment variables (VITE_BACKEND_BASE_URL, VITE_LOGIN_BASE_URL, etc.)
13+
- Displays computed URLs for GraphQL and OAuth endpoints
14+
- Warns when critical environment variables are missing
15+
- Only shows in development or when there are configuration issues
16+
17+
### 2. Debug Utilities (`utils/debugUtils.ts`)
18+
- **Purpose**: Centralized debugging functions for authentication troubleshooting
19+
- **Functions**:
20+
- `logEnvironmentInfo()`: Logs comprehensive environment information to console
21+
- `logNetworkRequest()`: Logs network request details with truncated auth tokens
22+
- `logAuthError()`: Logs detailed authentication error information
23+
24+
### 3. Enhanced Error Handling in FacilityDropdown
25+
- **Purpose**: Better error diagnostics for the failing facilities query
26+
- **Features**:
27+
- Automatic environment logging when auth errors occur
28+
- Enhanced error display with debug information panel
29+
- Detailed troubleshooting guidance for users
30+
31+
### 4. Updated CSS Styles
32+
- **Purpose**: Clean, professional styling for debug components
33+
- **Features**:
34+
- Collapsible debug panels with proper visual hierarchy
35+
- Color-coded status indicators (green for OK, red for missing)
36+
- Monospace font for technical information
37+
- Warning panels for missing configuration
38+
39+
## How to Use for Debugging
40+
41+
### Local Testing
42+
1. The EnvironmentDebug component will show automatically if environment variables are missing
43+
2. Check browser console for detailed auth error logs when facility loading fails
44+
3. All debug information is logged automatically in development mode
45+
46+
### Cloud Deployment Diagnosis
47+
1. Deploy these changes to the cloud environment
48+
2. Visit the cloud URL: https://app-scripting-editor.trackmangolfdev.com/
49+
3. Open browser developer tools and check the console
50+
4. Look for the environment debug information when the facilities query fails
51+
5. Compare the logged environment variables between local and cloud
52+
53+
### Expected Debug Output
54+
When the facilities query fails in cloud, you should see:
55+
- Complete environment variable dump
56+
- GraphQL error details with response codes
57+
- Authentication token information (truncated for security)
58+
- Browser and network information
59+
- Local storage authentication state
60+
61+
## Next Steps
62+
1. Deploy to cloud and capture the debug output
63+
2. Compare environment variables between local and cloud
64+
3. Verify OAuth token acquisition and validation differences
65+
4. Check for network/firewall issues blocking authentication requests
66+
5. Ensure all environment variables are properly set in cloud deployment
67+
68+
## Files Modified
69+
- `editor/src/components/EnvironmentDebug.tsx` (new)
70+
- `editor/src/utils/debugUtils.ts` (new)
71+
- `editor/src/App.tsx` (added EnvironmentDebug component)
72+
- `editor/src/components/FacilityDropdown.tsx` (enhanced error logging)
73+
- `editor/src/treeview.css` (added debug component styles)
74+
75+
The application builds successfully and maintains all existing functionality while providing comprehensive debugging capabilities.

‎editor/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { NodeDetailsPanel } from './components/NodeDetailsPanel';
77
import { ScriptEditor } from './components/ScriptEditor';
88
import { DialogManager } from './components/DialogManager';
99
import { DocumentationViewer } from './components/DocumentationViewer';
10+
import { EnvironmentDebug } from './components/EnvironmentDebug';
1011
import { Activity, Step, ScriptData, isActivity, isStep, LogicNode } from './types';
1112
import { normalizeScript } from './normalizer';
1213
import { createActivity, createStep } from './factories';
@@ -410,6 +411,7 @@ export default function App() {
410411
activeTab={activeTab}
411412
onTabChange={setActiveTab}
412413
/>
414+
<EnvironmentDebug />
413415
{activeTab === 'edit' ? (
414416
<div className="tree-flex">
415417
<DialogManager

‎editor/src/components/EnvironmentDebug.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react';
2+
3+
export const EnvironmentDebug: React.FC = () => {
4+
const isDevelopment = import.meta.env.DEV;
5+
const backendBase = import.meta.env.VITE_BACKEND_BASE_URL;
6+
const loginBase = import.meta.env.VITE_LOGIN_BASE_URL;
7+
const nodeEnv = import.meta.env.VITE_NODE_ENV;
8+
const mode = import.meta.env.MODE;
9+
10+
// Only show in development or when there are issues
11+
if (!isDevelopment && backendBase && loginBase) {
12+
return null;
13+
}
14+
15+
return (
16+
<div className="env-debug">
17+
<details>
18+
<summary>{isDevelopment ? '🛠️ Development Environment' : '⚠️ Environment Configuration'}</summary>
19+
<div className="env-debug-content">
20+
<div className="env-section">
21+
<h4>Environment Variables</h4>
22+
<table className="env-table">
23+
<tbody>
24+
<tr>
25+
<td>MODE:</td>
26+
<td>{mode || 'undefined'}</td>
27+
</tr>
28+
<tr>
29+
<td>DEV:</td>
30+
<td>{isDevelopment ? 'true' : 'false'}</td>
31+
</tr>
32+
<tr>
33+
<td>VITE_NODE_ENV:</td>
34+
<td>{nodeEnv || 'undefined'}</td>
35+
</tr>
36+
<tr>
37+
<td>VITE_BACKEND_BASE_URL:</td>
38+
<td className={backendBase ? 'env-ok' : 'env-missing'}>
39+
{backendBase || 'NOT SET'}
40+
</td>
41+
</tr>
42+
<tr>
43+
<td>VITE_LOGIN_BASE_URL:</td>
44+
<td className={loginBase ? 'env-ok' : 'env-missing'}>
45+
{loginBase || 'NOT SET'}
46+
</td>
47+
</tr>
48+
</tbody>
49+
</table>
50+
</div>
51+
52+
<div className="env-section">
53+
<h4>Computed URLs</h4>
54+
<table className="env-table">
55+
<tbody>
56+
<tr>
57+
<td>GraphQL:</td>
58+
<td>{backendBase ? `${backendBase}/graphql` : 'Cannot compute - backend URL missing'}</td>
59+
</tr>
60+
<tr>
61+
<td>OAuth Token:</td>
62+
<td>{loginBase ? `${loginBase}/connect/token` : 'Cannot compute - login URL missing'}</td>
63+
</tr>
64+
</tbody>
65+
</table>
66+
</div>
67+
68+
{(!backendBase || !loginBase) && (
69+
<div className="env-warning">
70+
<p><strong>⚠️ Missing Configuration</strong></p>
71+
<p>Some environment variables are not set. This may cause authentication and API calls to fail.</p>
72+
<p>Expected variables:</p>
73+
<ul>
74+
<li><code>VITE_BACKEND_BASE_URL</code> - Backend API base URL</li>
75+
<li><code>VITE_LOGIN_BASE_URL</code> - Authentication service base URL</li>
76+
</ul>
77+
</div>
78+
)}
79+
</div>
80+
</details>
81+
</div>
82+
);
83+
};

‎editor/src/components/FacilityDropdown.tsx‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
22
import { useQuery } from 'urql';
33
import { GET_FACILITIES_WITH_ACCESS, TEST_QUERY } from '../graphql/queries';
44
import { debugEnvironment } from '../lib/debug-env';
5+
import { logEnvironmentInfo, logAuthError } from '../utils/debugUtils';
56

67
interface Facility {
78
id: string;
@@ -43,6 +44,12 @@ export const FacilityDropdown: React.FC<FacilityDropdownProps> = ({
4344
// Log detailed debugging info
4445
console.log('🧪 Test Query Result:', testResult);
4546
console.log('🏢 Facilities Query Result:', { data, fetching, error });
47+
48+
// Enhanced error logging
49+
if (error && import.meta.env.DEV) {
50+
logEnvironmentInfo();
51+
logAuthError(error, 'Facilities Query');
52+
}
4653

4754
// Close dropdown when clicking outside
4855
useEffect(() => {
@@ -144,7 +151,35 @@ export const FacilityDropdown: React.FC<FacilityDropdownProps> = ({
144151
<div className="facility-list">
145152
{error && (
146153
<div className="facility-error">
147-
Error loading facilities: {error.message}
154+
<div className="error-header">⚠️ Unable to load facilities</div>
155+
<div className="error-message">{error.message}</div>
156+
{error.message.includes('not authorized') && (
157+
<div className="error-help">
158+
<p><strong>This may be due to:</strong></p>
159+
<ul>
160+
<li>Insufficient permissions for your account</li>
161+
<li>Authentication session expired</li>
162+
<li>Network connectivity issues</li>
163+
<li>Environment configuration differences between local and cloud</li>
164+
</ul>
165+
<p><strong>Troubleshooting:</strong></p>
166+
<ul>
167+
<li>Try refreshing the page to restart authentication</li>
168+
<li>Check if you're logged into TrackMan services</li>
169+
<li>Contact support if the issue persists</li>
170+
</ul>
171+
<p><em>You can still use the editor to create and edit scripts without selecting a specific facility.</em></p>
172+
</div>
173+
)}
174+
<details className="error-debug">
175+
<summary>Debug Information</summary>
176+
<div className="debug-info">
177+
<p><strong>GraphQL Endpoint:</strong> {import.meta.env.VITE_BACKEND_BASE_URL || 'Not set'}/graphql</p>
178+
<p><strong>Login Service:</strong> {import.meta.env.VITE_LOGIN_BASE_URL || 'Not set'}</p>
179+
<p><strong>Environment:</strong> {import.meta.env.VITE_NODE_ENV || 'development'}</p>
180+
<p><strong>Error Details:</strong> {JSON.stringify(error, null, 2)}</p>
181+
</div>
182+
</details>
148183
</div>
149184
)}
150185

0 commit comments

Comments
 (0)