Javascript / React - Chybové hlášky v konzoli prohlížeče

Když vyvíjím frontend ve Vue nebo v Reactu, tak chybové hlášky, které lze najít v konzoli prohlížeče při procházení frontendové aplikace, jsou často napsané tak, že nejde v kódu najít místo, kde chyba vznikla.

Důvod, proč to nejde v kódu nalézt, je ten, že kód je do prohlížeče poslán zkompilovaný, tzn. potom typická chybová hláška vypadá třeba takto:

Kód: [Vybrat]
index.js:6
Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
    at input
    at td
    at tr
    at tbody
    at table
    at details
    at main
    at Component (http://localhost:60000/static/js/main.chunk.js:15616:88)
    at Route (http://localhost:60000/static/js/vendors~main.chunk.js:43137:29)
    at Switch (http://localhost:60000/static/js/vendors~main.chunk.js:43306:29)
    at Router (http://localhost:60000/static/js/vendors~main.chunk.js:42809:30)
    at HashRouter (http://localhost:60000/static/js/vendors~main.chunk.js:42360:35)
    at App (http://localhost:60000/static/js/main.chunk.js:82:97)

Načež jak asi tušíte, soubor "index.js:6" kam přesměruje browser když na hlášku vývojář klikne, odkazuje na onen zkompilovaný JS soubor a vývojář se nedozví nic.

Takže moje otázka je - dá se s tím vůbec něco dělat, abych se jako vývojář dozvěděl přesněji, kde je v kódu chyba? Co třeba nějak zapnout vývojářský režim a přimět NPM, aby ty soubory pro localhost nekompiloval?


alex6bbc

  • *****
  • 1 652
    • Zobrazit profil
    • E-mail
Re:Javascript / React - Chybové hlášky v konzoli prohlížeče
« Odpověď #1 kdy: 15. 08. 2024, 16:17:57 »
tak pro vyvoj to neminifikuj, neuglyfikuj at se ti to dobre debuguje.

pripadne jsou online deminifikatory, deuglyfikatory, je to hnusnejsi, ale lepsi nez puvodni hnus.

Re:Javascript / React - Chybové hlášky v konzoli prohlížeče
« Odpověď #2 kdy: 15. 08. 2024, 16:25:51 »
S react ani vue nedelam, ale hledal bych neco co se jmenuje "source mapping" nebo "code mapping"...
V dev environmentu to potom muze ukazovat lepsi stacktracy a v sources tabu to bude ukazovat projektovy soubory tak ja jsou...
Myslim, ze mi to fungovalo pekne ve svelte.. . a snad i v reagentu

Re:Javascript / React - Chybové hlášky v konzoli prohlížeče
« Odpověď #3 kdy: 15. 08. 2024, 19:42:28 »
Při vývoji se buď do prohlížeče posílá nemimifikovaný kód (protože mimifikace zbytečně zabírá čas), nebo se používají sourcemapy, kde je mapování mezi mimifikovaným a původním kódem. Pokud vám to tak nefunguje, máte něco špatně nakonfigurované ve vašem projektu.

Re:Javascript / React - Chybové hlášky v konzoli prohlížeče
« Odpověď #4 kdy: 15. 08. 2024, 20:52:43 »
Nemal som čas vŕtať sa v tom úplne do hĺbky, ale sú rozdiely medzi Vite / esbuild / Create React App / ... Začal som projekt s CRA, musel som prejsť na esbuild. Rozdiely v chybových hláškach tam sú celkom značné.

Btw sú rozdiely aj v hot reloade - esbuild robí iba tupý refresh.


Re:Javascript / React - Chybové hlášky v konzoli prohlížeče
« Odpověď #5 kdy: 17. 08. 2024, 06:44:07 »
To je nejaky vtip?

Kdyz se VYVIJI ve Vue, tak ve VSCode s Volar extenzi a Vue dev pluginem do chrome je videt v hkaskach naprosto vsecko vcetne cisla radky v souboru kde vznikla chyba a moznost prochazet content Pinia store.
Pak se teprve udela produkcni build bez debuginfo.

Doporucul bych zacit na strankach Vue s odkazem Quick start.