Display decoded React error messages in the log stream instead of criptic titles
React Error Messages from Real Users
In order to improve our service, we log our users’ errors. The errors may indicate flaws that we were unable to discover or just overlooked. Error messages are vital in the observability stack because they assist the investigation process and, eventually, progress the fix process.
In an effort to decrease the number of bytes transferred over the wire, the authors of React forgo delivering complete error messages in the minified production build of React. When you encounter an issue, you will be sent to the “Error Decoder” page, which displays the complete error text.
This adds a step to the research process that our developers can avoid. By including the react-error-decoder package into our log pipeline, our developers can view a comprehensible error message that will assist them in resolving issues.
Incorperating a decoder into the log pipeline
All browser log records are routed through a service, which, among other tasks, decodes the messages before delivering them to the logs database.
The react-error-decoder looks up the error message in Facebook’s invariant dictionary and populates variables in the message.
import { decode } from "react-error-decoder";
record.message // Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
record.message = decode(record.message)
record.message // Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.If the message is not a minified React error message, it will be unaltered, therefore we may use this decoder on all log records.
decode("Something must have gone horribly wrong") // "Something must have gone horribly wrong"Coherent Error Messages
Error messages should be understandable and clear, written in plain English, and give essential information about the problem and its source. This makes it easy for developers to diagnose and solve problems.
Error messages should be self-explanatory — they should explain the problem without the need to search for knowledge online, saving time and improving the user experience, as well as reducing debugging friction.
Comprehensible, clear, and self-explanatory error messages improve the developer experience by making it simpler for developers to comprehend and handle problems.
