browser_mobile_debug_panel

What it is

A lightweight React component and utility library that enables end-users to send diagnostic reports with a single tap. It monkey-patches console methods to buffer recent logs, collects detailed browser/device telemetry, and allows developers to inject custom application state. Reports are securely uploaded to Amazon S3 via a presigned URL generated by an AWS Lambda backend.

Features

• One-tap UI component for triggering debug reports on mobile devices
• Automatic capture of last 200 console log, warn, error, and info entries
• Comprehensive browser telemetry including UA, screen, memory, and GPU info
• Customizable app state injection via user-defined collector function
• Secure two-step upload to S3 using presigned URLs from Lambda
• Zero-config frontend integration with React hooks and standalone utilities

Quickstart

npm install github:davidbmar/browser_mobile_debug_panel
cd infra
cp config.example.sh config.sh
# Edit config.sh with your AWS settings
./deploy.sh --setup

Architecture

flowchart TD
    User[Mobile User] -->|Taps Button| Component[DebugReportButton]
    Component -->|Collects| Logs[Console Buffer]
    Component -->|Collects| Info[Browser Info]
    Component -->|Calls| AppState[collectAppState()]
    Logs & Info & AppState -->|Aggregates| Report[JSON Report]
    Component -->|POST Request| APIGW[API Gateway]
    APIGW -->|Invokes| Lambda[Presign Lambda]
    Lambda -->|Generates URL| S3[S3 Bucket]
    Lambda -->|Returns Presigned URL| APIGW
    APIGW -->|Returns URL| Component
    Component -->|PUT JSON| S3

How it's built

The frontend is a TypeScript/React package providing a drop-in button component and hooks. It handles client-side data aggregation (console history, navigator properties, custom state). The backend infrastructure is defined in Shell scripts that deploy an AWS stack: an S3 bucket for storage, a Lambda function to generate presigned URLs, and API Gateway to expose the endpoint. The system uses a two-step upload process (request URL, then PUT data) to avoid exposing AWS credentials to the client.

How it runs

sequenceDiagram
    participant User as Mobile User
    participant Btn as DebugReportButton
    participant API as API Gateway
    participant Lambda as Presign Lambda
    participant S3 as S3 Bucket

    User->>Btn: Tap 'Send Debug Report'
    activate Btn
    Btn->>Btn: Capture Console Logs
    Btn->>Btn: Collect Browser Info
    Btn->>Btn: Execute collectAppState()
    
    Btn->>API: POST /debug-report-url
    activate API
    API->>Lambda: Invoke Handler
    activate Lambda
    Lambda->>S3: Generate Presigned PUT URL
    S3-->>Lambda: Return Signed URL
    Lambda-->>API: Return JSON { url }
    deactivate Lambda
    API-->>Btn: Return Presigned URL
    deactivate API

    Btn->>S3: PUT JSON Report
    activate S3
    S3-->>Btn: 200 OK
    deactivate S3
    Btn-->>User: Show 'Sent!' Confirmation
    deactivate Btn

How to apply & reuse

Install the package via npm from the GitHub repository. Import the DebugReportButton component into your React application. Configure it with your API Gateway proxy URL, a function to collect current app state, and a project name. For the backend, clone the repo, configure the infra/config.sh file with your AWS details, and run the deploy script to set up the S3 bucket and Lambda function.

At a glance