Skip to content

feat: in-app bug report with automatic context collection #291

Description

@NicoRuedaA

Summary

Add a "Report Bug" button in the dashboard header that opens a modal where the user can describe an issue, and automatically collects game context to include in the GitHub issue submission.

Design

Trigger

A new "Report Bug" button in the dashboard header's lex items-center gap-3 container, next to the Save button. Icon: Bug (lucide-react).

Modal

A DashboardModalFrame with:

  • Heading: "Report a Bug / Sugerir Mejora"
  • Textarea for the user's description
  • Read-only context panel showing what will be included automatically
  • "Generate Report" button

Automatic Context (collected without user input)

Field Source
App version src/lib/appInfo.ts → APP_VERSION
Active tab/page �ctiveTabLabel from Dashboard state
In-game date gameState.clock.current_date
Day phase gameState.day_phase
Team name gameState.manager.team_id → lookup in gameState.teams
League gameState.user_competition_id → lookup in gameState.leagues
LoL Patch gameState.champion_patch.current_patch_label
Serialized save .bugreport.json (exported via Rust command)

Files to create/modify

File Change
src-tauri/src/commands/bug_report.rs New: �xport_bug_context Tauri command — serializes full GameState, creates .bugreport.json in app data dir, returns the file path
src-tauri/src/lib.rs Register �xport_bug_context in generate_handler![]
src/services/bugReportService.ts New: front-end wrapper calling invoke("export_bug_context")
src/components/dashboard/ReportBugModal.tsx New: modal with textarea, context preview, and submit button
src/components/dashboard/DashboardHeader.tsx Add Bug import from lucide-react, add "Report Bug" button, add onReportBug prop
src/pages/Dashboard.tsx Add showReportBug state, handleReportBug callback, pass to DashboardHeader and ReportBugModal

Flow

  1. User clicks "Report Bug" in header
  2. Modal opens with description textarea + auto-collected context preview
  3. User types description, clicks "Generate Report"
  4. Front-end calls invoke("export_bug_context", { description, context })
  5. Rust command serializes full GameState → writes .bugreport.json → returns file path
  6. Front-end opens https://github.com/OpenLeagueManager/OLManager/issues/new with pre-filled body containing:
    • User's description
    • Auto-collected context table
    • Path to the exported .bugreport.json for attachment
  7. User completes title and submits on GitHub

Why not send directly via GitHub API?

  • Requires authentication token management (security/complexity)
  • Opening the browser is the standard open-source UX pattern
  • Lets the user review/edit before submitting

Test Plan

  • Button renders correctly in all header states (mobile/desktop, dark/light)
  • Modal opens/closes correctly
  • Context fields populate with correct game data
  • Rust command exports valid JSON file
  • GitHub Issues page opens with pre-filled body
  • TypeScript compiles without new errors
  • Rust compiles without new errors

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions