fix(nuxt): suppress client-side errors by crawlers #32137
Conversation
|
|
There was a problem hiding this comment.
Pull Request Overview
This PR addresses client-side error rendering issues by suppressing errors triggered by crawler user agents, mitigating full-page error displays caused by outdated JS chunks or exhausted budgets.
- Introduces a regular expression (BOT_RE) to detect crawler user agents.
- Suppresses error propagation on the client-side when a crawler is detected.
WalkthroughA regular expression 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (3)
✨ Finishing Touches🧪 Generate Unit Tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/nuxt/src/app/components/nuxt-root.vue (2)
59-59: Consider adding a descriptive comment for this bot detection pattern.The regular expression is well-structured to catch common crawler user agents, but adding a comment explaining its purpose would enhance maintainability.
+// Regular expression to detect common search engine crawlers and bots that might trigger client-side errors const BOT_RE = /bot\b|index|spider|facebookexternalhit|crawl|wget|slurp|mediapartners-google|whatsapp/i
62-64: Consider logging suppressed bot errors for monitoring.While suppressing the errors is appropriate, you might want to log them separately for monitoring purposes. This would help track if certain bots consistently trigger specific errors.
if (import.meta.client && BOT_RE.test(navigator.userAgent)) { + console.debug('[nuxt] Suppressing client-side error for crawler:', navigator.userAgent, err) return false }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/nuxt/src/app/components/nuxt-root.vue(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: codeql (javascript-typescript)
- GitHub Check: build
- GitHub Check: code
🔇 Additional comments (1)
packages/nuxt/src/app/components/nuxt-root.vue (1)
62-64:✅ Verification successful
The conditional check appropriately suppresses errors for bots on the client side.
This change aligns well with the PR objective to prevent full-page errors for crawlers. The implementation is elegant and minimally invasive.
🏁 Script executed:
#!/bin/bash # Check if there's any error logging that might be bypassed completely # Look for any additional error logging that should happen before the early return rg "onErrorCaptured|captureError" --type js --type vue -A 10 -B 5Length of output: 95
🏁 Script executed:
#!/bin/bash # Search all .vue files for any error capturing hooks or logging that might be bypassed rg "onErrorCaptured|errorCaptured|captureError" -g '*.vue' -A 10 -B 5Length of output: 6305
No additional error logging is bypassed for bots
A search across all .vue files shows that the only error handler is theonErrorCapturedhook in packages/nuxt/src/app/components/nuxt-root.vue, which:
- Calls the
vue:errorhook and logs any hook errors- Returns early for client-side bots before invoking
showError(intentionally suppressing render errors without skipping any logging)All intended error handling remains intact.
@nuxt/kit
nuxt
@nuxt/schema
@nuxt/rspack-builder
@nuxt/vite-builder
@nuxt/webpack-builder
commit: |
CodSpeed Performance ReportMerging #32137 will not alter performanceComparing Summary
|
|
You sure it's not a good idea to add a log or some sort of telemetry here to track the occurrence? Oof this is a painful bug. Edit |
|
This is a super important update - I were already going insane since I thought this has something to do with my hoster... Hoping for a fast next release :-) |
|
Looks good The only minor thing is if someone is using a bug tracker that just watches for console errors (as opposed to a Vue integration using const unreg = nuxtApp.hook('app:error', (...args) => { console.error('[nuxt] error caught during app initialization', ...args) })We could throw a similar error before returning false if that is important. |
🔗 Linked issue
#29624
📚 Description
the linked issue is extremely pesky
the issue is reproducible across more than just nuxt websites, and seems to be related to a bug in Google's search index which leads to either:
either of these cases can result in a full 500 error page being rendered on the client.
This PR is a relatively safe hotfix for this issue - it will simply suppress the full-page error when triggered by crawlers/bots.