Skip to main content

Process ID Migration - From Hardcoded to Dynamic

This document outlines the changes made to migrate from hardcoded process IDs to dynamic process ID extraction from URL parameters.

Problem​

The original implementation used hardcoded process IDs in the frontend:

// ❌ Before: Hardcoded process ID
const processId = '433f49ec-3ba6-4fed-a8b9-4cd8707fefb4';

This caused foreign key constraint violations when trying to create nodes because the hardcoded process ID didn't exist in the database.

Solution​

1. Dynamic Process ID Extraction​

Process Page (/process/[id]):

// ✅ After: Dynamic extraction from URL params
const params = useParams();
const processId = extractProcessId(params); // Validates UUID format

Editor Page (/editor):

// ✅ After: Using valid process ID from database
const processId = '0caab44d-b212-4d0b-9dc1-9215ab184f4b'; // Valid process

2. Process Validation Utility​

Created apps/studio/lib/utils/process-validation.ts:

export async function validateProcessAccess(processId: string): Promise<{
  valid: boolean;
  error?: ProcessValidationError;
}>;

export function extractProcessId(params: any): string | null;

export function getProcessErrorMessage(error: ProcessValidationError): string;

3. Frontend Validation Flow​

// Validate process ID format
const processId = extractProcessId(params);
if (!processId) {
  // Show invalid format error
}

// Validate process exists and user has access
const result = await validateProcessAccess(processId);
if (!result.valid) {
  // Show appropriate error message
}

4. API Route for Process Validation​

Created apps/studio/app/api/process/[processId]/route.ts:

export async function GET(req: NextRequest, context: RouteContext) {
  const response = await forwardRequestToCentralApp(`/v1/api/process/${params.processId}`);
  return NextResponse.json(await response.json());
}

Files Changed​

Frontend Files​

  • apps/studio/app/process/[id]/page.tsx - Dynamic process ID extraction
  • apps/studio/app/editor/page.tsx - Valid process ID usage
  • apps/studio/lib/utils/process-validation.ts - New validation utilities
  • apps/studio/app/api/process/[processId]/route.ts - New API route

Backend Files​

No backend changes were required - the backend was already properly handling dynamic process IDs.

Error Handling Improvements​

Before​

  • Foreign key constraint violations crashed the node creation
  • No validation of process existence
  • Poor error messages to users

After​

  • Process validation before attempting node creation
  • Proper UUID format validation
  • User-friendly error messages with recovery options
  • Loading states during validation
  • Graceful fallbacks for network errors

Testing​

Valid Process ID​

curl -X POST http://localhost:13002/v1/api/process/0caab44d-b212-4d0b-9dc1-9215ab184f4b/node \
  -H "Authorization: Bearer ..." \
  -H "Content-Type: application/json" \
  -d '{"nodeType": "MANUAL_TRIGGER", ...}'

✅ Result: Node created successfully

Invalid Process ID​

curl -X POST http://localhost:13002/v1/api/process/12345678-1234-1234-1234-123456789012/node \
  -H "Authorization: Bearer ..." \
  -H "Content-Type: application/json" \
  -d '{"nodeType": "MANUAL_TRIGGER", ...}'

❌ Result: Foreign key constraint error (as expected)

But now the frontend will validate the process before attempting node creation, preventing this error.

Migration Steps for Other Developers​

  1. Update any hardcoded process IDs to use dynamic extraction
  2. Import the validation utilities in components that use process IDs
  3. Add process validation before making API calls
  4. Handle loading and error states appropriately in UI
  5. Test with both valid and invalid process IDs to ensure proper error handling

Benefits​

  • ✅ Eliminates foreign key constraint errors
  • ✅ Improves user experience with proper error messages
  • ✅ Supports multiple processes instead of being locked to one
  • ✅ Better security with access validation
  • ✅ Consistent error handling across the application
  • ✅ Future-proof for multi-tenant scenarios