Custom error pagina maken

[lisagjh]

anders word justus niet blij

[yujing-student]

https://github.com/ju5tu5/sveltekit-principles voorbeeld

[yujing-student]

De custom errorpage is gemaakt

lighthouse result

Resultaat uit lighthouse met daar ook de error

w3cvalidator

In de w3c validator heb ik 2 errors om op te lossen

de oorzaak is dat de +error.svelte een component is en geen .html pagina maar een component zie de documentatie https://kit.svelte.dev/docs/errors

lege pagina errors om na te vragen

als je een error hebt dan krijg je eerst een lege pagina en vervolgens in de inspector zie je al wat de error is na een 2de keer refreshen zie je wel de juiste tekst van de +error.svelte

de inspector

---

de lege pagina die eerst komt

---

de juiste tekst die komt als je 2x de pagina refresht

[yujing-student]

dit is te zien in de inspector

dit staat er bij justus in het voorbeeld dan gaat er bij ons iets mist

[yujing-student]

testen diverse errors

Ik heb de errorpage getest in een andere branch feature-member-overviewpage met pagina's die niet bestaan en daar word de errorpage wel direct getoond

Ook heb ik de onmount weggehaald bij de header om te testen of de error en de errorpage getoond worden en dat lukt

[yujing-student]

na hulp van dorien is de conclusie:

als je http://localhost:5173/members doet dan werkt de errorpage wel

het probleem ligt dus aan de navigatie van de home naar de de members page

de errorpage is goed gelukt en het probleem ligt dus aan het member component

[yujing-student]

De oplossing van de error width in de console log

dit stukje code zorgt ervoor dat als 1 de waarde null is dat de width en height auto worden en de error in de console log is ook weg

    height="{member.photo?.height ? parseInt(member.photo.height) : 'auto'}"
    width="{member.photo?.width ? parseInt(member.photo.width) : 'auto'}">