ErrHub

Lightweight exception collection and management platform. Backend with Flask + PostgreSQL, frontend with Vue 3 + Element Plus, one-click deployment via Docker.

中文版

err-hub/
├── backend/          # Flask API service
│   ├── app/
│   │   ├── api/v1/   # API routes
│   │   ├── models/   # Data models
│   │   ├── static/   # SDK static files (error-feedback.js)
│   │   └── ...
│   └── Dockerfile
├── frontend/         # Vue 3 admin dashboard
│   ├── src/
│   │   ├── i18n/     # Internationalization configuration
│   │   └── ...
│   └── Dockerfile
└── docker/
    ├── docker-compose.yml
    ├── nginx/        # Gateway Nginx configuration
    ├── volumes/      # Persistent data directory
    └── .env          # Environment variables (copy from .env.example)

• Docker >= 20.10
• Docker Compose >= 2.0
• Make (optional, can use docker compose commands directly)

cd docker
cp .env.example .env
# Edit .env, modify passwords, ports, etc. as needed

Key Configuration Items:

make up        # Build images + start all services

Or execute step by step:

make build     # Build images only
make start     # Start containers only

After startup, visit http://<your-ip>:<GATEWAY_PORT> to access the admin dashboard.

After modifying backend code or Nginx configuration:

make rebuild          # Rebuild api image + force restart api and gateway

After modifying frontend code:

make rebuild-all      # Rebuild all images

Simply include in your HTML page, no dependencies required:

<script src="http://your-domain/sdk/error-feedback.js"
        data-api-token="Project API Token"
        data-auto-capture="true"
        data-environment="production"
        data-before-send="onBeforeErrorSend">
</script>

<script>
  // Manual reporting
  ErrHub.report('TypeError', 'Button click failed', { severity: 'error' });

  // Capture Error object
  try { riskyOp(); } catch (e) { ErrHub.captureException(e); }

  // Before send callback (optional)
  window.onBeforeErrorSend = function (payload) {
    payload.context.user_id = currentUser?.id;
    return payload;   // Return false to cancel reporting
  };
</script>

Script Tag Attributes:

window.ErrHub Methods:

beforeSend Callback Rules:

• Return payload (modified if needed) → continue reporting
• No return → continue reporting original payload
• Return false → cancel this report
• Throw exception → silently fall back, still send original payload

POST /api/v1/auth/login
Content-Type: application/json
{ "username": "admin", "password": "admin123" }

→ { "access_token": "..." }

# Subsequent requests include:
Authorization: Bearer <access_token>

POST /api/v1/errors
X-API-Token: <Project API Token>
Content-Type: application/json
{
  "exception_type": "ValueError",
  "message": "invalid input"
}

Data is stored in docker/volumes/ directory:

docker/volumes/
├── postgres/    # PostgreSQL data files
└── redis/       # Redis dump.rdb

Backup: Simply package the docker/volumes/ directory.

Reset: make clean deletes volumes, then make up initializes empty database.

Frontend uses vue-i18n for multi-language support, currently supports Chinese (zh-CN) and English (en).

• First visit: Auto detect browser navigator.language, use Chinese for zh prefix, fallback to English for other languages
• Manual switch: Click language switch dropdown in top navigation
• Preference persistence: User's language choice is saved in localStorage under locale key, used on next visit

frontend/src/i18n/
├── index.js              # i18n initialization, language detection logic
└── locales/
    ├── zh-CN.js          # Chinese language pack
    └── en.js             # English language pack

1. Create new language file in frontend/src/i18n/locales/ (e.g., ja.js), fill translations following existing key structure
2. In frontend/src/i18n/index.js:
   • Import new language pack, add to messages object
   • Append { code: 'ja', label: '日本語' } to languages array
   • Add browser language prefix mapping in langMap (e.g., ja: 'ja')
3. For Element Plus integration, import corresponding Element Plus locale (e.g., element-plus/es/locale/lang/ja) and add condition in App.vue's elementLocale computed

No need to modify any component templates, language switch menu will automatically render based on languages array.

1. Add same key path to both zh-CN.js and en.js
2. Use in components via t('key.path') or in templates via {{ t('key.path') }}

Notes:

• In vue-i18n, { and } are special characters for interpolation syntax, to display literal braces use {'{'} and {'}'} escape
• For example, to display {"user_id": "123"}, write: "like {'{'}\"user_id\": \"123\"{'}'}"