Tracy & AJAX – udělejme Tracy stejnou pro AJAXové weby jako pro neAJAXové

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
jahudka
Člen | 69
+
+21
-

Ahoj,

začal jsem trochu experimentovat s ohnutím Tracy tak, aby debug bar i bluescreen fungovaly i na AJAXovým webu, a narážím na celkem dost věcí..

Goals:

  • Debug bar by se měl umět obnovit po AJAXovém requestu tak, aby chování bylo stejné, jako kdyby request nebyl AJAXový
  • Když AJAXový request selže, bluescreen by se měl zobrazit úplně stejně jako kdyby request nebyl AJAXový
  • Docela fajn by bylo, kdyby šlo třeba napsat si panel do Debugger baru, který umí vzít momentálně zobrazený bluescreen a odeslat ho přes nějaké API do issue trackeru – Tracy sama to samozřejmě umět nemá, ale mohla by to umožnit (možnost získat na client-side zdrojový kód celého bluescreenu, možnost dostat z toho typ a popis chyby + stack trace, možnost získat hash chyby jako používají exception dumpy v Loggeru aby se to dalo v issue trackeru párovat s existujícími issues atd)
  • Mělo by to být samozřejmě napsané tak, že to nemá žádné závislosti mimo Tracy – mělo by to fungovat s jakýmkoliv client-side i backend frameworkem s minimální konfigurací

Poznámky:

  • Posílat Debugger bar nějak zakódovanejma HTTP hlavičkama jako to dělá FireLogger moc nejde, naráží to na limit velikosti HTTP hlaviček minimálně v Chrome, takže spíš by se to mělo při requestu třeba uložit do session a dotáhnout bokem nějakým AJAXem
  • Na server side by mělo stačit zapnout tomuhle podporu a maximálně jedním dvěma řádky zařídit zpracování těch dodatečných AJAX requestů
  • Na client-side by pokud možno mělo být potřeba minimum kódu pro integraci s čímkoliv, takže maximálně třeba jedna metoda typu Tracy.Debug.refreshBar() a jedna něco jako Tracy.Debug.loadBluescreen() pro ty základní věci, plus třeba nějaký Tracy.Bluescreen.getInfo(), který by vracelo objekt ve stylu {"class": "App\CustomException", "code": 34, "message": "Something bad happened", "hash": "af78d3ced9" }, případně včetně kompletního HTML celého bluescreenu, aby se dal přiložit jako blob upload

Na co narážím:

  • Hlavně na existující JS kód Tracy – není ho úplně málo a do detailu mu nerozumím, ale vidím spoustu potenciálních problémů, speciálně s event listenerama – Tracy si celkem liberálně přivazuje listenery na různé DOM elementy a není úplně jednoduché obnovovat bar tak, aby se něco nenavázalo dvakrát atd.
  • Různé duplikátní volání – třeba právě Debugger bar si vytváří novou instanci objektu Panel při každém volání Tracy.Debug.getPanel(), místo aby se někde existující instance držely; Dumper se při zobrazení bluescreenu a baru zároveň taky incializuje víckrát (i když tam je myslím nějak oddělenej kontext, jak jsem psal, úplně tomu ještě nerozumím)
  • Potřeba definovat to samé chování v PHP i v JS, jak v baru tak v bluescreenu – rendering HTML pro normální requesty se většinově děje v PHP, ale když to chci natáhnout AJAXem, opakuju spoustu těch věcí znova v JS

Jak bych na to šel:

  • Především bych některé části kódu přesunul z PHP do JS – třeba vytváření Baru – místo generování panelů a ikonek na straně PHP by šlo předat do JS rovnou to pole $panels; pak by logika obnovování Baru po AJAX requestu byla vlastně úplně stejná jako jeho úvodní vytvoření, což je plus
  • Nějak bych „učesal“ ten JS kód, aby tam nevznikaly ty problémy viz výše (btw by zároveň bylo fajn možná pro takový ty „public“ věci typu Tracy.Debug.refreshBar() a Tracy.Debug.loadBluescreen() mít spíš zkratku na tom top-level objektu Tracy – zjednoduší to integrační kód – místo window.Tracy && Tracy.Debug && Tracy.Debug.refreshBar() bude stačit window.Tracy && Tracy.refreshBar())

Ale:

Jednak některým částem toho kódu moc nerozumím, a jednak mám dojem, že jsem kdysi zaznamenal, že na něčem podobném tu a onde už někdo pracuje – tak si říkám, nechcem to nějak zkonsolidovat a spojit síly? :-)

A pozor:

Když se to udělá šikovně, může to teoreticky znamenat podporu Content Security Policy v baru i v bluescreenu ^_^

Editoval jahudka (7. 3. 2016 20:26)

enumag
Člen | 2118
+
0
-

