Improve user experience with better errors.

[supervoidcoder]

If you remember that one story back in november where Apple pushed a stupid update called 18.7.2 under build 22H123 that broke literally every aspect of WebGL in the entire system (like not kidding LITERALLY EVERYTHING).

One day, I was opening  OmniBlocks on my iPad. That's weird. The VM crashed. I tried to look it up and I went panicking to my codebase thinking I had screwed the code up or maybe one of my collaborators had pushed a stupid commit to main. But before doing that... I checked. I went to turbowarp. It crashed too. Same error. Scratch? Boom, same thing! Scratch doesn't give you the technical error, but it still crashed. Penguinmod? Boom. Ampmod? boom. then I tried doing a webgl test online where EVERY. SINGLE. TEST. FAILED. why was this happening? I KNOW for sure that Scratch and every one of its mods has a specific modal for when it detects having no WebGL, telling you that your browser doesn't support WebGL. But this time it didn't show up. I looked up what was happening, and it turned out that Apple, yes, Apple, was the one who pushed a stupid update called  18.7.2 that completely broke WebGL on the system. All of it. Anything using WebGL broke. It turns out that this build, build 22H123, was entirely broken. They pushed a silent fix sneakily under the same version number but under a different build, now called build 22H124. Unfortunately, my iPad didn't get that silent fix until like 2 months after first discovering this. But back to the problem, why didn't it showed the modal? Aha! Webkit was lying all along! Webkit (and therefore Safari) kept telling sites that WebGL was supported. Then those sites tried to compile a shader, and it didn't work, so they crashed. I created a new modal to test if the website was lying about WebGL working, but not actually working. And it works! Now even though OmniBlocks was still broken, at least my iPad showed a nice little modal with a little frown face image than showing an ugly VM error.

So under PR #390 and issues #393 and #367, I added a new modal that gives you more specific stuff (/src/components/webgl-broken-modal/webgl-broken-modal.jsx) alongside the existiing broken modal. This improved the user experience by showing a modal instead of an ugly vm error, but I was wondering, why not do more?
We should find more errors and translate some known VM errors into less cryptic ones. I saw one where if you load a big project with barely any RAM left, the VM gave an ugly error about "blah blah out of memory". For this and other known errors, we should give a more friendly version of it!!

[supervoidcoder]

@coderabbitai can you go check out those links to prs and issues and then tell me about this idea, what's plausible, and some errors we can beautify right now?

[traycerai]

Plan

Observations

The codebase already has a solid foundation for error handling with:

• A WebGL broken modal (file:src/components/webgl-broken-modal/webgl-broken-modal.jsx) that detects when WebGL claims support but is actually broken
• An invalid project modal (file:src/components/tw-invalid-project-modal/invalid-project-modal.jsx) for project loading errors
• An alert system (file:src/reducers/alerts.js) for displaying user-friendly notifications
• Error boundaries (file:src/lib/error-boundary-hoc.jsx) that catch React errors and display crash messages
• Project error handling in file:src/lib/sb-file-uploader-hoc.jsx and file:src/lib/vm-manager-hoc.jsx

The current system catches VM errors during project loading and displays them in the invalid project modal, but shows raw technical error messages that are cryptic to users.

Approach

The plan focuses on creating a user-friendly error translation layer that intercepts known VM errors and converts them into helpful, actionable messages. This will be implemented by:

1. Creating an error classifier that identifies common error patterns (out of memory, corrupted project data, missing extensions, etc.)
2. Building a friendly error message system with localized messages and helpful suggestions
3. Enhancing the invalid project modal to display user-friendly errors with recovery options
4. Adding new specialized modals for specific error types when appropriate
5. Updating error handling in VM loading paths to use the new error translation system

This approach maintains the existing architecture while adding a translation layer between raw VM errors and user-facing messages, similar to how the WebGL broken modal already improves the user experience.

Implementation Steps

1. Create Error Classification System

File: file:src/lib/error-classifier.js (new file)

Create a utility module that analyzes error objects and classifies them into user-friendly categories:

