# Oops Widget

The Oops Widget is a lightweight solution that helps you transparently communicate system status to your users. It automatically detects service issues, API failures, and performance degradation — showing relevant alerts when they need it most.

## Features

- **Real-time status monitoring** — Polls your status endpoint and displays alerts for outages, maintenance, and degraded performance
- **Automatic error detection** — Intercepts Fetch and XHR requests to detect API errors and slow responses
- **Internationalization** — Built-in support for 18 languages with automatic browser language detection
- **Mobile-friendly** — Responsive placement options for mobile devices
- **Customizable UI** — Use the built-in alert component or create your own

## Installation

Install the package using your preferred package manager:

```bash
# npm
npm install @upreport/oops-widget

# pnpm
pnpm add @upreport/oops-widget

# yarn
yarn add @upreport/oops-widget
```

## Quick Start

Here's a minimal example to get the widget running:

```typescript
import { createOopsWidget } from '@upreport/oops-widget';
import { StatusAlert } from '@upreport/oops-widget/statusAlert';
import { createAutoDetectI18nProvider } from '@upreport/oops-widget/i18n';

const widget = createOopsWidget({
  statusUrl: 'YOUR_STATUS_URL_FROM_CONSOLE',
  alertComponent: StatusAlert,
  i18nProvider: createAutoDetectI18nProvider(),
});

widget.start();
```

This sets up a widget that:

- Polls your status endpoint for system status updates
- Displays alerts in the bottom-right corner (default placement)
- Automatically detects and uses the user's browser language

## What You'll Need

1. **Status URL** — The endpoint URL for your status page (provided by UpReport console)
2. **Alert Component** — The UI component for rendering alerts (use built-in `StatusAlert` or create your own)
3. **i18n Provider** — Handles translations for alert messages

## Next Steps

- [Configuration](/oops-widget/configuration/) — Learn about all available options
- [Framework Guides](/oops-widget/frameworks/) — Integration examples for Vue, React, and vanilla JavaScript
- [API Reference](/oops-widget/api-reference/) — Full API documentation and types