# Handling a Runtime Error

**URL:** <https://talk.observablehq.com/t/handling-a-runtime-error/3816>\
**Category:** Help\
**Created:** [August 31, 2020, 10:32am UTC](https://talk.observablehq.com/t/handling-a-runtime-error/3816 "2020-08-31T10:32:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![flimsyhat](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/flimsyhat/32/3444_2.png) [@flimsyhat](https://talk.observablehq.com/u/flimsyhat)\
**Post date:** [August 31, 2020, 10:32am UTC](https://talk.observablehq.com/t/handling-a-runtime-error/3816/1 "2020-08-31T10:32:27Z")

</div>

Is there a way of handling Runtime Errors in order to display a custom message/html element?

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/0/08358d9a7816a754003fdfdeb5b5a650c38800ee.png)

My situation, in short –

I have an embedded notebook displaying a WebGL canvas. I want to show a custom error message if this canvas loses context, prompting the visitor to reload the page. To do this, I have an event listener that swaps the canvas for another html element if the context is lost. However, this prompted the question – is it possible to handle a runtime error directly? This might be a terrible idea, I have no clue.

Thanks for your attention!

---

<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:** [August 31, 2020, 3:48pm UTC](https://talk.observablehq.com/t/handling-a-runtime-error/3816/2 "2020-08-31T15:48:16Z")

</div>

If you want to use Observable’s error handling, then your error messages can only be strings, not HTML elements. Also, Observable’s runtime cannot handle async errors. This, e.g., won’t work:

```auto
{
  const canvas = DOM.canvas(600, 400);
  setTimeout(() => {throw Error('Context lost. Reload the page.')}, 1000);
  return canvas;
}

```

However, you can return a generator that yields your canvas as its first value, and a promise as its last. When an error happens, you reject the promise to let Observable know:

```auto
{
  let onError;
  const canvas = DOM.canvas(600, 400);
  const promise = new Promise((_, reject) => { onError = reject});
  setTimeout(() => onError('Context lost. Reload the page.'), 1000);
  
  yield canvas;
  yield promise;
  // Can also be written as:
  // yield* [canvas, promise];
}

```

---

<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:** [August 31, 2020, 4:20pm UTC](https://talk.observablehq.com/t/handling-a-runtime-error/3816/3 "2020-08-31T16:20:08Z")

</div>

By the way, your example is not a JS runtime error in the strictest sense, because Observable’s Runtime will detect that it cannot resolve “undefined\_value” even before the cell is executed. That’s why a try / catch has no effect here.

If you want to test or demonstrate “real” runtime errors, try something like this:

```auto
{  
  try { window.foo() }
  catch { return "error" }
}

```