• Define error categories: OUT_OF_MEMORY, CORRUPTED_PROJECT, MISSING_EXTENSION, INVALID_FORMAT, NETWORK_ERROR, QUOTA_EXCEEDED, UNKNOWN
• Implement classifyError(error) function that examines error messages, stack traces, and error types
• Pattern matching for common errors:
  • Out of memory: Match "out of memory", "OOM", "memory", "allocation failed"
  • Corrupted project: Match "validationError", "corrupt", "invalid JSON", "parse error"
  • Missing extension: Match "extension", "not found", "missing"
  • Invalid format: Match "format", "version", "unsupported"
  • Quota exceeded: Match "quota", "storage", "exceeded"
• Return classification object with category, severity, and extracted details

2. Create Friendly Error Messages

File: file:src/lib/alerts/friendly-errors.jsx (new file)

Define user-friendly error messages with localization support:

• Create FormattedMessage components for each error category
• Include:
  • Simple, non-technical explanation of what went wrong
  • Why it might have happened
  • Actionable steps to resolve the issue
  • Links to help documentation where appropriate
• Messages should include:
  • Out of Memory: "Your device doesn't have enough memory to load this project. Try closing other apps or tabs, or try a smaller project."
  • Corrupted Project: "This project file appears to be damaged. You may be able to recover it from restore points or backups."
  • Missing Extension: "This project uses an extension that isn't available. The project may not work correctly."
  • Invalid Format: "This file format isn't supported or the project was created with a newer version."
  • Quota Exceeded: "Your browser's storage is full. Try clearing some space or downloading the project to your computer."

3. Enhance Invalid Project Modal

File: file:src/components/tw-invalid-project-modal/invalid-project-modal.jsx

Update the modal to display friendly errors:

• Import error classifier and friendly error messages
• Add logic to classify the error when modal is displayed
• Show friendly error message prominently at the top
• Keep technical details in collapsible section for advanced users
• Add category-specific action buttons:
  • Out of Memory: "Try Smaller Project", "Close Other Tabs"
  • Corrupted Project: "View Restore Points" (already exists), "Report Issue"
  • Missing Extension: "View Extensions", "Continue Anyway"
  • Quota Exceeded: "Clear Storage", "Download Project"
• Add icon/emoji based on error category for visual recognition
• Update CSS to support new layout with friendly message section

File: file:src/components/tw-invalid-project-modal/invalid-project-modal.css

Add styles for:

• Friendly error message section (larger, more prominent)
• Error category icons
• Collapsible technical details section
• Category-specific action buttons

4. Create Out of Memory Modal

File: file:src/components/out-of-memory-modal/out-of-memory-modal.jsx (new file)
File: file:src/components/out-of-memory-modal/out-of-memory-modal.css (new file)
File: file:src/containers/out-of-memory-modal.jsx (new file)

Create a specialized modal for out-of-memory errors:

• Display friendly message about memory issues
• Show memory usage tips (close tabs, restart browser, use smaller projects)
• Provide "Try Again" button that attempts to reload with memory optimizations
• Include "Download Project" option to save before closing
• Add device-specific tips (detect if mobile/tablet and suggest desktop)
• Follow the same pattern as file:src/components/webgl-broken-modal/webgl-broken-modal.jsx

5. Update Modal System

File: file:src/reducers/modals.js

Add new modal types:

• Add MODAL_OUT_OF_MEMORY constant
• Add to initialState object
• Create openOutOfMemoryModal() and closeOutOfMemoryModal() action creators
• Export new actions

6. Update TW Reducer for Error Context

File: file:src/reducers/tw.js

Enhance project error storage:

• Modify projectError state to store both raw error and classification
• Update setProjectError action to accept classification metadata
• Store additional context: error category, friendly message key, suggested actions

7. Update Error Handling in File Uploader

File: file:src/lib/sb-file-uploader-hoc.jsx

Enhance error handling in onLoadingFailed:

• Import error classifier
• Classify error before dispatching
• Dispatch classified error with metadata
• Decide which modal to show based on error category:
  • Out of memory → openOutOfMemoryModal()
  • Other errors → openInvalidProjectModal()
• Pass classification to modal via state

8. Update Error Handling in VM Manager

File: file:src/lib/vm-manager-hoc.jsx

Update loadProject error handling:

• Import error classifier
• Classify errors in catch block
• Dispatch classified errors with metadata
• Log classification for debugging

9. Update GUI Component

File: file:src/components/gui/gui.jsx

Add new modal to always-enabled modals section:

• Import OutOfMemoryModal container
• Add conditional rendering based on modal state
• Place alongside other error modals in alwaysEnabledModals fragment

File: file:src/containers/gui.jsx

