The latest articles on DEV Community by Arnaud (@arnauddevto). https://dev.to/arnauddevto https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F762940%2F63082805-79e0-43d8-9a8d-3c2d808d03b0.jpg https://dev.to/arnauddevto en Arnaud Thu, 03 Apr 2025 06:02:24 +0000 https://dev.to/arnauddevto/write-better-error-messages-in-3-minutes-34n9 https://dev.to/arnauddevto/write-better-error-messages-in-3-minutes-34n9 <p>When something goes wrong in your app or website, a clear, helpful, and empathetic error message can make all the difference for your users. Nobody likes facing a mysterious “Oops! Something went wrong,” with no clue why it happened or how to fix it. Here are the essentials for crafting better error messages.</p> <h2> Common mistakes </h2> <ul> <li> <strong>Inappropriate tone</strong>,
“Oopsie daisy!” might sound fun, but if your user’s work is at stake, it feels dismissive. Respect your user’s time and emotional state.</li> <li> <strong>Technical jargon</strong>, telling a non-techie about an “HTTP 500 Internal Server Error” is like speaking another language. Keep it simple and understandable.</li> <li> <strong>Passing the blame</strong>, users don’t care which server is at fault. They just want a solution. Shift from pointing fingers to offering help.</li> <li> <strong>Empty or generic statements</strong>,
“Something went wrong” says nothing. If you know the cause, say it. If you don’t, at least show you’re on the case.</li> </ul> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo1lxmdwpf457euu1mt5q.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fo1lxmdwpf457euu1mt5q.png" alt="bad error message" width="551" height="267"></a></p> <h2> How to fix this </h2> <ol> <li> <strong>Say What Happened</strong> (In Plain Language) <ul> <li>Example: “We couldn’t load your profile.” instead of “An unexpected error occurred.”</li> <li>Be specific about which action failed so users know exactly what’s going on.</li> </ul> </li> <li> <strong>Show Empathy and Offer Reassurance</strong> <ul> <li>“We’re sorry you’re running into trouble. Your draft changes are saved.”</li> <li>Acknowledge how the issue affects them. Demonstrate you’re on their side.</li> </ul> </li> <li> <strong>Explain Why</strong> (If You Can) <ul> <li>Even a brief reason helps, like: “We had a technical glitch on our end. Please try again.”</li> <li>It builds trust when you give context.</li> </ul> </li> <li> <strong>Provide a Path Forward</strong> <ul> <li>Nothing worse than just a dead-end button “Dismiss"</li> <li>Offer an immediate step:
“Click ‘Reconnect Account’ to try again.”</li> <li>Provide contact info or a button for more help:
“If this keeps happening, report us the issue here.”</li> </ul> </li> </ol> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhulj0qfl588xpho09xsx.jpg" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fhulj0qfl588xpho09xsx.jpg" alt="Good and bad error message" width="800" height="512"></a></p> <h2> The Power of Good Error Messages </h2> <p>Every error message is a chance to build (or break) trust. By crafting clear, empathetic, and action-oriented messages, you show users that you respect their time, understand their frustration, and are committed to fix weakness of your app as soon as possible.<br> All in a few words, you can guide them to the solution—and keep their confidence in your product.<br> So the next time you need to deliver bad news in your app or website, remember: clarity, empathy, a helpful next step, and the right tone can transform frustration into a moment of reassurance.</p> webdev programming frontend