M13 F2.3 · Playground Crawler

Playground Crawler

Client-side crawl yetmediğinde — server-side Chromium ile DOM scan, pattern detection ve screenshot review.

Ne zaman gerek?

Client-side crawl yetmiyorsa

JS-heavy SPA, late mount, dinamik content, shadow DOM — bu durumlarda server-side Chromium devreye girer.

  • JS-heavy SPA

    React/Vue/Angular tek sayfa uygulamaları — DOM tamamen JS ile render ediliyorsa.

  • Late mount

    Initial HTML boş, gerçek içerik 2-5 saniye sonra mount oluyor — Chromium bekleyebilir.

  • Dinamik yüklenen DOM

    Scroll + click + lazy load — etkileşim olmadan görünmeyen elementler için scripted interaction.

  • Shadow DOM

    Web component'lerin shadow root'larına client-side erişim sınırlı; server-side Chromium pierce edebilir.

3 crawl modu

Single · Multi · Screenshot-only

İhtiyaca göre 3 mod. Multi-page CH events_canonical'dan dinamik URL listesi alır.

single_page

single_page

Tek URL ver, DOM scan + pattern detect + screenshot. En hızlı mod — playground önizleme için ideal.

multi_page

multi_page

CH events_canonical son 7 gün distinct source_context['context_url'] → multi-page crawl. Tüm sayfalarda aynı pattern arar (toplam sayım).

screenshot_only

screenshot_only

Full-page + viewport screenshot, DOM scan yok. UX review / regression için.

6-strategy selector generator

Auto-healing fail-safe için katmanlı seçici

Her event için 6 farklı selector tipi üretilir — biri kırılırsa diğeri devreye girer (5-katmanlı fallback).

Niye 6 katman?

Frontend redesign'ı CSS class'ları, ARIA label'ları, text içeriği kırabilir. 6 katman birden kırılmadıkça event tracking devam eder.

  • dataAttrdata-* attribute — en stabil (manuel eklenir, dev-controlled)
  • textGörünür text içeriği — i18n değişiminde kırılabilir
  • cssCSS class / id — class refactor'da risk
  • xpathXPath ifadesi — DOM hiyerarşi bağımlı
  • regexAttribute regex match — pattern-based
  • ariaARIA role + label — accessibility-grade, görece stabil
// 6 strateji, en spesifikten en gevşeğe doğru
{
  "selectors": [
    { "type": "data_attr", "value": "[data-testid='cart-add']" },
    { "type": "aria",      "value": "[role='button'][aria-label='Sepete ekle']" },
    { "type": "text",      "value": "button:has-text('Sepete ekle')" },
    { "type": "css",       "value": ".product-card .add-to-cart" },
    { "type": "xpath",     "value": "//button[contains(., 'Sepete ekle')]" },
    { "type": "regex",     "value": "button[name=~'add.cart']" }
  ]
}

Pattern detection

1.248 cart button → tek event

Aynı tasarımdaki tekrarlanan element'leri otomatik gruplar — tek event tanımı tüm sayfalara yayılır.

Nasıl gruplar?

Selector + komşu DOM yapısı + accessible label benzerliğine göre cluster oluşturur. Cluster içindeki tüm element'ler tek event'e bağlanır.

# Multi-page crawl → 1.248 add-to-cart noktası bulundu
gurulu playground crawl \
  --mode multi_page \
  --base https://shop.example.com \
  --discover ch_events_last_7d \
  --max-pages 200

# Sonuç: pattern grouping (eşleşen selector → tek event'e bağla)
# event:add_to_cart  →  matched 1.248 instances across 47 pages

Screenshot review

MinIO presigned + thumbnail

Crawl sonrası her sayfanın screenshot'ı MinIO'ya yazılır; 302 redirect ile presigned URL döner.

GET /v1/playground/crawl/{crawl_id}/screenshot
  → 302 redirect → MinIO presigned URL (15 dk TTL)

# Thumbnail (JPEG, dashboard list için)
GET /v1/playground/crawl/{crawl_id}/screenshot?variant=thumb

Erişim kontrolü

Presigned URL 15 dk TTL ile döner — workspace yetkisi kontrol edilir, sonra MinIO bucket'a yönlendirilir. Thumbnail dashboard list için JPEG.

Performance config

Browser pool 2, timeout 30s, shm 1gb

Chromium SHM segment 1 GB — Docker'da shm_size default 64 MB ile çalışmaz, override şart.

Ayar
Varsayılan
Not
Browser pool size
2
Concurrent Chromium instance sayısı — 2 stabil, fazlası RAM'i yer.
Page timeout
30 s
DOM hazır olmazsa 30s sonra fail. SPA'lar için yeterli.
shm_size
1 GB
Docker SHM 1 GB — Chromium crash önler. 64 MB default ile çalışmaz.
Job concurrency
1 job / worker
Worker başına 1 job — Chromium memory leak riskini sınırlar.

Kullanım örnekleri

Onboarding + discovery

İki tipik senaryo — yeni workspace setup'ı ve mevcut workspace'te yeni pattern bulma.

Onboarding playground'da

Yeni workspace setup: sessions list'ten 'scan multi-page' butonuyla tüm sayfalarda pattern detect edip toplu event tanımla.

Pattern discovery

Mevcut workspace'te yeni feature lansmanı sonrası — playground'dan multi-page crawl ile yeni element'leri bul, event registry'ye ekle.

İlgili dokümanlar

Devamında oku

Audience üretimi, AI özetinde keşfedilen pattern, mimari arka plan.

Audiences — pattern'a göre cohort + audienceAI Morning Summary — anomaly açıklamaHow it works — Truth Layer mimarisiDocs ana sayfa
Playground Crawler — Gurulu Docs