Map modal state to props:

• Add outOfMemoryModalVisible to mapStateToProps
• Read from state.scratchGui.modals.outOfMemoryModal

10. Add Alert for Non-Fatal Errors

File: file:src/lib/alerts/index.jsx

Add new alert types for non-fatal errors:

• memoryWarning: Warning when memory is getting low
• extensionMissing: Info alert when project uses unavailable extension
• projectPartiallyLoaded: Warning when project loaded but with issues
• Configure with appropriate icons, levels, and auto-dismiss timeouts

11. Create Error Recovery Utilities

File: file:src/lib/error-recovery.js (new file)

Implement recovery strategies:

• attemptMemoryCleanup(): Clear caches, trigger garbage collection hints
• simplifyProject(): Suggest removing large assets or sprites
• getStorageUsage(): Check browser storage quota
• clearOldRestorePoints(): Free up storage space
• suggestAlternatives(): Recommend TurboWarp Desktop for large projects

12. Update Localization Files

Files: file:src/l10n/en.json and other language files

Add translation keys for all new error messages:

• Friendly error descriptions
• Recovery suggestions
• Modal titles and button labels
• Alert messages
• Follow existing naming convention: tw.errors.* or gui.errors.*

13. Add Error Logging Enhancement

File: file:src/lib/log.js

Enhance logging for better debugging:

• Add logClassifiedError(error, classification) function
• Include classification metadata in logs
• Add user-friendly message to logs for support purposes
• Maintain existing error logging behavior

14. Testing Considerations

While testing is not explicitly requested, consider these areas for validation:

• Test error classification with various error types
• Verify modal displays correctly for each error category
• Ensure localization works for all new messages
• Test on devices with limited memory
• Verify technical details remain accessible for debugging

Error Classification Patterns

flowchart TD
    A[VM Error Caught] --> B{Classify Error}
    B -->|Memory keywords| C[OUT_OF_MEMORY]
    B -->|Validation keywords| D[CORRUPTED_PROJECT]
    B -->|Extension keywords| E[MISSING_EXTENSION]
    B -->|Format keywords| F[INVALID_FORMAT]
    B -->|Storage keywords| G[QUOTA_EXCEEDED]
    B -->|No match| H[UNKNOWN]
    
    C --> I[Show Out of Memory Modal]
    D --> J[Show Invalid Project Modal<br/>with corruption help]
    E --> J
    F --> J
    G --> J
    H --> J
    
    I --> K[Offer Recovery Options]
    J --> K
    K --> L[User Takes Action]

Loading

Modal Display Flow

sequenceDiagram
    participant User
    participant FileUploader
    participant VM
    participant Classifier
    participant Redux
    participant Modal
    
    User->>FileUploader: Load Project
    FileUploader->>VM: vm.loadProject()
    VM-->>FileUploader: Error thrown
    FileUploader->>Classifier: classifyError(error)
    Classifier-->>FileUploader: {category, message, actions}
    FileUploader->>Redux: setProjectError(classified)
    FileUploader->>Redux: openAppropriateModal()
    Redux-->>Modal: Update state
    Modal->>User: Display friendly error
    User->>Modal: Click recovery action
    Modal->>Redux: Execute recovery

Loading

Key Files Reference

Component	File Path	Purpose
Error Classifier	file:src/lib/error-classifier.js	Categorize errors
Friendly Messages	file:src/lib/alerts/friendly-errors.jsx	User-facing error text
Invalid Project Modal	file:src/components/tw-invalid-project-modal/invalid-project-modal.jsx	Enhanced error display
Out of Memory Modal	file:src/components/out-of-memory-modal/out-of-memory-modal.jsx	Specialized memory error
File Uploader	file:src/lib/sb-file-uploader-hoc.jsx	Error handling on upload
VM Manager	file:src/lib/vm-manager-hoc.jsx	Error handling on load
Modals Reducer	file:src/reducers/modals.js	Modal state management
TW Reducer	file:src/reducers/tw.js	Error state storage
Alerts	file:src/lib/alerts/index.jsx	Non-fatal error alerts

Import In IDE

🤖 Prompt for AI Agents

## Observations

