feat(frontend): replace raw GenVM JSON errors with plain-English messages#1627
Open
0x-normal wants to merge 3 commits into
Open
feat(frontend): replace raw GenVM JSON errors with plain-English messages#16270x-normal wants to merge 3 commits into
0x-normal wants to merge 3 commits into
Conversation
…ages Closes genlayerlabs#1609. When a contract failed to load or deploy in Studio, the user was shown the raw GenVM result wrapped in a Python repr() — a wall of `genvm_log` JSON with the only useful signal (`"message": "invalid_contract absent_runner_comment"`) buried inside. New developers had no path forward without asking on Discord. This change introduces: - `frontend/src/utils/genvmErrors.ts` — defensive parser that extracts the inner GenVM `message` from JSON, Python repr() and bare-string payloads, then maps known codes (the full `VmError` set from `backend/node/genvm/origin/public_abi.py`, plus the `invalid_contract absent_runner_comment` special case) to a `{ title, explanation, fix? }` triple. Unknown codes fall back to a generic friendly message; the original payload is always preserved on `raw` for bug reports. - `frontend/src/components/Simulator/FriendlyError.vue` — renders the parsed result as a red alert with title + explanation + optional fix snippet, plus a collapsed `<details>` "Show technical details" panel that contains the raw payload and a copy-to-clipboard button (built on the existing `CopyTextButton`). - Wires `FriendlyError` into the three call sites that previously surfaced raw errors: - `ConstructorParameters.vue` (was a generic "Could not load contract schema." with no details at all) - `ContractReadMethods.vue` (rendered raw `error.message`) - `ContractWriteMethods.vue` (rendered raw `error.message`) - 21 vitest unit tests covering extraction (clean JSON, Python repr, bare regex), every recognized code, mapping precedence (`absent_runner_comment` before generic `invalid_contract`), the unknown-code fallback, and input normalization (Error / object / string / null). Acceptance criteria from genlayerlabs#1609: - [x] Studio intercepts schema/deploy errors before rendering - [x] Known error codes render plain-English title + explanation + fix - [x] Raw GenVM JSON is collapsed behind "Show technical details" - [x] Unknown codes fall back to a generic friendly message - [x] Copy-to-clipboard button on the raw error
Contributor
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthroughThis PR centralizes GenVM error parsing, adds a FriendlyError Vue component, integrates it into three simulator pages, and adds unit tests for extraction and mappings. ChangesGenVM Error Handling & Display
Sequence DiagramsequenceDiagram
participant SimulatorPage as Simulator Page\n(Constructor/Read/Write)
participant Query as Query Result\n(error object)
participant FriendlyError as FriendlyError\nComponent
participant parseGenVMError as parseGenVMError\nUtility
participant MAPPINGS as Error Code\nMappings
participant UI as Rendered UI
SimulatorPage->>Query: Receives error from query
SimulatorPage->>FriendlyError: Pass error prop
FriendlyError->>parseGenVMError: Parse error
parseGenVMError->>parseGenVMError: Extract message/code
parseGenVMError->>MAPPINGS: Look up code/pattern
MAPPINGS-->>parseGenVMError: Return friendly payload
parseGenVMError-->>FriendlyError: Return FriendlyError object
FriendlyError->>UI: Render title, explanation, optional fix, technical details
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Poem
🚥 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 unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/src/components/Simulator/FriendlyError.vue (1)
1-1: ⚡ Quick winAlign the SFC filename with the repo’s Vue naming convention.
This new file is PascalCase (
FriendlyError.vue), but the frontend guideline asks for kebab-case Vue filenames. Consider renaming tofriendly-error.vueand updating imports.As per coding guidelines, "
frontend/src/**/*.{ts,tsx,vue}: ... prefer PascalCase components, camelCase stores and utilities, and kebab-case Vue file names".🤖 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 `@frontend/src/components/Simulator/FriendlyError.vue` at line 1, Rename the Vue Single File Component from FriendlyError.vue to friendly-error.vue and update all imports/usages to the kebab-case filename (e.g., change import paths referencing "FriendlyError.vue" to "friendly-error.vue"); search for references to FriendlyError (component imports, router lazy-loads, or test files) and update those import paths so they match the new filename, preserving any <script setup> component name or export unchanged.
🤖 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.
Inline comments:
In `@frontend/src/utils/genvmErrors.ts`:
- Around line 209-212: The fallback branch recomputes code with
extractGenVMMessage and loses the normalized/validated code computed earlier in
parseGenVMError; update the fallback return to reuse the already-normalized
variable (the value produced by parseGenVMError's normalization logic) instead
of calling extractGenVMMessage again so that bare-string inputs and unknown
codes are preserved; locate symbols parseGenVMError, extractGenVMMessage and
GENERIC_FALLBACK and replace the fallback object’s code field to reference the
normalized code variable used earlier.
---
Nitpick comments:
In `@frontend/src/components/Simulator/FriendlyError.vue`:
- Line 1: Rename the Vue Single File Component from FriendlyError.vue to
friendly-error.vue and update all imports/usages to the kebab-case filename
(e.g., change import paths referencing "FriendlyError.vue" to
"friendly-error.vue"); search for references to FriendlyError (component
imports, router lazy-loads, or test files) and update those import paths so they
match the new filename, preserving any <script setup> component name or export
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: f78e3f46-fd2a-4835-860f-48232f1e7d43
📒 Files selected for processing (6)
frontend/src/components/Simulator/ConstructorParameters.vuefrontend/src/components/Simulator/ContractReadMethods.vuefrontend/src/components/Simulator/ContractWriteMethods.vuefrontend/src/components/Simulator/FriendlyError.vuefrontend/src/utils/genvmErrors.tsfrontend/test/unit/utils/genvmErrors.test.ts
Per CodeRabbit review: the generic fallback path previously re-ran extractGenVMMessage and dropped the bare-string code, so unrecognized bare inputs came back with code: undefined while recognized bare inputs (e.g. 'OOM') came back with code: 'OOM'. Compute the normalized code once and reuse it in both paths so the field is consistent for any input shape. Adds two regression tests.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #1609.
Summary
When a contract failed to load or deploy in Studio, the user was shown the raw GenVM result wrapped in a Python
repr()— a wall ofgenvm_logJSON with the only useful signal ("message": "invalid_contract absent_runner_comment") buried inside. New developers had no path forward without asking on Discord.This PR intercepts the error in the Studio frontend, maps known GenVM codes to plain-English
{ title, explanation, fix }triples, and collapses the raw payload behind a "Show technical details" toggle with a copy-to-clipboard button for bug reports.What changed
messagefrom JSON, Pythonrepr()output, and bare strings. Maps every VmError code from backend/node/genvm/origin/public_abi.py plus theinvalid_contract absent_runner_commentspecial case. Unknown codes fall back to a generic friendly message;rawis always preserved.<details>"Show technical details" panel containing the raw payload +CopyTextButton.error.message)error.message)absent_runner_commentbefore genericinvalid_contract), the unknown-code fallback, and input normalization (Error / object / string / null).Acceptance criteria (from #1609)
Verification
npx vitest run test/unit/utils/genvmErrors.test.ts— 21/21 passnpx vitest run(full suite, afternode scripts/contract-examples.js) — 31 files, 108/108 passnpx vue-tsc --noEmit— cleanNotes for reviewers
The wording for
timeout/OOM/validator_disagrees/version_too_big/exit_codeis my best inference from the VmError enum and is easy to tweak in review — happy to adjust to your preferred phrasing or to add more codes if I missed any.Summary by CodeRabbit
New Features
Tests