feat(hydration): improve hydration log

[huang-julien]

PR logs both component name and file location for users on hydration mismatch

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/nuxt/hints/@nuxt/hints@258

commit: 0e6afec

[coderabbitai]

📝 Walkthrough

Walkthrough

The hydration mismatch log message in the composables module was updated to format component location information differently. Previously, the message used a fallback operator to display either the component name or file path. The revised message now explicitly separates and displays both the component name and file location using the format "Component ${componentName} at ${fileLocation}".

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: improving the hydration log message to include additional context.
Description check	✅ Passed	The description is directly related to the changeset, explaining that the PR logs both component name and file location for hydration mismatch errors.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/improve_log

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/runtime/hydration/composables.ts`:
- Line 54: The log at logger.warn in composables.ts can print "Component
undefined..." when componentName is missing; update the message to use a safe
fallback (e.g., componentName || '<unknown component>' or a similar default) and
ensure fileLocation also has a sensible fallback if needed before calling
logger.warn so diagnostics read clearly; locate the call that references
componentName and fileLocation and replace with the fallback-aware values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3cffe5da-c1af-4efe-a146-f39ad16d0242

📥 Commits

Reviewing files that changed from the base of the PR and between 1fe7365 and 0e6afec.

📒 Files selected for processing (1)

• src/runtime/hydration/composables.ts

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Avoid logging undefined as component name

Line 54 can emit Component undefined at ... when Vue metadata is missing. Add a fallback for clearer diagnostics.

Suggested patch

-      logger.warn(`[hydration] Component ${componentName} at ${fileLocation} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`)
+      logger.warn(`[hydration] Component ${componentName ?? 'unknown'} at ${fileLocation} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`)

📝 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.

Suggested change

	logger.warn(`[hydration] Component ${componentName} at ${fileLocation} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`)
	logger.warn(`[hydration] Component ${componentName ?? 'unknown'} at ${fileLocation} seems to have different html pre and post-hydration. Please make sure you don't have any hydration issue.`)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/runtime/hydration/composables.ts` at line 54, The log at logger.warn in
composables.ts can print "Component undefined..." when componentName is missing;
update the message to use a safe fallback (e.g., componentName || '<unknown
component>' or a similar default) and ensure fileLocation also has a sensible
fallback if needed before calling logger.warn so diagnostics read clearly;
locate the call that references componentName and fileLocation and replace with
the fallback-aware values.