Fix dashboard sandbox compile errors and switch smart model to Grok#1476
Fix dashboard sandbox compile errors and switch smart model to Grok#1476mantrakp04 wants to merge 2 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughSwitch authenticated smart-quality backend model IDs to x-ai/grok-build-0.1 and refactor the dashboard iframe sandbox to load Babel with crossorigin, install an early error bridge, embed AI source in a text/plain script, compile with Babel.transform, and execute compiled code with scoped globals and a compile-failure UI. ChangesAI Model and Sandbox Execution
🎯 4 (Complex) | ⏱️ ~45 minutes Suggested reviewers:
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
mantrakp04
force-pushed
the
fix/dashboard-sandbox-errors-and-grok-model
branch
2 times, most recently
from
e11c08f to
f2d62da
Compare
Greptile SummaryThis PR improves AI dashboard sandbox error visibility and switches the smart authenticated model to
Confidence Score: 4/5Safe to merge; the sandbox changes are well-isolated to the iframe document string and handle the main error paths correctly. The model switch is trivial and correct. The sandbox refactor is thoughtful — early listener, explicit compile, new Function execution, and duplicate-listener removal all work together. The one gap is that window.Babel is accessed without an existence guard, so a CDN load failure produces a generic message rather than pointing to Babel as the culprit. apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx — the Babel.transform call site would benefit from a window.Babel existence check. Important Files Changed
Prompt To Fix All With AIFix the following 1 code review issue. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 1
apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx:551-554
`window.Babel` is accessed without a guard: if the CDN script fails to load (network timeout, unpkg outage), `window.Babel` is `undefined` and `window.Babel.transform(...)` throws a `TypeError: Cannot read properties of undefined (reading 'transform')`. This propagates to the outer `.catch()` and surfaces as the generic "Failed to initialize dashboard" message — with no indication that Babel itself never loaded. A short existence check here would give users an actionable error.
```suggestion
let compiledSource;
try {
if (!window.Babel || typeof window.Babel.transform !== 'function') {
throw new Error('Babel failed to load — check your network connection and try again.');
}
compiledSource = window.Babel.transform(aiSource, { presets: ['react'] }).code;
} catch (err) {
```
Reviews (2): Last reviewed commit: "Refactor error handling in dashboard san..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull request overview
This PR improves the AI dashboard sandbox preview experience by surfacing compilation/runtime failures from the sandboxed srcDoc iframe back to the dashboard composer, and updates the backend “smart” authenticated model routing to use Grok.
Changes:
- Add iframe → parent error forwarding for compile/runtime errors, and compile AI-generated JSX explicitly via
Babel.transformwith a try/catch to surface parse errors. - Adjust Babel loading to improve cross-origin error readability (
crossorigin="anonymous"). - Switch authenticated smart-tier model selection from
moonshotai/kimi-k2.6:nitrotox-ai/grok-build-0.1.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx | Enhances sandbox iframe error reporting and changes how AI code is compiled/executed. |
| apps/backend/src/lib/ai/models.ts | Updates smart-tier authenticated model ID selection. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx (1)
486-501:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDuplicate error/unhandledrejection listeners.
These event listeners are duplicates of the ones installed earlier at lines 362-369 in the IIFE block. Both register handlers for
'error'and'unhandledrejection'that post the same'dashboard-error-boundary'message to the parent. This causes each error to be reported twice.Remove these duplicate listeners since the early IIFE (lines 350-371) already covers this case and runs before any AI code.
Proposed fix
- // Forward uncaught runtime errors (async throws, unhandled rejections) that never - // reach the React boundary. React ErrorBoundary alone misses these, so without this - // the parent has no way to observe e.g. a fetch() that rejected inside useEffect. - window.addEventListener('error', (event) => { - const err = event?.error; - window.parent.postMessage({ - type: 'dashboard-error-boundary', - message: err?.message || event?.message || 'Unknown runtime error', - stack: err?.stack, - }, '*'); - }); - window.addEventListener('unhandledrejection', (event) => { - const reason = event?.reason; - window.parent.postMessage({ - type: 'dashboard-error-boundary', - message: (reason && (reason.message || String(reason))) || 'Unhandled promise rejection', - stack: reason?.stack, - }, '*'); - });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx` around lines 486 - 501, Remove the duplicate global error handlers that post 'dashboard-error-boundary' to the parent: delete the second pair of window.addEventListener calls for 'error' and 'unhandledrejection' in dashboard-sandbox-host.tsx (the handlers that extract event?.error / event?.reason and call window.parent.postMessage with type 'dashboard-error-boundary'); rely on the existing IIFE-installed listeners (the earlier IIFE block that already registers 'error' and 'unhandledrejection') so each runtime error or promise rejection is reported only once.
🧹 Nitpick comments (1)
apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx (1)
566-570: 💤 Low valueAdd defensive check for missing source element.
If
ai-dashboard-sourceelement is somehow missing,aiSourcebecomes an empty string, which would then fail during execution with a confusing "Dashboard component not found" error rather than a clear message about the missing source.Proposed improvement
const aiSourceEl = document.getElementById('ai-dashboard-source'); - const aiSource = aiSourceEl ? aiSourceEl.textContent : ''; + if (!aiSourceEl) { + throw new Error('AI dashboard source element not found'); + } + const aiSource = aiSourceEl.textContent || '';🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx` around lines 566 - 570, The code assumes document.getElementById('ai-dashboard-source') exists; add a defensive check after retrieving aiSourceEl (and before calling window.Babel.transform) to handle a missing element or empty source: if aiSourceEl is null or aiSource is empty, throw or log a clear error like "Missing ai-dashboard-source element or empty dashboard source" and bail early (so compiledSource isn't attempted); update the block that references aiSourceEl, aiSource and compiledSource and ensure any downstream logic that expects compiledSource handles this early-exit path.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In
`@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx`:
- Around line 486-501: Remove the duplicate global error handlers that post
'dashboard-error-boundary' to the parent: delete the second pair of
window.addEventListener calls for 'error' and 'unhandledrejection' in
dashboard-sandbox-host.tsx (the handlers that extract event?.error /
event?.reason and call window.parent.postMessage with type
'dashboard-error-boundary'); rely on the existing IIFE-installed listeners (the
earlier IIFE block that already registers 'error' and 'unhandledrejection') so
each runtime error or promise rejection is reported only once.
---
Nitpick comments:
In
`@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx`:
- Around line 566-570: The code assumes
document.getElementById('ai-dashboard-source') exists; add a defensive check
after retrieving aiSourceEl (and before calling window.Babel.transform) to
handle a missing element or empty source: if aiSourceEl is null or aiSource is
empty, throw or log a clear error like "Missing ai-dashboard-source element or
empty dashboard source" and bail early (so compiledSource isn't attempted);
update the block that references aiSourceEl, aiSource and compiledSource and
ensure any downstream logic that expects compiledSource handles this early-exit
path.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: a00205d3-1555-41e9-8755-7a696aa186dc
📒 Files selected for processing (2)
apps/backend/src/lib/ai/models.tsapps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
Forward Babel/JSX parse failures from the AI dashboard iframe to the parent composer instead of showing a blank preview, and use x-ai/grok-build-0.1 for authenticated smart-tier requests.
mantrakp04
force-pushed
the
fix/dashboard-sandbox-errors-and-grok-model
branch
from
f2d62da to
8685ca0
Compare
Updated the dashboard sandbox to replace script closing tags in the source code to prevent parsing issues. Removed redundant global error listeners, as uncaught runtime errors and unhandled rejections are now handled by an early listener installed before Babel loads.
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx (1)
486-501:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDuplicate error listeners cause double error reporting.
These
errorandunhandledrejectionlisteners duplicate the ones installed earlier (lines 362-369). Both fire for the same event, soonRuntimeErroris invoked twice per error. Remove this block since the early listener already covers runtime errors.Proposed fix: remove duplicate listeners
- // Forward uncaught runtime errors (async throws, unhandled rejections) that never - // reach the React boundary. React ErrorBoundary alone misses these, so without this - // the parent has no way to observe e.g. a fetch() that rejected inside useEffect. - window.addEventListener('error', (event) => { - const err = event?.error; - window.parent.postMessage({ - type: 'dashboard-error-boundary', - message: err?.message || event?.message || 'Unknown runtime error', - stack: err?.stack, - }, '*'); - }); - window.addEventListener('unhandledrejection', (event) => { - const reason = event?.reason; - window.parent.postMessage({ - type: 'dashboard-error-boundary', - message: (reason && (reason.message || String(reason))) || 'Unhandled promise rejection', - stack: reason?.stack, - }, '*'); - });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx` around lines 486 - 501, Remove the duplicate runtime error handlers: delete the window.addEventListener('error', ...) and window.addEventListener('unhandledrejection', ...) blocks that post messages with type 'dashboard-error-boundary' (the block that constructs message/stack and posts to window.parent). Those listeners duplicate the earlier installed handlers (which call onRuntimeError), so removing this block will stop double-reporting; ensure no other code depends on these specific registrations.
🧹 Nitpick comments (1)
apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx (1)
566-570: ⚡ Quick winAdd defensive check for
Babel.transformresult.
window.Babel.transform(...)returns an object with acodeproperty, but if Babel fails to load or the transform returns unexpectedly, accessing.codecould throw. A defensive check aligns with the coding guidelines.Proposed fix
let compiledSource; try { - compiledSource = window.Babel.transform(aiSource, { presets: ['react'] }).code; + const transformResult = window.Babel.transform(aiSource, { presets: ['react'] }); + if (!transformResult || typeof transformResult.code !== 'string') { + throw new Error('Babel transform returned invalid result'); + } + compiledSource = transformResult.code; } catch (err) {Based on coding guidelines: "Use defensive coding with
?? throwErr(...)over non-null assertions and fallback values".🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx` around lines 566 - 570, The code directly accesses window.Babel.transform(...).code which can throw if Babel is missing or transform returns unexpectedly; change the block to first capture the transform result (e.g., const transformResult = window.Babel.transform(aiSource, { presets: ['react'] })) and then set compiledSource = transformResult.code ?? throwErr('Babel transform returned no code') (or throw a descriptive error) so you defensively handle a missing transform result; update references to compiledSource and the window.Babel.transform call in dashboard-sandbox-host.tsx accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In
`@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx`:
- Around line 486-501: Remove the duplicate runtime error handlers: delete the
window.addEventListener('error', ...) and
window.addEventListener('unhandledrejection', ...) blocks that post messages
with type 'dashboard-error-boundary' (the block that constructs message/stack
and posts to window.parent). Those listeners duplicate the earlier installed
handlers (which call onRuntimeError), so removing this block will stop
double-reporting; ensure no other code depends on these specific registrations.
---
Nitpick comments:
In
`@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx`:
- Around line 566-570: The code directly accesses
window.Babel.transform(...).code which can throw if Babel is missing or
transform returns unexpectedly; change the block to first capture the transform
result (e.g., const transformResult = window.Babel.transform(aiSource, {
presets: ['react'] })) and then set compiledSource = transformResult.code ??
throwErr('Babel transform returned no code') (or throw a descriptive error) so
you defensively handle a missing transform result; update references to
compiledSource and the window.Babel.transform call in dashboard-sandbox-host.tsx
accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 75da2d4b-f29a-40b2-abfc-9567320469ad
📒 Files selected for processing (2)
apps/backend/src/lib/ai/models.tsapps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/backend/src/lib/ai/models.ts
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx (1)
380-380: 💤 Low valueRedundant escaping —
escapeScriptContentalready handles this.The
escapeScriptContentfunction called at line 190 already replaces</script→<\/script. After that transformation, the regex/<\/script>/gihere will never match, making this.replace()a no-op.You can simplify to just
${sourceCode}:🔧 Suggested fix
<script type="text/plain" id="ai-dashboard-source"> -${sourceCode.replace(/<\/script>/gi, '<\\/script>')} +${sourceCode} </script>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx` at line 380, The replace call on sourceCode is redundant because escapeScriptContent already escapes "</script"; update the template to use the raw interpolant `${sourceCode}` instead of `${sourceCode.replace(/<\/script>/gi, '<\\/script>')}` (locate the usage inside the dashboard sandbox host template where escapeScriptContent was applied and the template literal contains that replace) so you remove the no-op regex and simplify the interpolation.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In
`@apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx`:
- Line 380: The replace call on sourceCode is redundant because
escapeScriptContent already escapes "</script"; update the template to use the
raw interpolant `${sourceCode}` instead of `${sourceCode.replace(/<\/script>/gi,
'<\\/script>')}` (locate the usage inside the dashboard sandbox host template
where escapeScriptContent was applied and the template literal contains that
replace) so you remove the no-op regex and simplify the interpolation.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c211f48d-c8f0-4947-ba5b-cc33fdc4ae68
📒 Files selected for processing (1)
apps/dashboard/src/components/commands/create-dashboard/dashboard-sandbox-host.tsx
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| <script type="text/babel"> handler does NOT run it — that handler | ||
| swallows parse errors. The plumbing script below compiles this with a | ||
| try/catch and forwards any SyntaxError to the parent composer. --> | ||
| <script type="text/plain" id="ai-dashboard-source"> |
There was a problem hiding this comment.
Escaped script content in text/plain tags includes literal backslashes when read via textContent, breaking Babel compilation
| const aiSource = aiSourceEl ? aiSourceEl.textContent : ''; | ||
| let compiledSource; | ||
| try { | ||
| compiledSource = window.Babel.transform(aiSource, { presets: ['react'] }).code; |
There was a problem hiding this comment.
| compiledSource = window.Babel.transform(aiSource, { presets: ['react'] }).code; | |
| compiledSource = window.Babel.transform(aiSource, { presets: ['react'], sourceType: 'script' }).code; |
Babel.transform() may output ESM import/export statements that fail execution in new Function() due to missing sourceType: 'script' option
Summary
postMessage, so users see actionable errors instead of a blank previewBabel.transform+ try/catch (stored intext/plainto avoid Babel's auto-handler swallowing parse errors) and addcrossorigin="anonymous"on the Babel script for readable cross-origin error messagesmoonshotai/kimi-k2.6:nitrotox-ai/grok-build-0.1Test plan
x-ai/grok-build-0.1Made with Cursor
Summary by CodeRabbit
Bug Fixes
Updates