The codebase already has a solid foundation for error handling with:
- A WebGL broken modal (`file:src/components/webgl-broken-modal/webgl-broken-modal.jsx`) that detects when WebGL claims support but is actually broken
- An invalid project modal (`file:src/components/tw-invalid-project-modal/invalid-project-modal.jsx`) for project loading errors
- An alert system (`file:src/reducers/alerts.js`) for displaying user-friendly notifications
- Error boundaries (`file:src/lib/error-boundary-hoc.jsx`) that catch React errors and display crash messages
- Project error handling in `file:src/lib/sb-file-uploader-hoc.jsx` and `file:src/lib/vm-manager-hoc.jsx`

The current system catches VM errors during project loading and displays them in the invalid project modal, but shows raw technical error messages that are cryptic to users.

## Approach

The plan focuses on creating a user-friendly error translation layer that intercepts known VM errors and converts them into helpful, actionable messages. This will be implemented by:

1. Creating an error classifier that identifies common error patterns (out of memory, corrupted project data, missing extensions, etc.)
2. Building a friendly error message system with localized messages and helpful suggestions
3. Enhancing the invalid project modal to display user-friendly errors with recovery options
4. Adding new specialized modals for specific error types when appropriate
5. Updating error handling in VM loading paths to use the new error translation system

This approach maintains the existing architecture while adding a translation layer between raw VM errors and user-facing messages, similar to how the WebGL broken modal already improves the user experience.

## Implementation Steps

### 1. Create Error Classification System

**File: `file:src/lib/error-classifier.js`** (new file)

Create a utility module that analyzes error objects and classifies them into user-friendly categories:

- Define error categories: `OUT_OF_MEMORY`, `CORRUPTED_PROJECT`, `MISSING_EXTENSION`, `INVALID_FORMAT`, `NETWORK_ERROR`, `QUOTA_EXCEEDED`, `UNKNOWN`
- Implement `classifyError(error)` function that examines error messages, stack traces, and error types
- Pattern matching for common errors:
  - Out of memory: Match "out of memory", "OOM", "memory", "allocation failed"
  - Corrupted project: Match "validationError", "corrupt", "invalid JSON", "parse error"
  - Missing extension: Match "extension", "not found", "missing"
  - Invalid format: Match "format", "version", "unsupported"
  - Quota exceeded: Match "quota", "storage", "exceeded"
- Return classification object with category, severity, and extracted details

### 2. Create Friendly Error Messages

**File: `file:src/lib/alerts/friendly-errors.jsx`** (new file)

Define user-friendly error messages with localization support:

- Create `FormattedMessage` components for each error category
- Include:
  - Simple, non-technical explanation of what went wrong
  - Why it might have happened
  - Actionable steps to resolve the issue
  - Links to help documentation where appropriate
- Messages should include:
  - **Out of Memory**: "Your device doesn't have enough memory to load this project. Try closing other apps or tabs, or try a smaller project."
  - **Corrupted Project**: "This project file appears to be damaged. You may be able to recover it from restore points or backups."
  - **Missing Extension**: "This project uses an extension that isn't available. The project may not work correctly."
  - **Invalid Format**: "This file format isn't supported or the project was created with a newer version."
  - **Quota Exceeded**: "Your browser's storage is full. Try clearing some space or downloading the project to your computer."

### 3. Enhance Invalid Project Modal

**File: `file:src/components/tw-invalid-project-modal/invalid-project-modal.jsx`**

Update the modal to display friendly errors:

- Import error classifier and friendly error messages
- Add logic to classify the error when modal is displayed
- Show friendly error message prominently at the top
- Keep technical details in collapsible section for advanced users
- Add category-specific action buttons:
  - Out of Memory: "Try Smaller Project", "Close Other Tabs"
  - Corrupted Project: "View Restore Points" (already exists), "Report Issue"
  - Missing Extension: "View Extensions", "Continue Anyway"
  - Quota Exceeded: "Clear Storage", "Download Project"
- Add icon/emoji based on error category for visual recognition
- Update CSS to support new layout with friendly message section

**File: `file:src/components/tw-invalid-project-modal/invalid-project-modal.css`**

Add styles for:
- Friendly error message section (larger, more prominent)
- Error category icons
- Collapsible technical details section
- Category-specific action buttons

### 4. Create Out of Memory Modal

**File: `file:src/components/out-of-memory-modal/out-of-memory-modal.jsx`** (new file)
**File: `file:src/components/out-of-memory-modal/out-of-memory-modal.css`** (new file)
**File: `file:src/containers/out-of-memory-modal.jsx`** (new file)

