Improve error message when questionnaire fetch fails #15082

aashu2006 · 2026-01-09T14:14:34Z

Proposed Changes

Improves the error message shown when importing a questionnaire fails.
The updated message is clearer and more user-friendly.

No existing behavior is changed.

Requesting review from @ohcnetwork/care-fe-code-reviewers

Merge Checklist

Add specs/tests (not required for text-only change)
Update documentation (not applicable)
Ensure that UI text is placed in i18n files
Screenshots or demo (not applicable for text change)
Request peer reviews
QA on mobile devices (not required)
QA on desktop devices (not required)
Add or update Playwright tests (not required)

github-actions · 2026-01-09T14:14:50Z

⚠️ Merge Checklist Incomplete

Thank you for your contribution! To help us review your PR efficiently, please complete the merge checklist in your PR description.

Your PR will be reviewed once you have marked the appropriate checklist items.

To update the checklist:

Change - [ ] to - [x] for completed items
Only check items that are relevant to your PR
Leave items unchecked if they don't apply

The checklist helps ensure code quality, testing coverage, and documentation are properly addressed.

coderabbitai · 2026-01-09T14:14:51Z

Walkthrough

Updated error message in the importQuestionnaire mutation within QuestionnaireEditor component. Changed error text from "Failed to fetch questionnaire" to "Unable to fetch the questionnaire" on non-ok responses. No behavioral modifications.

Changes

Cohort / File(s)	Summary
Error Message Updates `src/components/Questionnaire/QuestionnaireEditor.tsx`	Updated error message text in importQuestionnaire mutation from "Failed to fetch questionnaire" to "Unable to fetch the questionnaire" for non-ok HTTP responses

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main change: improving the error message when questionnaire fetch fails, which is the primary objective of the pull request.
Description check	✅ Passed	The PR description addresses the main change (improved error message) and properly marks inapplicable checklist items as not required for this text-only change.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In @src/components/Questionnaire/QuestionnaireEditor.tsx:
- Line 414: The thrown Error in the response.ok check uses a hardcoded English
string ("Unable to fetch the questionnaire") in QuestionnaireEditor.tsx; replace
it with an i18n string by calling the existing translation function (e.g.,
useTranslation().t or i18n.t) and throw new
Error(t("unable_to_fetch_questionnaire")) (create that key if missing) so
internal logs and error tracking use localized messages; ensure the module
imports/uses useTranslation (or i18n) consistently with other messages (e.g.,
the onError handler) and update any tests or snapshots that assert the exact
error text.
- Around line 411-416: The fetch error thrown in the mutationFn used by
useMutation for importQuestionnaire lacks HTTP status details; update the
mutationFn (the async (url: string) => { ... }) to include response.status (and
optionally response.statusText) in the thrown Error when !response.ok so the
error message contains the HTTP status code and context to aid debugging.

📜 Review details

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c27358b and 2afd423.

📒 Files selected for processing (1)

src/components/Questionnaire/QuestionnaireEditor.tsx

🧰 Additional context used

📓 Path-based instructions (12)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx}: Write concise, technical TypeScript code with accurate examples
Use TypeScript for all code; prefer interfaces over types
Avoid enums; use maps instead
Use TanStack Query for data fetching from the API along with query and mutate utilities for the queryFn and mutationFn
Use raviger for routing

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Use interface for defining object types in TypeScript
Avoid explicit any type in TypeScript
Use proper nullability annotations in TypeScript types
Use dedicated error handlers and TypeScript strict null checks

**/*.{ts,tsx}: Use TypeScript for all new code
Prefer interfaces over types for object definitions in TypeScript
Avoid using any type; use proper type definitions in TypeScript
Use type inference where possible in TypeScript
Use TanStack Query for API data management
Prefer React Context for global state management

**/*.{ts,tsx}: Use TanStack Query with the query and mutate utilities from @/Utils/request/
Use appropriate query keys following the resource pattern for TanStack Query
Leverage TanStack Query built-in features for pagination and debouncing
Implement proper error handling using the global error handler for TanStack Query operations
Use useQuery hook with queryKey and queryFn parameters, where queryFn wraps the API route with the query() utility
Use useMutation hook with mutationFn parameter wrapping API routes with the mutate() utility, and implement onSuccess callbacks to invalidate related queries
Support path parameters in TanStack Query using the pathParams option in query/mutate utilities
Support query parameters in TanStack Query using the queryParams option in query/mutate utilities
Use the silent: true option to suppress global error notifications when custom error handling is needed

**/*.{ts,tsx}: Use TypeScript with strict mode and ES2022 target
Use interface for defining object types
Avoid explicit any types and maint...

Files:

src/components/Questionnaire/QuestionnaireEditor.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{ts,tsx,js,jsx}: Use functional and declarative programming patterns; avoid classes
Prefer iteration and modularization over code duplication
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Use the "function" keyword for pure functions
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

**/*.{ts,tsx,js,jsx}: Use path aliases for imports from src (@/*)
Use double quotes for strings
Semicolons are required at end of statements
Order imports as: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

**/*.{ts,tsx,js,jsx}: Use path aliases @/* for imports from src directory
Use double quotes for strings
Require semicolons at end of statements
Order imports: 3rd-party → library → CAREUI → UI → components → hooks → utils → relative
Use PascalCase for component and class names
Use camelCase for variable and function names

Files:

src/components/Questionnaire/QuestionnaireEditor.tsx

**/*.{tsx,jsx}

📄 CodeRabbit inference engine (.cursorrules)

Use declarative JSX

Files:

src/components/Questionnaire/QuestionnaireEditor.tsx

src/**/*.{ts,tsx}