# Notebook auto-thumbnail error

**URL:** <https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009>\
**Category:** Help\
**Created:** [October 13, 2020, 11:18am UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009 "2020-10-13T11:18:23Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![duynguyen1678](https://avatars.discourse-cdn.com/v4/letter/d/d78d45/32.png) [@duynguyen1678](https://talk.observablehq.com/u/duynguyen1678)\
**Post date:** [October 13, 2020, 11:18am UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/1 "2020-10-13T11:18:24Z")

</div>

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](https://observablehq.com/@duynguyen1678/the-trump-covid-hotspot).

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/2/2a3d77c39577a11963ac28e9aac85f3ecb3bac89.jpeg)

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [October 13, 2020, 1:53pm UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/2 "2020-10-13T13:53:55Z")

</div>

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:

 ![Screen Shot 2020-10-13 at 9.06.21 AM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/8/84ec8db6f44c3249b23920ccc2819fc9c1e3c53a.jpeg)

---

<div class="post-metadata">

**Author:** ![severo](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/severo/32/786_2.png) [@severo](https://talk.observablehq.com/u/severo)\
**Post date:** [October 13, 2020, 1:59pm UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/3 "2020-10-13T13:59:47Z")

</div>

I didn’t know that! Thanks

---

<div class="post-metadata">

**Author:** ![duynguyen1678](https://avatars.discourse-cdn.com/v4/letter/d/d78d45/32.png) [@duynguyen1678](https://talk.observablehq.com/u/duynguyen1678)\
**Post date:** [October 13, 2020, 2:05pm UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/4 "2020-10-13T14:05:49Z")

</div>

This is great. Thanks!!

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [October 13, 2020, 5:56pm UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/5 "2020-10-13T17:56:24Z")

</div>

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.

> **[Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/mdn-javascript_builtins_string_replaceall)**

---

<div class="post-metadata">

**Author:** ![duynguyen1678](https://avatars.discourse-cdn.com/v4/letter/d/d78d45/32.png) [@duynguyen1678](https://talk.observablehq.com/u/duynguyen1678)\
**Post date:** [October 13, 2020, 6:43pm UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/6 "2020-10-13T18:43:38Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [October 14, 2020, 3:40pm UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/7 "2020-10-14T15:40:48Z")

</div>

> [@duynguyen1678](#):
>
> Replaced `replaceAll()` with `split().join()` and it works like a charm.

Note that you can also use a regular expression with the “global” modifier to replace all occurences, e.g.:

```auto
"first<br>second<br>third".replace(/<br>/g, " ")
// Results in "first second third"

```

---

<div class="post-metadata">

**Author:** ![duynguyen1678](https://avatars.discourse-cdn.com/v4/letter/d/d78d45/32.png) [@duynguyen1678](https://talk.observablehq.com/u/duynguyen1678)\
**Post date:** [October 14, 2020, 3:56pm UTC](https://talk.observablehq.com/t/notebook-auto-thumbnail-error/4009/8 "2020-10-14T15:56:56Z")

</div>

Much more elegant. Thanks!!