Create a specialized modal for out-of-memory errors:

- Display friendly message about memory issues
- Show memory usage tips (close tabs, restart browser, use smaller projects)
- Provide "Try Again" button that attempts to reload with memory optimizations
- Include "Download Project" option to save before closing
- Add device-specific tips (detect if mobile/tablet and suggest desktop)
- Follow the same pattern as `file:src/components/webgl-broken-modal/webgl-broken-modal.jsx`

### 5. Update Modal System

**File: `file:src/reducers/modals.js`**

Add new modal types:

- Add `MODAL_OUT_OF_MEMORY` constant
- Add to `initialState` object
- Create `openOutOfMemoryModal()` and `closeOutOfMemoryModal()` action creators
- Export new actions

### 6. Update TW Reducer for Error Context

**File: `file:src/reducers/tw.js`**

Enhance project error storage:

- Modify `projectError` state to store both raw error and classification
- Update `setProjectError` action to accept classification metadata
- Store additional context: error category, friendly message key, suggested actions

### 7. Update Error Handling in File Uploader

**File: `file:src/lib/sb-file-uploader-hoc.jsx`**

Enhance error handling in `onLoadingFailed`:

- Import error classifier
- Classify error before dispatching
- Dispatch classified error with metadata
- Decide which modal to show based on error category:
  - Out of memory → `openOutOfMemoryModal()`
  - Other errors → `openInvalidProjectModal()`
- Pass classification to modal via state

### 8. Update Error Handling in VM Manager

**File: `file:src/lib/vm-manager-hoc.jsx`**

Update `loadProject` error handling:

- Import error classifier
- Classify errors in catch block
- Dispatch classified errors with metadata
- Log classification for debugging

### 9. Update GUI Component

**File: `file:src/components/gui/gui.jsx`**

Add new modal to always-enabled modals section:

- Import `OutOfMemoryModal` container
- Add conditional rendering based on modal state
- Place alongside other error modals in `alwaysEnabledModals` fragment

**File: `file:src/containers/gui.jsx`**

Map modal state to props:

- Add `outOfMemoryModalVisible` to `mapStateToProps`
- Read from `state.scratchGui.modals.outOfMemoryModal`

### 10. Add Alert for Non-Fatal Errors

**File: `file:src/lib/alerts/index.jsx`**

Add new alert types for non-fatal errors:

- `memoryWarning`: Warning when memory is getting low
- `extensionMissing`: Info alert when project uses unavailable extension
- `projectPartiallyLoaded`: Warning when project loaded but with issues
- Configure with appropriate icons, levels, and auto-dismiss timeouts

### 11. Create Error Recovery Utilities

**File: `file:src/lib/error-recovery.js`** (new file)

Implement recovery strategies:

- `attemptMemoryCleanup()`: Clear caches, trigger garbage collection hints
- `simplifyProject()`: Suggest removing large assets or sprites
- `getStorageUsage()`: Check browser storage quota
- `clearOldRestorePoints()`: Free up storage space
- `suggestAlternatives()`: Recommend TurboWarp Desktop for large projects

### 12. Update Localization Files

**Files: `file:src/l10n/en.json`** and other language files

Add translation keys for all new error messages:

- Friendly error descriptions
- Recovery suggestions
- Modal titles and button labels
- Alert messages
- Follow existing naming convention: `tw.errors.*` or `gui.errors.*`

### 13. Add Error Logging Enhancement

**File: `file:src/lib/log.js`**

Enhance logging for better debugging:

- Add `logClassifiedError(error, classification)` function
- Include classification metadata in logs
- Add user-friendly message to logs for support purposes
- Maintain existing error logging behavior

### 14. Testing Considerations

While testing is not explicitly requested, consider these areas for validation:

- Test error classification with various error types
- Verify modal displays correctly for each error category
- Ensure localization works for all new messages
- Test on devices with limited memory
- Verify technical details remain accessible for debugging

## Error Classification Patterns

```mermaid
flowchart TD
    A[VM Error Caught] --> B{Classify Error}
    B -->|Memory keywords| C[OUT_OF_MEMORY]
    B -->|Validation keywords| D[CORRUPTED_PROJECT]
    B -->|Extension keywords| E[MISSING_EXTENSION]
    B -->|Format keywords| F[INVALID_FORMAT]
    B -->|Storage keywords| G[QUOTA_EXCEEDED]
    B -->|No match| H[UNKNOWN]
    
    C --> I[Show Out of Memory Modal]
    D --> J[Show Invalid Project Modal<br/>with corruption help]
    E --> J
    F --> J
    G --> J
    H --> J
    
    I --> K[Offer Recovery Options]
    J --> K
    K --> L[User Takes Action]
```

