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

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)