> ## Documentation Index
> Fetch the complete documentation index at: https://docs.germainux.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Popup Dialog Monitoring

> Browser Popup (alert, confirm, prompt) Dialog Monitoring by GermainUX

Components
[`JS Profiler`](/main/germain-ux-js-profiler)
[`RUM JS`](/main/germain-ux-rum-js)
[`RUM Extension`](/main/germain-ux-rum-extension)

Availability
2021.1 or later

Browser support
only latest Chrome, Edge and Opera

Browser Popup (alert, confirm, prompt) Dialog Monitoring by GermainUX

> **[Monitoring components](#monitoring-components)**
>
> Components used for popups

> **[Business benefits](#business-benefits)**
>
> Why popup monitoring matters

> **[Advanced processing](#advanced-processing)**
>
> Filter and modify popup events

> **[Deployment and configuration](#deployment-and-configuration)**
>
> Install and enable popups

## Overview

GermainUX monitors browser dialogs displayed while users interact with a web application. Each popup is associated with its application, page, browser, user, and session context, helping teams understand why it appeared and how it affected the user’s workflow.

> [!NOTE]
>
> Native browser dialogs are monitored by default for each applicable User Monitoring Profile.

## Monitoring components

| Component | Role |
| - | - |
| [GermainUX RUM JS](/main/germain-ux-rum-js.md) | Continuously captures native browser dialogs when the monitoring script can be deployed in the application. |
| [GermainUX RUM Extension](/main/germain-ux-rum-extension.md) | Provides popup monitoring when RUM JS cannot be deployed directly or access to the complete browser-page context requires an extension. |
| [GermainUX JS Profiler](/main/germain-ux-js-profiler.md) | Provides deeper JavaScript, browser, DOM, error, and network evidence when a popup requires code-level investigation. |

## Supported popup types

GermainUX monitors these native JavaScript dialogs by default:

| Popup type | JavaScript API | Purpose |
| - | - | - |
| Alert | `window.alert()` | Displays a message requiring acknowledgment |
| Confirm | `window.confirm()` | Requests confirmation or cancellation |
| Prompt | `window.prompt()` | Requests a value from the user |

GermainUX can also monitor application-specific HTML dialogs and modal windows through custom configuration. Because these dialogs are implemented differently by each application or framework, their detection must be adapted to the application.

## Capabilities

GermainUX can:

* Detect native browser dialogs displayed to real users.
* Capture the popup type and available message.
* Associate the popup with the relevant user, page, session, and application.
* Record how long a native popup remained open when duration monitoring is enabled.
* Generate an event when a popup closes when close-event monitoring is enabled.
* Determine whether a popup should be treated as an error in Session Replay.

> **Show all 9**
>
> * Correlate popups with clicks, navigation, JavaScript errors, network requests, and other browser activity.
> * Monitor custom HTML dialogs through application-specific detection logic.
> * Use the JS Profiler to investigate the JavaScript activity responsible for a popup.

## Default monitoring

| Capability | Default |
| - | - |
| `alert` dialogs | Monitored |
| `confirm` dialogs | Monitored |
| `prompt` dialogs | Monitored |
| Popup-open duration | Not collected |
| Popup-close event | Not collected |
| Custom HTML dialogs | Requires application-specific configuration |

No configuration is required to monitor the three native dialog types.

## Business benefits

Popup Dialog Monitoring helps organizations:

* Identify unexpected dialogs interrupting user workflows.
* Detect recurring application warnings and errors.
* Determine which users, pages, and business processes are affected.
* Measure time lost while users interact with blocking dialogs.
* Understand what happened before and after a popup appeared.
* Identify dialogs contributing to abandonment, workflow delays, or repeated user actions.
* Reduce the time required to reproduce intermittent popup-related problems.
* Prioritize issues according to frequency and actual user or business impact.

## Continuous monitoring

GermainUX RUM JS or the GermainUX RUM Extension continuously monitors native dialogs during real user sessions.

Use:

* **RUM JS** when the GermainUX monitoring script can be deployed directly in the application.
* **RUM Extension** when direct script deployment is unavailable or the application’s security model prevents access to the required browser context.

The captured popup is associated with the available user activity and Session Replay, allowing teams to see what the user was doing when the dialog appeared.

![Popup Dialog Monitoring: Continuous monitoring](https://mintcdn.com/germain-ux/A5V4ExbdsH-e9Odt/images/main/popup-dialog-monitoring/image-20260903-214022.png?fit=max\&auto=format\&n=A5V4ExbdsH-e9Odt\&q=85\&s=270363e774dd476b6ddac5039c77cf55)

## Code-level investigation with JS Profiler

When a popup is caused by an unclear or intermittent application condition, the GermainUX JS Profiler can provide deeper evidence, including:

* JavaScript function execution.
* Function timing.
* JavaScript errors and stack traces.
* Browser events and user interactions.
* DOM activity.
* Network requests and resource loading.
* Application, page, workflow, and session context.

The JS Profiler complements continuous popup monitoring and should generally be enabled for a controlled scope when deeper investigation is required.

## Analytics

GermainUX can analyze popup dialogs through KPIs, measures, pivots, trends, drill-through views, and session context.

| Analysis area | Examples |
| - | - |
| Popup | Alert, confirmation, prompt, or custom dialog |
| Content | Available popup message |
| Frequency | Occurrence count, recurrence, concentration, and trend |
| Impact | Affected users, sessions, pages, and workflows |
| Duration | Time the native popup remained open when enabled |
| User context | Clicks, navigation, activity, and Session Replay |
| Technical context | JavaScript errors, functions, and network requests |

GermainUX users can create watches to receive notifications when collected popup insights meet conditions of interest.

![Popup Dialog Monitoring: Analytics](https://mintcdn.com/germain-ux/A5V4ExbdsH-e9Odt/images/main/popup-dialog-monitoring/image-20260903-213925.png?fit=max\&auto=format\&n=A5V4ExbdsH-e9Odt\&q=85\&s=91c19b27ab600e73dadcd0d63147b87b)

## Configuration

Configuration is required only when the default behavior needs to be customized.

### Select native popup types

Use `settings.plugins.popup.types` to specify which native dialog types GermainUX should monitor.

The following example monitors only alert dialogs:

```javascript theme={null}
const settings = germainApm.getDefaultSettings();

settings.plugins.popup.types = ["alert"];

germainApm.start(settings);
```

Supported values are:

* `alert`
* `confirm`
* `prompt`

### Disable native popup monitoring

Configure an empty array to disable monitoring of native dialogs:

```javascript theme={null}
const settings = germainApm.getDefaultSettings();

settings.plugins.popup.types = [];

germainApm.start(settings);
```

### Monitor popup duration

Enable `monitorActiveDuration` to create a GermainUX UX transaction representing how long the native popup remained open:

```javascript theme={null}
const settings = germainApm.getDefaultSettings();

settings.plugins.popup.monitorActiveDuration = true;

germainApm.start(settings);
```

This setting is disabled by default.

### Monitor popup closure

Enable `monitorCloseEvent` to generate an event when a native popup closes:

```javascript theme={null}
const settings = germainApm.getDefaultSettings();

settings.plugins.popup.monitorCloseEvent = true;

germainApm.start(settings);
```

This setting is disabled by default.

## Error categorization

Use `errorCategorizer` to determine whether a popup represents an error.

```javascript theme={null}
const settings = germainApm.getDefaultSettings();

settings.plugins.popup.errorCategorizer = (
  message,
  defaultValue
) => {
  return String(message).includes("failed");
};

germainApm.start(settings);
```

Returning `true` categorizes the popup as an error. Returning `false` does not.

This categorization is used by the Session Replay error counter. It does not change the original popup or its behavior in the application.

## Advanced processing

Use `factProcessor` to modify or filter the GermainUX event generated for a popup:

```typescript theme={null}
factProcessor?: (
  fact: Extract<Fact, { myClassName: "UxEvent" }>,
  event: MonitoringEvent,
  fireEvent: (event: MonitoringEvent) => void,
  settings: MonitoringSettings
) => void;
```

Application-specific processing can be used to:

* Remove sensitive information.
* Normalize dynamic popup messages.
* Categorize known popup types.
* Exclude non-actionable dialogs.
* Add approved application context.

## Custom HTML dialogs

Custom dialogs created with HTML, CSS, or application frameworks do not use the browser’s native `alert`, `confirm`, or `prompt` APIs.

Monitoring these dialogs requires application-specific logic based on their implementation, such as:

* DOM elements or attributes.
* CSS selectors.
* Dialog roles.
* Application events.
* Framework-specific state.
* Text or message patterns.

Configure custom dialog detection only for stable application elements and test it after application changes.

## Privacy and security

Popup messages and prompt values can contain personal, confidential, or security-sensitive information.

Before collecting popup content:

* Review the information displayed by the application.
* Avoid collecting passwords, authentication tokens, secrets, payment data, or unnecessary personal information.
* Mask or remove sensitive values through application-specific processing.
* Restrict access to detailed popup and Session Replay evidence.
* Apply the organization’s retention and compliance requirements.
* Revalidate the configuration after application changes.

## Recommended investigation workflow

**1. Use RUM JS or the RUM Extension to identify a recurring or unexpected popup**

**2. Determine the affected users, sessions, pages, and workflows**

**3. Review the popup type, message, and available duration**

**4. Examine what the user did before and after the popup through Session Replay**

**5. Correlate the event with JavaScript errors, clicks, and network requests**

**6. Enable the JS Profiler for a controlled scope when deeper code-level evidence is required**

**7. Identify and correct the responsible code, condition, or dependency**

**8. Validate the correction through continuous popup monitoring**

## Deployment and configuration

* Review [Browser Monitoring](/main/browser-monitoring.md).
* Review the [Browser Monitoring Deployment Overview](/main/deployment-for-browser-monitoring.md).
* Deploy [GermainUX RUM JS](/main/germain-ux-rum-js.md) when the monitoring script can be added to the application.
* Deploy the [GermainUX RUM Extension](/main/germain-ux-rum-extension.md) when direct script deployment is unavailable or access to the complete browser-page context requires an extension.
* Deploy the [GermainUX JS Profiler](/main/germain-ux-js-profiler.md) for deeper JavaScript and browser diagnostics.
* Review the available [Browser Monitoring configuration](/main/configuration-for-browser-monitoring.md).

> **Show all 10**
>
> * Review [JavaScript Console and Error Monitoring](/main/javascript-console-and-error-monitoring.md).
> * Review [Dead, Error and Rage Click Monitoring](/main/dead-error-and-rage-click-monitoring.md).
> * Review the [KPIs for User Monitoring and Replay](/main/user-monitoring-and-replay-kpis.md).
> * Review the available Browser Monitoring KPIs.

## Get Help

> **[Contact GermainUX Support](/main/support.md)**
>
> The Germain Team can help you set this up.

> **Can't find what you need?**
>
> Search all GermainUX docs with **Ctrl + K**, or use the feedback buttons at the bottom of this page to tell us what is missing.

The content of this document is proprietary to GERMAIN SOFTWARE.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.