## Modal Display Flow

```mermaid
sequenceDiagram
    participant User
    participant FileUploader
    participant VM
    participant Classifier
    participant Redux
    participant Modal
    
    User->>FileUploader: Load Project
    FileUploader->>VM: vm.loadProject()
    VM-->>FileUploader: Error thrown
    FileUploader->>Classifier: classifyError(error)
    Classifier-->>FileUploader: {category, message, actions}
    FileUploader->>Redux: setProjectError(classified)
    FileUploader->>Redux: openAppropriateModal()
    Redux-->>Modal: Update state
    Modal->>User: Display friendly error
    User->>Modal: Click recovery action
    Modal->>Redux: Execute recovery
```

## Key Files Reference

| Component | File Path | Purpose |
|-----------|-----------|---------|
| Error Classifier | `file:src/lib/error-classifier.js` | Categorize errors |
| Friendly Messages | `file:src/lib/alerts/friendly-errors.jsx` | User-facing error text |
| Invalid Project Modal | `file:src/components/tw-invalid-project-modal/invalid-project-modal.jsx` | Enhanced error display |
| Out of Memory Modal | `file:src/components/out-of-memory-modal/out-of-memory-modal.jsx` | Specialized memory error |
| File Uploader | `file:src/lib/sb-file-uploader-hoc.jsx` | Error handling on upload |
| VM Manager | `file:src/lib/vm-manager-hoc.jsx` | Error handling on load |
| Modals Reducer | `file:src/reducers/modals.js` | Modal state management |
| TW Reducer | `file:src/reducers/tw.js` | Error state storage |
| Alerts | `file:src/lib/alerts/index.jsx` | Non-fatal error alerts |

---

Execution Information

Branch: main
Commit: bcc3bb9

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

Hi @supervoidcoder! This is a really interesting proposal, and your example from the WebGL issue perfectly illustrates the importance of providing user-friendly error messages. Improving error reporting in OmniBlocks can definitely enhance the user experience, especially for less technical users who might otherwise get stuck.

Based on your example with the out-of-memory error, it does make sense to create more user-friendly modals for common errors that the VM encounters. For instance, you could detect specific WebGL, memory, or even file upload-related issues, and display tailored messages with possible solutions or explanations. Enhancing those messages with some visuals or actionable advice can help reduce user frustration.

Checking those linked PRs/issues would provide some inspiration for which errors have already been addressed and highlight what could be improved next. For now, focusing on frequently occurring errors that less technical users are likely to encounter should be a good starting point! Let me know if there’s anything else I can help brainstorm!

[supervoidcoder]

@coderabbitai omg bro stop stuffing absolutely A GAZILLION tokens down your context window!!!!! do tthat again without the last script
"#!/bin/bash
set -e
echo "==== vm-listener-hoc.jsx (first 220 lines) ===="
sed -n '1,220p' src/lib/vm-listener-hoc.jsx || true
echo "==== vm-listener-hoc.jsx (rest) ===="
sed -n '221,520p' src/lib/vm-listener-hoc.jsx || true

echo "==== loader.jsx (first 240 lines) ===="
sed -n '1,240p' src/components/loader/loader.jsx || true

echo "==== Search handlers around COMPILE_ERROR and PLATFORM_MISMATCH ===="
rg -n --no-heading -S "COMPILE_ERROR|handleCompileError|PLATFORM_MISMATCH|onPlatformMismatch" src | sed -n '1,200p'

echo "==== Grep for unhandledrejection/window.onerror hooks ===="
rg -n --no-heading -S "unhandledrejection|window\.onerror|addEventListener\(['"]error['"]" src || true

echo "==== Grep for storage/quota and microphone permission error strings ===="
rg -n --no-heading -S "QuotaExceededError|NotAllowedError|NotFoundError|getUserMedia|indexedDB|localStorage" src || true

echo "==== Playground VM init timeout throw site ===="
sed -n '40,80p' src/playground/load-file-handler.js || true"

because that's the one that made you speak drunk again