Research Simple Environment Variable Debugging Approaches (vibe-kanban) #36
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
For debugging we want the webapp to log all the environment variables it has access to on the client side
… (vibe-kanban 27bead3b) Update log file naming to use YYYY-MM-DDTHH format instead of the current pattern. Check the @package.json for how the filenames are being generated
…n f0ca7c49) Create server-side environment logging functionality that prints Next.js environment variables to the console when the webapp dev server starts up. This will help with debugging environment variable issues during development. Requirements: 1. Create a server-side environment logger utility in apps/webapp/lib/debug/ServerEnvironmentLogger.ts 2. Log environment variables at webapp startup (only in development mode) 3. Group and categorize environment variables: - NEXT_PUBLIC_* variables (with sensitive key masking) - Firebase-related variables - Other relevant variables (NODE_ENV, PORT, etc.) 4. Include timestamp, working directory, and variable counts 5. Import and call the logger from the appropriate Next.js startup location Implementation Notes: - Only run in development mode (process.env.NODE_ENV === 'development') - Mask sensitive values (anything with "key" in the name) - Use console.group() for organized output - Should appear in the webapp dev server logs after the Next.js startup banner Acceptance Criteria: - Server-side environment logger utility created - Logger called at webapp startup - Environment variables properly categorized and displayed - Sensitive values are masked - Only runs in development mode - Output appears in webapp dev server logs
… 6b0052f2) Research and document built-in Next.js debugging features for environment variables during development. **Objective:** Find out if Next.js has any built-in ways to debug and inspect environment variables on both server and client side during development. **Research Areas:** - Next.js CLI flags or options for environment variable debugging - Built-in dev server logging for environment variables - Official Next.js debugging tools and developer features - Environment variable inspection in development mode - Next.js documentation on debugging environment variables - Any built-in environment variable display or validation **Deliverables:** 1. Create specs/nextjs-builtin-env-debugging.md with comprehensive findings 2. Document any built-in flags, options, or features discovered 3. Include practical code examples and usage instructions 4. Note what is NOT available built-in and limitations 5. Provide clear assessment of whether built-in features meet our debugging needs 6. Commit findings to repository **Success Criteria:** - Thorough research of official Next.js documentation and features - Clear documentation of all available built-in debugging capabilities - Practical examples ready for immediate use - Honest assessment of gaps in built-in functionality
- Add comprehensive documentation in specs/simple-env-debugging-approaches.md - Implement API route for server-side environment inspection (/api/debug/env) - Create React hook (useEnvDebug) for client-side environment debugging - Add simple floating debug component (SimpleEnvDebugger) - Implement Next.js middleware for request-based environment logging - Create browser console helper functions for manual debugging - All approaches are lightweight, work reliably in development, and auto-disable in production - Include step-by-step implementation guides and testing procedures - Provide multiple simple approaches with working code examples 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Remove all implementation files from environment debugging research: - apps/webapp/app/api/debug/env/route.ts - apps/webapp/components/debug/SimpleEnvDebugger.tsx - apps/webapp/hooks/useEnvDebug.ts - apps/webapp/lib/debug/consoleHelpers.ts - apps/webapp/middleware.ts Keeping only specs/simple-env-debugging-approaches.md with research findings and code examples for reference. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Research simple, lightweight approaches for environment variable debugging that don't require complex custom logging.
Objective:
Find simple, reliable ways to debug environment variables on both server and client side without the complexity we've been encountering.
Research Areas:
Deliverables:
Success Criteria: