📗エラーの話は具体的にする

[[📒Productivityを上げるために大切な100のこと]] No93. 🥉 ---- 今日ではITのシステムを使わずに生活している人はほとんどいないだろう。だが、システムは完璧ではない。どんな優れたシステムでも大なり小なり必ずバグは存在する。そのようなバグを見つけたとき、システム作成側とどのようなコミュニケーションをとるべきか...というのが今回の話。大切な点は2つだけだ。 ## 事実を伝える何事にも言えることだが事実を伝えよう。その際は**エラー発生時の画像や動画を添付する**のがオススメだ。メディアによる情報は事実であることを裏付けるため、システム作成側も真摯に取り合ってくれる。逆に、==文章や口頭による事実の説明はエビデンスがなく、ユーザーの思い込みや考えである疑いが残ってしまう==。また、言葉や文字に対する認識齟齬も起こりやすい。以下はよくある一例だ。 ``` ユーザー『〇〇をしたらエラーになりました』システム作成側『どのようなエラーが表示されますか?』ユーザー『何も表示されないです』 ``` この例は**エラー**の意味合いをはき違えている。システム作成側は **『処理は失敗しているが、例外処理が不十分でエラーが発生せずに画面が固まってしまった』** と思うかもしれない。私もそう思う。ところが事実は違う。**システムには何一つ問題はなかった**。ユーザーは==自分が〇〇という操作をしたあと、〇〇という操作の結果として期待した動きをしなかったため、それをエラーと呼んでしまっていただけ==なのだ。はじめから画像が動画によるコミュニケーションをしていれば、少なくともこの問題は防げたはずだ。 ## エラーを加工せずに共有するシステムに不備が生じたとき、ほとんとのケースで要求されるのが**エラーメッセージやエラーログの共有**だ。その際の注意点として、==加工せずに共有すること==が大事だ。加工とは内容の改変はもちろんのこと、**不要と思われる部分の切り取りや要約**も含む。こちらも例を紹介しよう。 ``` システム作成側『エラーの内容を教えてください』ユーザー『TypeErrorと表示されます』システム作成側『他には表示されていませんか?』ユーザー『はい』 ``` ユーザーには悪意はない。ユーザーは==エラー名を聞かれたのだから`TypeError`と答えただけ==だろう。もしくはそれ以外のメッセージが理解できなかったため、勝手な判断で省略してしまったのかもしれない。このケースで実際に表示されているエラーは以下のようなものだ。 ``` app.js:1 Uncaught TypeError: Cannot set properties of null (setting 'mode') at Array.<anonymous> (app.js:1:1187263) at Function.PO [as signal] (app.js:1:1167350) at Object.enterInsertMode (vim.js:2530:22) at HTMLDivElement.vim.onPasteFn (vim.js:381:21) ``` システムの開発者であれば、ここから以下の内容がくみ取れる。 - `vim.js`というファイルの2530行目、22列目がシステムのソースコードがエラー発生前に通る最終地点であある - その前は`vim.js`の381行目、21列目を通っている - 直接エラーが発生した原因は`null`に対して`mode`をセットしようとしたからこれで初めてユーザーへのサポートやシステムの改修が可能になるのだ。これらの情報を伝えず、`TypeError`とだけ伝えるのは、==事故で救急車を呼ぶ際に以下のやりとりをするのと同じ==なのだ。 ``` 電話した人『事故が発生しました！』救急車『状況を教えてください』電話した人『人が倒れています』 ``` この電話だけで事故現場にたどり着ける人はエスパー以外の何者でもない。このあとに容態の確認、事故現場の特定など追加の情報を聞き出すだろう。この場合だと、追加情報の必要性を話者も理解していると思う。だが、システムのように馴染みのないケースでは無意識的に事実が死角となってしまうことが多い。 ## ブラウザでエラーが発生した場合最後に、ブラウザでエラーが発生した場合の簡単な状況共有方法を紹介する。画面上でエラーが発生されていない場合は特に有用だ。ここでは[[Google Chrome]] x [[Windows]]を想定する。 1. `F12`または`Ctrl+Shift+I`を押して[[Chrome devtools]]を起動する 2. `Console`タブをクリックする上手くいくと以下の画像のようなものが表示される。赤い背景で表示されているのが今回紹介したエラーだ。もちろん、エラーの内容はこれと一緒にはならない。 ![[Pasted image 20220321123231.png]] 他にも`Network`タブを見たり、詳細が必要な場合は[[HAR]]ファイルを作成して共有する方法がある。だが、まずは[[Chrome devtools]]の`Console`を共有する方法から始めるのがいいだろう。[[Chrome devtools]]の存在を知り、有事の際にコミュニケーションのため利用できるというのが大きな第一歩なのだ。