Hi everyone!
I’ve known for a while that Observable automatically generates a thumbnail for a notebook based on the first image/dataviz in that notebook. For the most part, the algorithm is terrific!
But once in a while errors like the one below come up, even though everything still works fine if I open the notebook. I’d love to know why this is happening and what steps I can take to avoid it!
Link to notebook in image: https://observablehq.com/@duynguyen1678/the-trump-covid-hotspot.
I’m not sure what’s going on; I suppose the auto preview generator is trying to render the preview prior to your async functions completion of their task.
An easy work around is to set the preview image manually, which you can do from your notebooks tab:
I didn’t know that! Thanks
This is great. Thanks!!
The reason for the error is that you’re using a relatively new JavaScript language feature (string.replaceAll) that isn’t supported in all browsers, including our thumbnailer.
That’s exactly it! Replaced replaceAll() with split().join() and it works like a charm.
I should have looked deeper into the broken thumbnail; the error basically tells itself there. But thank you!!
Note that you can also use a regular expression with the “global” modifier to replace all occurences, e.g.:
"first<br>second<br>third".replace(/<br>/g, " ")
// Results in "first second third"
Much more elegant. Thanks!!