Error Handling on Alex Jacobs https://alex-jacobs.com/tags/error-handling/ Recent content in Error Handling on Alex Jacobs Hugo -- gohugo.io en-us Wed, 14 Dec 2022 00:00:00 +0000 Effective Error Handling https://alex-jacobs.com/posts/errorhandling/ Wed, 14 Dec 2022 00:00:00 +0000 https://alex-jacobs.com/posts/errorhandling/ A simple an effective approach for handling end users who struggle with errors All too frequently, we, as developers, are faced with the task of handling errors. By developing effective messaging for our users, we can make their experience with our software much more pleasant. While the task of crafting these messages can seem mundane, it’s a necessary step in making our software more user-friendly and intuitive.

And yet, all too frequently, end users will go out of their way to completely avoid even attempting to read the error message.

And after a long hard day writing bug free code and solving customer problems, there is nothing less satisfying than a story that contains a screenshot of an error message that explains exactly the action the user needs to take the resolve the mistake they have made.

Below we present a simple and effective approach to handling errors in client-side fleshware.

An error message that requires interaction

If it’s not yet clear, I’ll take this opportunity to say that this is (mostly) a joke.



And simple as that, we reduce the number of bug reports we receive by 100%!

I’m certainly no UI designer, but with a little love, I expect this to be a core product feature in all modern softwares going forward.

Checkout the fiddle below to make your own improvements! https://jsfiddle.net/eg142dkp/2/

Wondering how I made this?

First I had to learn javascript. Then I had to learn CSS and HTML. After all that, I had to learn about Hugo and Shortcodes

By that point, I was a certified full-stack developer, and I was able to create the following shortcode to render the modal

 1<style>
 2    .modal {
 3        display: none; 
 4        position: fixed;
 5        z-index: 1; 
 6        left: 0;
 7        top: 0;
 8        width: 100%; 
 9        height: 100%; 
10        overflow: auto; 
11        background-color: rgb(0, 0, 0); 
12        background-color: rgba(0, 0, 0, 0.5); 
13
14    }
15
16    .modal-content {
17        display: block;
18        background-color: #fefefe;
19        margin: 25% auto; 
20        padding: 20px;
21        border: 3px solid #dc3545;
22        width: 60%; 
23        height: auto;
24        opacity: 1;
25        border-radius: 25px;
26        text-align: center;
27    }
28
29    .modal input {
30        background-color: #ffffff;
31        border: 1px solid #dc3545;
32        border-radius: 5px;
33        width: 50%;
34
35    }
36
37    .error-button {
38        background-color: #dc3545;
39        border: 1px solid #dc3545;
40        border-radius: 5px;
41        width: 40%;
42        color: #ffffff;
43        font-weight: bold;
44        display: grid;
45        margin: 0 auto;
46    }
47
48</style>
49<div id="errorModal" class="modal">
50
51    <div class="modal-content">
52        <div style="color: #dc3545;" id='errorMessage'></div>
53        <br>
54        <p style="color: gray; opacity: 65%">
55            type the error message to confirm you've seen it and disable the error modal
56        </p>
57        <input type="text" id="textinput" name="fname">
58    </div>
59
60</div>
61<div class="error-button">
62    <button type="submit" onclick="errorMessage('There is an error due to the way you did it')">
63        Click here to display error
64    </button>
65</div>
66<script>
67    function errorMessage(displayErrorMessage) {
68        let errorModal = document.getElementById("errorModal");
69        let errorMessage = document.getElementById('errorMessage')
70        errorMessage.textContent = displayErrorMessage
71        errorMessage.style.fontWeight = 'bold';
72        errorModal.style.display = "block";
73
74        let inputBox = document.getElementById('textinput');
75
76        inputBox.onkeyup = function () {
77            var text = inputBox.value
78            if (displayErrorMessage.startsWith(text)) {
79                errorMessage.innerHTML = "<span style='color: " + 'black' + ";'>" + text + "</span>" +
80                    "<span style='color: " + '#dc3545' + ";'>" +
81                    displayErrorMessage.replace(text, '') + "</span>"
82            }
83
84            if (text === displayErrorMessage) {
85                errorModal.style.display = "none";
86                inputBox.value = '';
87            }
88        }
89        console.log(errorMessage)
90    }
91</script>

and it goes right here in my layouts/shortcodes directory

1.
2└── layouts
3    └── shortcodes
4        └── error-modal.html

and then in my markdown file, I can just call it like this

1{{< error-model >}}


Hugo is neat

Update 12-27-22 – OpenAI

It is worth updating this post to say that I gave this prompt to the openai code-davinci-002 model

1/* create a button that says 'click to display error message'. 
2when the button is clicked, a modal should pop up that has an error message and a text box. 
3the modal should not have an x to close it. the only way to close the model is to type the error message into the text box */

and within seconds had a fully working implementation

Checkout openAI’s fiddle for comparison. Maybe we’re all wasting our time

https://jsfiddle.net/Lkyxuc0v/

 1var button = document.createElement('button');
 2button.innerHTML = 'click to display error message';
 3document.body.appendChild(button);
 4button.onclick = function () {
 5    var modal = document.createElement('div');
 6    modal.style.position = 'fixed';
 7    modal.style.top = '0';
 8    modal.style.left = '0';
 9    modal.style.width = '100%';
10    modal.style.height = '100%';
11    modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
12    modal.style.zIndex = '9999';
13    document.body.appendChild(modal);
14    var errorMessage = document.createElement('div');
15    errorMessage.innerHTML = 'Error: You must type the error message into the text box to close this modal.';
16    errorMessage.style.position = 'absolute';
17    errorMessage.style.top = '50%';
18    errorMessage.style.left = '50%';
19    errorMessage.style.transform = 'translate(-50%, -50%)';
20    errorMessage.style.backgroundColor = 'white';
21    errorMessage.style.padding = '20px';
22    errorMessage.style.border = '1px solid black';
23    modal.appendChild(errorMessage);
24    var textBox = document.createElement('input');
25    textBox.type = 'text';
26    textBox.style.position = 'absolute';
27    textBox.style.top = '60%';
28    textBox.style.left = '50%';
29    textBox.style.transform = 'translate(-50%, -50%)';
30    textBox.style.width = '200px';
31    textBox.style.height = '20px';
32    textBox.style.border = '1px solid black';
33    modal.appendChild(textBox);
34    textBox.onkeyup = function () {
35        if (textBox.value === 'Error: You must type the error message into the text box to close this modal.') {
36            document.body.removeChild(modal);
37        }
38    }
39}
]]>