Ka\u017cdy, kto prowadzi sklep internetowy, zna ten moment: klient dodaje produkt do koszyka, przechodzi do finalizacji zam\u00f3wienia i nagle\u2026 pusty bia\u0142y ekran. Albo komunikat: \u201eWyst\u0105pi\u0142 b\u0142\u0105d. Spr\u00f3buj ponownie\u201d. W najlepszym przypadku u\u017cytkownik od\u015bwie\u017cy stron\u0119 i spr\u00f3buje jeszcze raz. W najgorszym \u2013 zrezygnuje z zakup\u00f3w i przejdzie do konkurencji. A je\u015bli zrobi to na telefonie kom\u00f3rkowym, szansa na powr\u00f3t jest bliska zeru.<\/p>\n
B\u0142\u0119dy 500 s\u0105 nieuniknione w ka\u017cdej aplikacji webowej \u2013 to fakt. Jednak to, jak<\/em> je obs\u0142ugujesz, decyduje o tym, czy stracisz klienta, czy go zatrzymasz. W tym artykule poka\u017c\u0119 trzy realne pu\u0142apki, kt\u00f3re widzia\u0142em u klient\u00f3w (i niestety w swoich wczesnych projektach). Ka\u017cda z nich kosztuje pieni\u0105dze \u2013 czasem tysi\u0105ce z\u0142otych miesi\u0119cznie.<\/p>\n Wyobra\u017a sobie, \u017ce wchodzisz do sklepu stacjonarnego, a ekspedientka na twoje pytanie odpowiada: \u201eNie wiem, co\u015b si\u0119 zepsu\u0142o\u201d. I odwraca si\u0119 plecami. Tak w\u0142a\u015bnie wygl\u0105da nieobs\u0142u\u017cony b\u0142\u0105d 500 \u2013 bez komunikatu, bez propozycji dzia\u0142ania.<\/p>\n W web developmentzie cz\u0119sto spotykam si\u0119 z podej\u015bciem: \u201eb\u0142\u0105d 500 zwracamy jako status, frontend go \u0142apie i wy\u015bwietla toast z napisem 'Wyst\u0105pi\u0142 b\u0142\u0105d’\u201d. To minimalna obs\u0142uga \u2013 lepsza ni\u017c \u017cadna, ale wci\u0105\u017c nieprofesjonalna.<\/p>\n Dlaczego to kosztuje?<\/strong><\/p>\n Badania UserZoom pokazuj\u0105, \u017ce 45% u\u017cytkownik\u00f3w po b\u0142\u0119dzie 500 opuszcza stron\u0119 na sta\u0142e, a 30% traci zaufanie do marki. Je\u015bli Tw\u00f3j sklep generuje 1000 transakcji dziennie, a jeden na 1000 ko\u0144czy si\u0119 b\u0142\u0119dem 500, tracisz jedn\u0105 transakcj\u0119 dziennie. Przy \u015brednim koszyku 200 z\u0142 to 6000 z\u0142 miesi\u0119cznie \u2013 tylko z powodu go\u0142ego b\u0142\u0119du.<\/p>\n Co zamiast tego?<\/strong><\/p>\n Zaprojektuj przyjazny ekran b\u0142edu: przepro\u015b, wyja\u015bnij, \u017ce co\u015b posz\u0142o nie tak, daj opcj\u0119 kontaktu (np. przycisk \u201eWy\u015blij zg\u0142oszenie\u201d) i zaproponuj akcj\u0119: \u201eWr\u00f3\u0107 do koszyka\u201d lub \u201ePrzejd\u017a do strony g\u0142\u00f3wnej\u201d. Przyk\u0142ad: sklep odzie\u017cowy, kt\u00f3ry po b\u0142\u0119dzie pokazuje komunikat: \u201ePrzepraszamy, serwer na chwil\u0119 si\u0119 zawiesi\u0142. Twoje produkty w koszyku s\u0105 bezpieczne. Kliknij tutaj, aby spr\u00f3bowa\u0107 ponownie\u201d. I zapisuje stan koszyka w localStorage \u2013 klient nie traci danych.<\/p>\n Realny przypadek<\/strong><\/p>\n U jednego z klient\u00f3w (sklep z elektronik\u0105) po wprowadzeniu przyjaznego ekranu b\u0142edu 500 liczba porzuconych sesji spad\u0142a o 18%. To prosta zmiana, kt\u00f3ra nie wymaga refactoringu ca\u0142ego backendu \u2013 tylko dodatkowej strony HTML i kodu po stronie frontendu, kt\u00f3ry sprawdza status odpowiedzi.<\/p>\n Drugi b\u0142\u0105d to z\u0142e logowanie. Wiele firm zapisuje b\u0142\u0119dy w plikach, ale bez kluczowych informacji: kt\u00f3ry u\u017cytkownik, o kt\u00f3rej godzinie, jakie dane wys\u0142a\u0142, stan sesji. W efekcie developerzy sp\u0119dzaj\u0105 godziny na odtwarzaniu krok\u00f3w, kt\u00f3re doprowadzi\u0142y do b\u0142edu.<\/p>\n Skala problemu<\/strong><\/p>\n W projekcie SaaS, kt\u00f3ry audytowa\u0142em, zesp\u00f3\u0142 sp\u0119dzi\u0142 trzy dni na debugowaniu b\u0142\u0119du 500, kt\u00f3ry wyst\u0119powa\u0142 przy dodawaniu produkt\u00f3w do koszyka. Okaza\u0142o si\u0119, \u017ce problemem by\u0142 brak obs\u0142ugi null w polu \u201crabat\u201d \u2013 warto\u015b\u0107 nie by\u0142a zapisywana przy niekt\u00f3rych promocjach. Gdyby logi zawiera\u0142y dok\u0142adny payload \u017c\u0105dania (ID produktu, ID u\u017cytkownika, tre\u015b\u0107 promocji), debugowanie zaj\u0119\u0142oby 15 minut.<\/p>\n Koszty<\/strong><\/p>\n \u015aredni koszt roboczogodziny developera to 150\u2013250 z\u0142. Trzy dni to 2 400 \u2013 4 000 z\u0142 stracone tylko na odtwarzanie b\u0142edu. Pomn\u00f3\u017c to przez liczb\u0119 podobnych incydent\u00f3w w miesi\u0105cu \u2013 suma robi wra\u017cenie.<\/p>\n Co robi\u0107?<\/strong><\/p>\n U\u017cywaj strukturalnego logowania (np. JSON) \u2013 zapisuj timestamp, ID sesji, ID u\u017cytkownika, endpoint, metod\u0119 HTTP, body \u017c\u0105dania (ale bez hase\u0142!), stack trace i nag\u0142\u00f3wki. W \u015brodowisku produkcyjnym u\u017cyj narz\u0119dzi takich jak Sentry, kt\u00f3ry zbiera b\u0142\u0119dy z kontekstem i grupuje je wed\u0142ug przyczyny.<\/p>\n Przyk\u0142ad z \u017cycia<\/strong><\/p>\n U klienta z bran\u017cy e-commerce wdro\u017cyli\u015bmy Sentry. Pierwszy tydzie\u0144: 1200 b\u0142\u0119d\u00f3w 500 (wi\u0119kszo\u015b\u0107 zgrupowana w 3 kategorie). Wcze\u015bniej zesp\u00f3\u0142 nie wiedzia\u0142 o 90% z nich, bo by\u0142y ciche \u2013 pojawia\u0142y si\u0119 sporadycznie, ale dla u\u017cytkownik\u00f3w by\u0142y frustruj\u0105ce. Po naprawie trzech g\u0142\u00f3wnych przyczyn liczba b\u0142\u0119d\u00f3w spad\u0142a o 95%.<\/p>\n Trzecia pu\u0142apka dotyczy sytuacji, gdy backend jest aktualizowany, ale zapominasz o kompatybilno\u015bci wstecznej. Przyk\u0142ad: zmieniasz format odpowiedzi endpointu Dlaczego to cz\u0119ste?<\/strong><\/p>\n W startupach cz\u0119sto brakuje test\u00f3w integracyjnych. Developerzy wrzucaj\u0105 zmiany na produkcj\u0119, testuj\u0105 r\u0119cznie kilka scenariuszy, a potem okazuje si\u0119, \u017ce starsze wersje klient\u00f3w (np. strona internetowa z przestarza\u0142ym kodem) nie dzia\u0142aj\u0105. Albo gorzej \u2013 sklep wykorzystuje zewn\u0119trzny system ERP, kt\u00f3ry wysy\u0142a zapytania w oczekiwanym formacie, a po aktualizacji API wszystko si\u0119 psuje.<\/p>\n Konsekwencje<\/strong><\/p>\n Je\u015bli zmieniasz API bez wersjonowania, mo\u017cesz unintentionalnie wy\u0142\u0105czy\u0107 kluczowe funkcje \u2013 np. dodawanie do koszyka, wyb\u00f3r metody wysy\u0142ki, logowanie. Ka\u017cda minuta przestoju kosztuje: w sklepie e-commerce \u015bredniej wielko\u015bci (1000 transakcji dziennie) ka\u017cda minuta przerwy w dzia\u0142aniu koszyka to strata ~140 z\u0142 (przy 24h ci\u0105g\u0142ego przestoju wszystkie transakcje s\u0105 stracone).<\/p>\n Rozwi\u0105zanie<\/strong><\/p>\n U\u017cyj wersjonowania API (np. Historia z frontu<\/strong><\/p>\n Pracowa\u0142em z klientem, kt\u00f3ry rozwija\u0142 platform\u0119 SaaS. Ich zesp\u00f3\u0142 aktualizowa\u0142 backend codziennie, a aplikacja kliencka by\u0142a aktualizowana co tydzie\u0144. W efekcie raz na kilka dni pojawia\u0142 si\u0119 b\u0142\u0105d 500 w jakiej\u015b funkcji \u2013 ale tylko dla u\u017cytkownik\u00f3w, kt\u00f3rzy nie od\u015bwie\u017cyli strony (nie mieli nowego kodu JS). Rozwi\u0105zaniem by\u0142o dodanie mechanizmu wersjonowania API i wymuszenie od\u015bwie\u017cenia strony, gdy wersje s\u0105 niezgodne.<\/p>\n B\u0142\u0119dy 500 s\u0105 jak dziury w dachu \u2013 ka\u017cda ma\u0142a mo\u017ce przemokn\u0105\u0107 ca\u0142y dom. W e-commerce, gdzie konwersja jest \u015bwi\u0119tym Graalem, ignorowanie obs\u0142ugi b\u0142\u0119d\u00f3w jest luksusem, na kt\u00f3ry nie sta\u0107 \u017cadnej firmy. Trzy pu\u0142apki \u2013 go\u0142a odpowied\u017a, s\u0142abe logi i brak wersjonowania \u2013 s\u0105 powszechne, ale \u0142atwe do naprawienia.<\/p>\n Co zrobi\u0107 dzi\u015b?<\/strong><\/p>\n Pami\u0119taj: dobry developer przewiduje b\u0142\u0119dy, a \u015bwietny \u2013 \u0142agodzi ich skutki. W JurskiTech pomagamy firmom nie tylko budowa\u0107 wydajne aplikacje, ale te\u017c projektowa\u0107 je tak, by nawet awarie nie zabija\u0142y biznesu.<\/p>\n Je\u015bli chcesz przejrze\u0107 swoje logi lub audytowa\u0107 obs\u0142ug\u0119 b\u0142\u0119d\u00f3w \u2013 daj zna\u0107. Mo\u017ce uda si\u0119 zaoszcz\u0119dzi\u0107 kilka tysi\u0119cy miesi\u0119cznie.<\/p>\n","protected":false},"excerpt":{"rendered":" Obs\u0142uga b\u0142\u0119d\u00f3w 500 w e-commerce: 3 kosztowne pu\u0142apki Wprowadzenie Ka\u017cdy, kto prowadzi sklep internetowy, zna ten moment: klient dodaje produkt do koszyka, przechodzi do finalizacji zam\u00f3wienia i nagle\u2026 pusty bia\u0142y ekran. Albo komunikat: \u201eWyst\u0105pi\u0142 b\u0142\u0105d. Spr\u00f3buj ponownie\u201d. W najlepszym przypadku u\u017cytkownik od\u015bwie\u017cy stron\u0119 i spr\u00f3buje jeszcze raz. W najgorszym \u2013 zrezygnuje z zakup\u00f3w i przejdzie<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[10,556,501,72,409],"class_list":["post-1830","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-w-e-commerce","tag-architektura-backend","tag-bledy-ux","tag-konwersja-e-commerce","tag-obsluga-bledow"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=1830"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/1830\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=1830"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=1830"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=1830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}1. Naga odpowied\u017a b\u0142edu \u2013 czyli strach na klienta<\/h3>\n
2. Logowanie b\u0142\u0119d\u00f3w bez kontekstu \u2013 cichy zab\u00f3jca<\/h3>\n
3. Brak kontroli wersji API \u2013 czyli b\u0142edy, kt\u00f3rych nie widzisz<\/h3>\n
\/api\/orders<\/code>, ale aplikacja mobilna nadal oczekuje starego formatu. Nowa wersja zwraca b\u0142\u0105d 500, bo parsowanie JSON si\u0119 psuje.<\/p>\n\/api\/v2\/orders<\/code>). To standard w du\u017cych firmach, ale ma\u0142e sklepy cz\u0119sto go pomijaj\u0105. Wprowad\u017a regresyjne testy automatyczne, kt\u00f3re sprawdzaj\u0105 wszystkie wersje API. I pami\u0119taj: nawet je\u015bli nie udost\u0119pniasz API zewn\u0119trznym, frontend i backend to dwa r\u00f3\u017cne systemy \u2013 ka\u017cda zmiana mo\u017ce je rozsynchronizowa\u0107.<\/p>\nPodsumowanie<\/h3>\n
\n