docker.recipes

Change Detection Monitoring

beginner

Website change detection and monitoring with notifications and visual diff comparison.

Overview

ChangeDetection.io is an open-source web monitoring service that tracks changes on websites and sends notifications when modifications are detected. Originally developed to fill the gap left when services like FollowThatPage became unreliable, ChangeDetection provides a self-hosted solution for monitoring product prices, job listings, news articles, or any web content that matters to you. The service supports visual diff comparisons, CSS/XPath selectors for precise monitoring, and integrates with numerous notification services including email, Slack, Discord, and webhooks. This stack combines ChangeDetection with Playwright browser automation and NGINX reverse proxy to create a robust monitoring platform. Playwright provides the JavaScript rendering capabilities needed to monitor modern single-page applications and dynamic content that traditional scrapers miss, while NGINX handles SSL termination, caching, and provides professional web server capabilities for production deployments. The architecture separates concerns effectively, with ChangeDetection handling the monitoring logic, Playwright managing browser automation in an isolated container, and NGINX providing enterprise-grade web serving. This combination is ideal for businesses needing reliable change monitoring, compliance teams tracking regulatory updates, e-commerce professionals monitoring competitor pricing, and IT teams keeping watch on service status pages. The stack provides both the technical capabilities needed for complex monitoring scenarios and the operational features required for production use, including proper logging, health checks, and scalable browser resource management.

Key Features

  • Visual diff comparison with screenshot capture showing exactly what changed on monitored pages
  • JavaScript rendering support through Playwright integration for monitoring SPAs and dynamic content
  • CSS selector and XPath filtering to monitor specific page elements rather than entire pages
  • Concurrent browser process management with configurable limits to control resource usage
  • Multiple notification channels including webhooks, email, Slack, Discord, and custom integrations
  • Configurable screen resolution and color depth for consistent screenshot comparison across monitoring cycles
  • JSON and text change detection with custom extraction rules for API endpoints and structured data
  • Proxy support through NGINX for SSL termination, caching, and professional deployment scenarios

Common Use Cases

  • 1E-commerce price monitoring to track competitor pricing changes and product availability
  • 2Job board monitoring for new postings matching specific criteria or locations
  • 3Regulatory compliance monitoring to track changes in government websites and policy documents
  • 4Software release monitoring to detect new versions and security updates for critical applications
  • 5News and content monitoring for journalists and researchers tracking specific topics or sources
  • 6Service status page monitoring to detect outages and maintenance announcements from vendors
  • 7Real estate listing monitoring for new properties matching specific criteria in target markets

Prerequisites

  • Minimum 2GB RAM recommended due to Playwright browser processes and concurrent monitoring tasks
  • Docker and Docker Compose installed with support for multi-container networking
  • Ports 80, 443, and 5000 available on the host system for web access and API endpoints
  • Basic understanding of CSS selectors or XPath for configuring precise element monitoring
  • SMTP server configuration or webhook endpoints ready for notification delivery
  • SSL certificates prepared if deploying with HTTPS support through NGINX

For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

docker-compose.yml

docker-compose.yml
1services: 
2  changedetection: 
3    image: ghcr.io/dgtlmoon/changedetection.io:latest
4    environment: 
5      PLAYWRIGHT_DRIVER_URL: ws://playwright:3000
6      BASE_URL: ${BASE_URL}
7    ports: 
8      - "5000:5000"
9    volumes: 
10      - changedetection_data:/datastore
11    depends_on: 
12      - playwright
13    networks: 
14      - changedetection-net
15    restart: unless-stopped
16
17  playwright: 
18    image: dgtlmoon/sockpuppetbrowser:latest
19    environment: 
20      SCREEN_WIDTH: 1920
21      SCREEN_HEIGHT: 1080
22      SCREEN_DEPTH: 24
23      MAX_CONCURRENT_CHROME_PROCESSES: 10
24    networks: 
25      - changedetection-net
26    restart: unless-stopped
27
28  nginx: 
29    image: nginx:alpine
30    ports: 
31      - "80:80"
32      - "443:443"
33    volumes: 
34      - ./nginx.conf:/etc/nginx/nginx.conf:ro
35    depends_on: 
36      - changedetection
37    networks: 
38      - changedetection-net
39    restart: unless-stopped
40
41volumes: 
42  changedetection_data: 
43
44networks: 
45  changedetection-net: 
46    driver: bridge