Pokusů o něco podobného zde bylo už několik. Myslím, že poslední je tenhle pull request od @DavidGrudl takže doporučuji zeptat se tam. Že by to mohlo znamenat podporu CSP se již také ví.

Editoval enumag (7. 3. 2016 21:11)

David Grudl
Nette Core | 7790
+
+9
-

Rozpracoval jsem to už před pár lety, ale stále to nemám dokončené. Ale stále v tom vidím důležitou feature, pokud se toho nikdo neujme, zkusil bych to koncem roku implementovat.

David Matějka
Moderator | 6439
+
+4
-

A s timhle i souvisi napad, co jsem dostal pred nejakou dobou – aby to fungovalo i pro CLI. Jak? V browseru by sis otevrel specialni adresu (bud s nejakym _GET parametrem, ktery by odchytila tracy, pripadne explicitni samostatny soubor). A CLI by pak nejak posilalo debug bar/bluescreen do toho prohlizece. Bud jen zapisovanim do souboru a ten web by to cyklicky kontroloval, nebo treba pres sockety.

jahudka
Člen | 69
+
+2
-

@DavidGrudl No já se do toho klidně pustím – ale pravděpodobně to skončí tak, že překopám drtivou většinu stávajícího JS kódu a asi i docela dost těch phtml šablon, tak jenom chci nějak ověřit, že to je ok :-)

@DavidMatějka To je geniální nápad!! Určitě nad tím zapřemejšlím. Dávalo by asi nejvíc smysl udělat konzolovou „server“ aplikaci, která vystaví nějakej malej HTTP frontend a websocket endpoint přes kterej se ten frontend bude aktualizovat, plus nějakej další socket na kterej může odkládat data ta samotná CLI aplikace kterou debuguješ. Asi by se to líp psalo v NodeJS než v PHP, ale to už bychom do toho zanášeli moc externích závislostí..

David Grudl
Nette Core | 7790
+
0
-

Tam uz existuje funkci demo, prekopavat temer nic nebylo potreba, ale jak jsem psal, PR dost jiste neni aktualni, klidne se do toho pust jinou cestou.

jahudka
Člen | 69
+
+1
-

@DavidGrudl Viz vyse, jak jsem psal – Tracy JS kod je psanej tak, ze i kdyz se do toho da nejak zadratovat podpora pro AJAX, snadno povede k duplikatni inicializaci veci tj. k vicenasobnymu navazovani event listeneru a podobnejm failum.. spravny a cisty by bylo zacit from scratch a jen tu a tam si neco vypujcit..

jahudka
Člen | 69
+
0
-

K čemu přesně je dobrý Dumper::LIVE? V dokumentaci se o tom nic nepíše.. Studiem zdrojového kódu jsem odhalil jen tolik, že dumpy s příznakem live se renderují pomocí JS, ale nějak nevidím proč to používat a kde.. @DavidGrudl?

Jan Tvrdík
Nette guru | 2595
+
0
-

K čemu přesně je dobrý Dumper::LIVE?

  • Výrazně to zmenšuje to velikost dumpů a tím v důsledku zrychluje dumpování.
  • Výrazně to snižuje náročnost renderování dumpů pro prohlížeč.

Není to učeno pro koncové uživatele, na to by bylo potřeba mergnout https://github.com/…racy/pull/61 nebo https://github.com/…racy/pull/62.

jahudka
Člen | 69
+
+8
-

@JanTvrdík ok, dík za vysvětlení, to dává smysl.

Btw, pustil jsem se do toho, viz https://github.com/…ree/ajax-bar

Funguje:

  • AJAX reload debug baru pomocí Tracy.refreshBar()
  • načtení bluescreenu po selhaném AJAX requestu pomocí Tracy.loadBluescreen()

Zatím není:

  • podpora CLI (ale bude brzo a snadno!! wink)

Většinou (i když to tak možná na první pohled nevypadá) bylo potřeba jen popřesouvat věci – občas v rámci šablony, občas přesunout část renderování z PHP do JS, aby nebylo na dvou místech..

V /examples/ajax*.php jsou ukázky :-) reflexi, testování a nápady vítám.

Editoval jahudka (12. 3. 2016 20:55)

David Grudl
Nette Core | 7790
+
0
-

jahudka napsal(a):

@DavidGrudl Viz vyse, jak jsem psal – Tracy JS kod je psanej tak, ze i kdyz se do toho da nejak zadratovat podpora pro AJAX, snadno povede k duplikatni inicializaci veci tj. k vicenasobnymu navazovani event listeneru a podobnejm failum..

Toho si uplně nejsem vědom.

Jan Tvrdík
Nette guru | 2595
+
0
-

@jahudka Chceš na to review nebo si zatím jen tak hraješ?

jahudka
Člen | 69
+
+1
-

@JanTvrdík No pokud máš chuť, tak nějaký review určitě uvítám, poslední commit v tý ajax-bar branchi už funguje :-)