feat: add error codes and diagnostic context to error display

[PastaPastaPasta]

Summary

• Add error codes (ERR-1001 through ERR-1012) mapped to specific failure categories (key gen, tx build, broadcast, InstantSend lock, registration, top-up, DPNS, etc.)
• Error screen now shows: error code badge, human-readable label, which step failed, the raw error message, and a collapsible Technical Details panel
• "Copy Error Details" button copies a full JSON diagnostic payload including txid, deposit address, UTXO, identity IDs, DPNS state, stack trace, and all relevant context for dev troubleshooting
• Security: signedTxHex intentionally excluded from diagnostics to prevent theft of unbroadcast transactions via bug reports

Test plan

• Trigger errors at various steps (broadcast failure, islock timeout, registration failure) and verify the correct error code is shown
• Click "Copy Error Details" and verify the JSON payload contains relevant context fields (txid, deposit address, identity ID, stack trace, etc.)
• Verify "Copy Error Details" shows "Copy failed" gracefully in non-secure contexts
• Expand the Technical Details section and verify it shows step, addresses, and stack trace
• Confirm signedTxHex is NOT present in copied diagnostics
• Verify "Try Again" button still works correctly

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Error messages now display error codes and identifiers for easier troubleshooting
  • Collapsible technical details section in error view with stack trace
  • "Copy Error Details" button for quick diagnostic sharing

• Bug Fixes

  • Enhanced error handling across operations with improved context tracking
  • Improved error UI styling and layout for better readability

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0ed81329-1d07-4564-832c-8770af98d85a

📥 Commits

Reviewing files that changed from the base of the PR and between 16167e2 and 09b8794.

📒 Files selected for processing (6)

• index.html
• src/main.ts
• src/types.ts
• src/ui/components.ts
• src/ui/index.ts
• src/ui/state.ts

---

📝 Walkthrough

Walkthrough

The pull request introduces a comprehensive error handling enhancement system across the bridge application. Changes include new error code categorization and labels, improved error state tracking with error step recording, enhanced error UI with collapsible technical diagnostics, and updated catch handlers to normalize errors and propagate error codes throughout the application flow.

Changes

Cohort / File(s)	Summary
Error Type & Code System src/types.ts, src/ui/state.ts	Added errorCode and errorStep fields to BridgeState interface. Introduced ErrorCodes and ErrorCodeLabels constants for error categorization, StepErrorCodes mapping, and toError() function for normalizing thrown values. Updated setError() signature to accept optional errorCode parameter and populate derived error metadata.
Error Handler Integration src/main.ts	Integrated new error handling utilities by importing toError and ErrorCodes. Enhanced DPNS authentication error handling to pass error codes. Replaced manual error normalization across multiple catch blocks (startTopUp, startSendToAddress, startBridge, recheckDeposit, startDpnsCheck, startDpnsRegistration) with toError() normalization.
Error UI & Presentation index.html, src/ui/components.ts, src/ui/index.ts	Added error-specific CSS classes for styled error badges, labels, and collapsible technical details section with scrollable content area. Implemented buildErrorDiagnostics() to construct rich diagnostic payloads from state context. Reworked renderErrorStep() to display error code badge, label, failed step info, and collapsible technical details with copy-to-clipboard button. Re-exported error utilities (toError, ErrorCodes, ErrorCodeLabels) from module barrel entrypoint.

Sequence Diagram

sequenceDiagram
    participant Main as Event Handler
    participant State as Error State Manager
    participant UI as UI Renderer
    participant Diagnostics as Diagnostics Builder

    Main->>Main: catch(error)
    Main->>Main: toError(error)<br/>(normalize to Error)
    Main->>State: setError(state, error, errorCode?)
    State->>State: Derive errorCode from<br/>StepErrorCodes or fallback
    State->>State: Record errorStep from<br/>current state.step
    State-->>Main: Return updated state<br/>with error metadata
    Main->>UI: Trigger state update
    UI->>Diagnostics: buildErrorDiagnostics(state)
    Diagnostics->>Diagnostics: Construct diagnostic payload<br/>(code, label, stack,<br/>context, timestamp)
    Diagnostics-->>UI: Return diagnostics object
    UI->>UI: renderErrorStep(state)<br/>Display error code, label,<br/>failed step, collapsible details
    UI->>UI: Render "Copy Error Details"<br/>button with clipboard action

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• feat: add send to platform address mode #15: Changes to error handling and error code propagation in src/main.ts directly align with enhancements to send_to_address and other event handlers touched by this PR.

Poem

🐰 Error codes now shine so bright,
Diagnostics help us see the light,
Stack traces hidden in a fold,
With copy buttons, swift and bold!
Our bridge now knows just where it fell— 🔧

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: add error codes and diagnostic context to error display' directly and concisely describes the main change: introducing structured error codes and enhanced diagnostic information to the error display UI.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/error-codes

---

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