Sanitizing API Responses

I just fixed our Book Town project site that had been down for a couple months. It suddenly stopped working, and I will admit that I would have definitely fixed it faster if I hadn't already gotten my first dev job. But another member of my team for the project reached out to me about it and I finally got around to it.

I had a hard time even reproducing the issue locally as it only seemed to affect the development build when Netlify built it. The very undescriptive error that a minified production React gives was not very helpful. Finally I ended up nuking my local node_modules folder and lo and behold the error started showing up in my development Create-React-App. I'm still not sure if it was due to server data from the api being cached or what that it wasn't showing up.

When I finally was able to reproduce it locally in development, it quickly became evident that rendering a JSONParsed api response was causing the issue as Open Library's api was responding with a nested object in the description property for one book. And of course React elements can't have children that are POJO:

I quickly resolved this specific issue by using short-circuiting to render the `value` property of the `description` property if it exists, but this ultimately made me realize that we should be using an api sanitizing class or function that prevents objects being children of React elements if the api were to ever be inconsistent again. Basically the function would attempt to resolve a specific type of value, a string, from an api response and if the value is an object it returns perhaps some stringified json or an error text.

This api response sanitization is perhaps something that is handled behind the scenes by the libraries we use at work to generate front end TS fetch functions from the server side api endpoint code.