Enhanced care config to validate env during build process #9032
Conversation
WalkthroughThe pull request introduces several changes across multiple files. In Changes
Assessment against linked issues
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Outside diff range and nitpick comments (5)
src/Integrations/Sentry.tsx (1)
11-13: Consider making the error message more specific.The current error message could be more helpful by indicating which specific configuration is missing (dsn, environment, or if it's disabled).
- console.error( - "Sentry is not configured correctly. Please check your environment variables.", - ); + console.debug( + `Sentry initialization skipped: ${ + disabled ? "explicitly disabled" : + !careConfig.sentry.dsn ? "missing DSN" : + !careConfig.sentry.environment ? "missing environment" : + "unknown reason" + }` + );src/Integrations/Plausible.tsx (2)
13-19: Consider preventing Script component mounting when config is invalid.The Script component still mounts even when the configuration is invalid, which could lead to unnecessary network requests or script errors.
Consider refactoring the component to handle this case:
+ const isValidConfig = careConfig.plausible.domain && careConfig.plausible.server; + useEffect(() => { - if (!careConfig.plausible.domain || !careConfig.plausible.server) { + if (!isValidConfig) { console.error( "Plausible is not configured correctly. Please check your environment variables.", ); return; } plausible("pageview"); }, []); - return ( + return isValidConfig ? ( <Script defer data-domain={careConfig.plausible.domain} src={`${careConfig.plausible.server}/js/script.manual.tagged-events.js`} /> + ) : null;Also applies to: 22-31
Line range hint
7-12: Consolidate validation logic across event triggers.The validation check should also be applied to the location change handler to maintain consistency.
Consider extracting the validation to a reusable function:
+ const isValidConfig = () => { + const missingConfig = []; + if (!careConfig.plausible.domain) missingConfig.push('domain'); + if (!careConfig.plausible.server) missingConfig.push('server'); + + if (missingConfig.length > 0) { + console.error( + `Plausible analytics disabled. Missing configuration: ${missingConfig.join(', ')}`, + ); + return false; + } + return true; + }; + useLocationChange(() => { + if (!isValidConfig()) return; plausible("pageview"); });package.json (1)
102-102: LGTM! Dependencies align with PR objectives.The addition of
@julr/vite-plugin-validate-envandzodpackages will enable environment variable validation during the build process, preventing runtime issues from misconfiguration.Consider updating
zodto the latest version (^3.22.4) for potential bug fixes and improvements.Also applies to: 150-150
vite.config.mts (1)
106-117: LGTM! Environment validation is well implemented with room for enhancement.The ValidateEnv plugin configuration successfully addresses all PR objectives:
- Required API URL validation
- Optional Sentry configuration
- Optional Plausible configuration
Consider these enhancements for better developer experience:
ValidateEnv({ validator: "zod", schema: { - REACT_CARE_API_URL: z.string().url(), + REACT_CARE_API_URL: z.string().url().describe("Required: The Care API endpoint URL"), - REACT_SENTRY_DSN: z.string().url().optional(), - REACT_SENTRY_ENVIRONMENT: z.string().optional(), + // Group Sentry-related ENVs + REACT_SENTRY_DSN: z.string().url().optional() + .describe("Optional: Sentry Data Source Name for error tracking"), + REACT_SENTRY_ENVIRONMENT: z.string() + .regex(/^(development|staging|production)$/) + .optional() + .describe("Optional: Environment for Sentry (development|staging|production)"), - REACT_PLAUSIBLE_SITE_DOMAIN: z.string().url().optional(), - REACT_PLAUSIBLE_SERVER_URL: z.string().url().optional(), + // Group Plausible-related ENVs + REACT_PLAUSIBLE_SITE_DOMAIN: z.string().url().optional() + .describe("Optional: Domain for Plausible analytics"), + REACT_PLAUSIBLE_SERVER_URL: z.string().url().optional() + .describe("Optional: Plausible server URL"), }, }),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
package.json(2 hunks)src/Integrations/Plausible.tsx(1 hunks)src/Integrations/Sentry.tsx(1 hunks)vite.config.mts(2 hunks)
🔇 Additional comments (4)
src/Integrations/Sentry.tsx (1)
10-13: LGTM! Enhanced validation aligns with making Sentry optional.
The additional check for careConfig.sentry.environment improves the validation logic and properly implements the requirement to make Sentry configuration optional.
src/Integrations/Plausible.tsx (1)
13-19: Verify environment variable validation schema.
The validation here should align with the Vite environment variable validation schema mentioned in the PR objectives.
Let's verify the environment variable validation setup:
✅ Verification successful
Environment variable validation is properly configured
The validation in src/Integrations/Plausible.tsx aligns with the environment variable schema defined in src/vite-env.d.ts and the default configuration in care.config.ts:
- Environment variables are typed in
vite-env.d.ts:readonly REACT_PLAUSIBLE_SERVER_URL?: string; readonly REACT_PLAUSIBLE_SITE_DOMAIN?: string;
- Default values are provided in
care.config.ts:plausible: { server: env.REACT_PLAUSIBLE_SERVER_URL || "https://plausible.ohc.network", domain: env.REACT_PLAUSIBLE_SITE_DOMAIN || "care.ohc.network", }
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Check for environment variable validation schema in vite config
echo "Searching for Plausible environment validation schema..."
rg -l "plausible.*domain|plausible.*server" "vite.config"
# Check for any existing environment variable documentation
echo "Checking for environment variable documentation..."
fd -g "*env*" -g "*.md" -x cat {} \;
Length of output: 477
Script:
#!/bin/bash
# Let's try different approaches to find configuration files
echo "Searching for vite configuration files..."
fd -e ts -e js -g "*vite*"
echo "Searching for environment variable schema or validation..."
rg -i "plausible|env.*schema|env.*valid" --type ts --type js -A 3
echo "Searching for environment configuration files..."
fd -g "*.env*"
echo "Looking for configuration related files..."
fd -g "*config*"
Length of output: 7832
package.json (1)
102-102: Verify the integration of new dependencies.
Let's ensure these packages are properly integrated into the build configuration.
Also applies to: 150-150
✅ Verification successful
Let me gather more information about the vite configuration files since the previous search pattern didn't work correctly.
Dependencies are properly integrated and used in the build configuration
The verification shows that:
@julr/vite-plugin-validate-envis correctly imported and used in the vite configuration- The plugin is properly configured with zod schema for environment validation
- No version conflicts were found in the dependencies
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the integration of new dependencies in vite.config
# Test 1: Check if vite.config imports the new packages
echo "Checking vite.config imports..."
rg -l "@julr/vite-plugin-validate-env|zod" "vite.config*"
# Test 2: Look for any potential version conflicts in package-lock.json
echo "Checking for version conflicts..."
if [ -f "package-lock.json" ]; then
rg -A 5 '"@julr/vite-plugin-validate-env"|"zod"' package-lock.json
fi
Length of output: 928
Script:
#!/bin/bash
# Search for vite config files with any extension
echo "Looking for vite config files..."
fd "vite.config" --type f
# If found, check their content
echo -e "\nChecking content of vite config files..."
fd "vite.config" --type f --exec cat {}
Length of output: 8144
vite.config.mts (1)
1-13: LGTM! Import statements are correctly structured.
The new imports for ValidateEnv and zod are appropriately added to support environment variable validation during the build process.
src/Integrations/Plausible.tsx
Outdated
| if (!careConfig.plausible.domain || !careConfig.plausible.server) { | ||
| console.error( | ||
| "Plausible is not configured correctly. Please check your environment variables.", | ||
| ); | ||
| return; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance validation handling and error reporting.
While the validation logic is a good addition, there are several improvements that could make it more robust:
Consider applying these changes:
- if (!careConfig.plausible.domain || !careConfig.plausible.server) {
- console.error(
- "Plausible is not configured correctly. Please check your environment variables.",
- );
- return;
- }
+ const missingConfig = [];
+ if (!careConfig.plausible.domain) missingConfig.push('domain');
+ if (!careConfig.plausible.server) missingConfig.push('server');
+
+ if (missingConfig.length > 0) {
+ console.error(
+ `Plausible analytics disabled. Missing configuration: ${missingConfig.join(', ')}`,
+ );
+ return;
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (!careConfig.plausible.domain || !careConfig.plausible.server) { | |
| console.error( | |
| "Plausible is not configured correctly. Please check your environment variables.", | |
| ); | |
| return; | |
| } | |
| const missingConfig = []; | |
| if (!careConfig.plausible.domain) missingConfig.push('domain'); | |
| if (!careConfig.plausible.server) missingConfig.push('server'); | |
| if (missingConfig.length > 0) { | |
| console.error( | |
| `Plausible analytics disabled. Missing configuration: ${missingConfig.join(', ')}`, | |
| ); | |
| return; | |
| } |
There was a problem hiding this comment.
Go ahead and make the changes suggested by coderabbit @Alokih
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
vite.config.mts
Outdated
| ValidateEnv({ | ||
| validator: "zod", | ||
| schema: { | ||
| REACT_CARE_API_URL: z.string().url(), | ||
|
|
||
| REACT_SENTRY_DSN: z.string().url().optional(), | ||
| REACT_SENTRY_ENVIRONMENT: z.string().optional(), | ||
|
|
||
| REACT_PLAUSIBLE_SITE_DOMAIN: z.string().url().optional(), | ||
| REACT_PLAUSIBLE_SERVER_URL: z.string().url().optional(), | ||
| }, | ||
| }), |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider adding validation for CDN URLs configuration.
The REACT_CDN_URLS environment variable is used in the configuration but lacks validation. Consider adding validation to ensure it contains valid URLs when provided:
ValidateEnv({
validator: "zod",
schema: {
REACT_CARE_API_URL: z.string().url(),
REACT_SENTRY_DSN: z.string().url().optional(),
REACT_SENTRY_ENVIRONMENT: z.string().optional(),
REACT_PLAUSIBLE_SITE_DOMAIN: z.string().url().optional(),
REACT_PLAUSIBLE_SERVER_URL: z.string().url().optional(),
+
+ // Validate space-separated CDN URLs
+ REACT_CDN_URLS: z.string()
+ .optional()
+ .transform((val) => val?.split(" "))
+ .pipe(
+ z.array(z.string().url())
+ .optional()
+ )
+ .describe("Optional: Space-separated list of CDN URLs"),
},
}),📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ValidateEnv({ | |
| validator: "zod", | |
| schema: { | |
| REACT_CARE_API_URL: z.string().url(), | |
| REACT_SENTRY_DSN: z.string().url().optional(), | |
| REACT_SENTRY_ENVIRONMENT: z.string().optional(), | |
| REACT_PLAUSIBLE_SITE_DOMAIN: z.string().url().optional(), | |
| REACT_PLAUSIBLE_SERVER_URL: z.string().url().optional(), | |
| }, | |
| }), | |
| ValidateEnv({ | |
| validator: "zod", | |
| schema: { | |
| REACT_CARE_API_URL: z.string().url(), | |
| REACT_SENTRY_DSN: z.string().url().optional(), | |
| REACT_SENTRY_ENVIRONMENT: z.string().optional(), | |
| REACT_PLAUSIBLE_SITE_DOMAIN: z.string().url().optional(), | |
| REACT_PLAUSIBLE_SERVER_URL: z.string().url().optional(), | |
| // Validate space-separated CDN URLs | |
| REACT_CDN_URLS: z.string() | |
| .optional() | |
| .transform((val) => val?.split(" ")) | |
| .pipe( | |
| z.array(z.string().url()) | |
| .optional() | |
| ) | |
| .describe("Optional: Space-separated list of CDN URLs"), | |
| }, | |
| }), |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
@julr/vite-plugin-validate-envandzod).Bug Fixes
PlausibleandSentrycomponents to ensure correct configuration before execution.Documentation