Skip to content
UpReport Docs

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

Section titled “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

Section titled “Installation”

Install the package using your preferred package manager:

Terminal window
# npm
npm install @upreport/oops-widget


# pnpm
pnpm add @upreport/oops-widget


# yarn
yarn add @upreport/oops-widget

Quick Start

Section titled “Quick Start”

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

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

Section titled “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

Section titled “Next Steps”