.env Template

.env
1# Base URL (for notifications)
2BASE_URL=https://change.example.com

Usage Notes

  1. 1Web UI at http://localhost:5000
  2. 2Add URLs to monitor
  3. 3Visual diff comparison
  4. 4Supports CSS/XPath selectors

Individual Services(3 services)

Copy individual services to mix and match with your existing compose files.

changedetection
changedetection:
  image: ghcr.io/dgtlmoon/changedetection.io:latest
  environment:
    PLAYWRIGHT_DRIVER_URL: ws://playwright:3000
    BASE_URL: ${BASE_URL}
  ports:
    - "5000:5000"
  volumes:
    - changedetection_data:/datastore
  depends_on:
    - playwright
  networks:
    - changedetection-net
  restart: unless-stopped
playwright
playwright:
  image: dgtlmoon/sockpuppetbrowser:latest
  environment:
    SCREEN_WIDTH: 1920
    SCREEN_HEIGHT: 1080
    SCREEN_DEPTH: 24
    MAX_CONCURRENT_CHROME_PROCESSES: 10
  networks:
    - changedetection-net
  restart: unless-stopped
nginx
nginx:
  image: nginx:alpine
  ports:
    - "80:80"
    - "443:443"
  volumes:
    - ./nginx.conf:/etc/nginx/nginx.conf:ro
  depends_on:
    - changedetection
  networks:
    - changedetection-net
  restart: unless-stopped

Quick Start

terminal
1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4  changedetection:
5    image: ghcr.io/dgtlmoon/changedetection.io:latest
6    environment:
7      PLAYWRIGHT_DRIVER_URL: ws://playwright:3000
8      BASE_URL: ${BASE_URL}
9    ports:
10      - "5000:5000"
11    volumes:
12      - changedetection_data:/datastore
13    depends_on:
14      - playwright
15    networks:
16      - changedetection-net
17    restart: unless-stopped
18
19  playwright:
20    image: dgtlmoon/sockpuppetbrowser:latest
21    environment:
22      SCREEN_WIDTH: 1920
23      SCREEN_HEIGHT: 1080
24      SCREEN_DEPTH: 24
25      MAX_CONCURRENT_CHROME_PROCESSES: 10
26    networks:
27      - changedetection-net
28    restart: unless-stopped
29
30  nginx:
31    image: nginx:alpine
32    ports:
33      - "80:80"
34      - "443:443"
35    volumes:
36      - ./nginx.conf:/etc/nginx/nginx.conf:ro
37    depends_on:
38      - changedetection
39    networks:
40      - changedetection-net
41    restart: unless-stopped
42
43volumes:
44  changedetection_data:
45
46networks:
47  changedetection-net:
48    driver: bridge
49EOF
50
51# 2. Create the .env file
52cat > .env << 'EOF'
53# Base URL (for notifications)
54BASE_URL=https://change.example.com
55EOF
56
57# 3. Start the services
58docker compose up -d
59
60# 4. View logs
61docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

terminal
1curl -fsSL https://docker.recipes/api/recipes/changedetection-io/run | bash

Troubleshooting

  • ChangeDetection shows 'Browser connection failed': Verify playwright container is running and PLAYWRIGHT_DRIVER_URL environment variable points to ws://playwright:3000
  • Screenshots appear blank or incomplete: Increase SCREEN_WIDTH and SCREEN_HEIGHT environment variables in playwright service, or adjust page load timeout settings
  • High memory usage from browser processes: Reduce MAX_CONCURRENT_CHROME_PROCESSES setting in playwright container or implement monitoring schedules to spread load
  • Monitoring fails on JavaScript-heavy sites: Ensure Playwright integration is enabled in ChangeDetection settings and increase page render wait time
  • NGINX proxy errors to ChangeDetection: Check that changedetection service is healthy and accessible on port 5000 within the Docker network
  • Persistent data loss after container restart: Verify changedetection_data volume is properly mounted and has correct permissions for the container user

Community Notes

Loading...
Loading notes...

Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license

Components

changedetectionplaywrightnginx

Tags

#changedetection#monitoring#web#alerts#diff

Category

Monitoring & Observability

Related Recipes

Ad Space