# How do you handle runtime exceptions caused by extensions?

**URL:** <https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994>\
**Category:** Learn\
**Created:** [July 2, 2020, 1:42pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994 "2020-07-02T13:42:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Birowsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/birowsky/32/3298_2.png) [@Birowsky](https://discourse.elm-lang.org/u/Birowsky)\
**Post date:** [July 2, 2020, 1:42pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/1 "2020-07-02T13:42:41Z")

</div>

What is your practice of handling runtime exceptions in Elm caused by DOM manipulations caused by browser extensions/plugins?

We recently ran into this because of the [Grammarly Chrome extension](https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen?hl=en).

---

<div class="post-metadata">

**Author:** ![ymtszw](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ymtszw/32/2360_2.png) [@ymtszw](https://discourse.elm-lang.org/u/ymtszw)\
**Post date:** [July 2, 2020, 2:39pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/2 "2020-07-02T14:39:01Z")

</div>

Haven’t looked up recently but [Runtime errors caused by Chrome extensions](https://discourse.elm-lang.org/t/runtime-errors-caused-by-chrome-extensions/4381) is a related issue.

---

<div class="post-metadata">

**Author:** ![Birowsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/birowsky/32/3298_2.png) [@Birowsky](https://discourse.elm-lang.org/u/Birowsky)\
**Post date:** [July 2, 2020, 3:49pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/3 "2020-07-02T15:49:34Z")

</div>

It definitely is. I’m now fishing for good practices around this.

---

<div class="post-metadata">

**Author:** ![szicari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/szicari/32/3300_2.png) [@szicari](https://discourse.elm-lang.org/u/szicari)\
**Post date:** [July 4, 2020, 5:26am UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/4 "2020-07-04T05:26:37Z")

</div>

+1 to this, @Birowsky. I don’t have an answer, but I ran into the same thing during a demo using an app I had written in Elm. While I didn’t figure out the problem, I observed that the Elm runtime seemed to recover without reloading the page when I disabled the plugin during the demo. Maybe it’s possible to at least detect the plugin and display a warning message?

---

<div class="post-metadata">

**Author:** ![szicari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/szicari/32/3300_2.png) [@szicari](https://discourse.elm-lang.org/u/szicari)\
**Post date:** [July 4, 2020, 5:30am UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/5 "2020-07-04T05:30:01Z")

</div>

I read through the Chrome Plugins link above and realize now there’s a viable workaround I wish I had known about before. Oh well, please disregard my previous message.

---

<div class="post-metadata">

**Author:** ![nk123](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nk123/32/2562_2.png) [@nk123](https://discourse.elm-lang.org/u/nk123)\
**Post date:** [July 4, 2020, 7:10am UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/6 "2020-07-04T07:10:25Z")

</div>

> How do you handle runtime exceptions caused by extensions?

Case by case. There is no systemic approach because the very concept of virtual DOM is flawed. It can’t get over the unfortunate fact it’s not the only one to modify the DOM.

---

<div class="post-metadata">

**Author:** ![malaire](https://avatars.discourse-cdn.com/v4/letter/m/b782af/32.png) [@malaire](https://discourse.elm-lang.org/u/malaire)\
**Post date:** [July 4, 2020, 7:21am UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/7 "2020-07-04T07:21:39Z")

</div>

Another viewpoint is that the very concept of browser plugins is flawed. Browsers should show websites as they are meant to be shown and not modify them in any way.

So don’t try to handle the runtime exceptions caused by extensions in any way - just inform users that they should not use browser plugins.

---

<div class="post-metadata">

**Author:** ![Birowsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/birowsky/32/3298_2.png) [@Birowsky](https://discourse.elm-lang.org/u/Birowsky)\
**Post date:** [July 4, 2020, 8:28am UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/9 "2020-07-04T08:28:53Z")

</div>

Hold up. What is this **viable workaround** you speak of?

Or are you referring to jinjor’s patch?

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [July 4, 2020, 1:14pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/10 "2020-07-04T13:14:15Z")

</div>

At work we render all our textareas using two helpers functions, so we added `Html.Attributes.attribute "data-gramm_editor" "false"` to both of them. That got rid of the majority of all virtual dom errors in our error tracking service.

---

<div class="post-metadata">

**Author:** ![szicari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/szicari/32/3300_2.png) [@szicari](https://discourse.elm-lang.org/u/szicari)\
**Post date:** [July 4, 2020, 2:21pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/11 "2020-07-04T14:21:16Z")

</div>

@jinjor’s workaround: `data-gramm_editor=“false”`.

---

<div class="post-metadata">

**Author:** ![Chadtech](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/chadtech/32/609_2.png) [@Chadtech](https://discourse.elm-lang.org/u/Chadtech)\
**Post date:** [July 5, 2020, 5:34pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/12 "2020-07-05T17:34:14Z")

</div>

At my last job we had trouble with some browser extensions trying to add their own html elements to the top of the `<body></body>` tag’s children. Which would lead to the Elm virtual dom finding a different element than it expects at certain positions in the dom.

The solution we came to, that we learned from another Elm company, was to modify the compiled javascript from the Elm compiler, so that `Browser.application` doesnt look for the `<body>` tag, but instead looks for a `<div>` directly under the body. Then, our html file that we served would have that `<div>` in that position too.

---

<div class="post-metadata">

**Author:** ![tgelu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/tgelu/32/1008_2.png) [@tgelu](https://discourse.elm-lang.org/u/tgelu)\
**Post date:** [July 6, 2020, 12:09pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/13 "2020-07-06T12:09:37Z")

</div>

Maybe not VDOM precisely, but Elm’s particular VDOM implementation.  
There are some other implementations out there that do not keep an internal model of the DOM as a base for the next update, but they use the real DOM state (which could have been altered by an external script) as the input to figure out the next changes.  
I remember someone proposed change in the VDOM algorithm to Evan at elm-europe, but don’t know how it landed.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [July 6, 2020, 1:22pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/14 "2020-07-06T13:22:47Z")

</div>

> [@Chadtech](#):
>
> to modify the compiled javascript from the Elm compiler, so that `Browser.application` doesnt look for the `<body>` tag, but instead looks for a `<div>` directly under the body

Would it be a nice feature on a future version of the Elm compiler to be able to pass this as a parameter to the compiler? So you don’t have to do a post-compilation edit on the generated .js.

---

<div class="post-metadata">

**Author:** ![Arkham](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/arkham/32/2624_2.png) [@Arkham](https://discourse.elm-lang.org/u/Arkham)\
**Post date:** [July 6, 2020, 3:16pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/15 "2020-07-06T15:16:23Z")

</div>

This is a problem for React as well: [https://bugs.chromium.org/p/chromium/issues/detail?id=872770](https://bugs.chromium.org/p/chromium/issues/detail?id=872770)

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [July 6, 2020, 5:10pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/16 "2020-07-06T17:10:28Z")

</div>

You shouldn’t need to edit the compiled .js. You can pass a `node` parameter when you initialize the elm application, and it will place the app’s html there rather than directly in the body.

---

<div class="post-metadata">

**Author:** ![antew](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/antew/32/2102_2.png) [@antew](https://discourse.elm-lang.org/u/antew)\
**Post date:** [July 6, 2020, 5:48pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/17 "2020-07-06T17:48:12Z")

</div>

With `Browser.element` you are correct, but if you are using a [Browser.application](https://package.elm-lang.org/packages/elm/browser/latest/Browser#application) Elm will take over the `<body>` node.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [July 7, 2020, 12:03pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/18 "2020-07-07T12:03:19Z")

</div>

> [@dta](#):
>
> You shouldn’t need to edit the compiled .js. You can pass a `node` parameter when you initialize the elm application, and it will place the app’s html there rather than directly in the body.

Perhaps that would be a better way to do it, rather than a compilation time flag - make `Browser.application` also allow the node to take over to be specified.

---

<div class="post-metadata">

**Author:** ![Chadtech](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/chadtech/32/609_2.png) [@Chadtech](https://discourse.elm-lang.org/u/Chadtech)\
**Post date:** [July 8, 2020, 10:54pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/19 "2020-07-08T22:54:11Z")

</div>

> [@rupert](#):
>
> Would it be a nice feature on a future version of the Elm compiler to be able to pass this as a parameter to the compiler? So you don’t have to do a post-compilation edit on the generated .js.

Im not sure. If there was an option to solve the problem, then I guess thats nice because it solves the problem. But its also a kind of obscure configuration detail. 1 configuration detail per problem that could possibly be solved by a configuration detail seems like a bad direction to go in tho, because such problem are possibly endless.

One solution could be telling the `Elm.init()` function in JS what element to fill up. So you can pass in `documet.body` or anything else you want. Its worth noting that this is similar to how things were in 0.18, which didnt have the problem I originally mentioned. 0.19 changed, in that it doesnt allow Elm apps that do navigation to render in anything less than the `<body/>`, and I believe that choice was because that would permit the possibility of a small Elm widget being an `Browser.application` and therefore having full control over the navigation. It doesnt seem like a small widget should have that responsibility. Its likely to get into navigation conflicts with other things on the page.

Just reverting that decision in 0.19 could be the simplest solution, but it would become a possible again for small Elm widgets to control navigation. And anyway, I kind of like Elm’s ambitious approach of taking over everything. Seems like the right direction, even if its difficult and uncharted territory for frontend technology.

So again, I dont know how to solve it.

---

<div class="post-metadata">

**Author:** ![eimfach](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/eimfach/32/3247_2.png) [@eimfach](https://discourse.elm-lang.org/u/eimfach)\
**Post date:** [July 11, 2020, 1:39pm UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/20 "2020-07-11T13:39:47Z")

</div>

I think this is a higher kinded problem of the DOM API … I think one solution could be DOM manipulation transactions and DOM manipulation locks. I think this needs to be addressed at the DOM specification level.

---

<div class="post-metadata">

**Author:** ![supermario](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/supermario/32/92_2.png) [@supermario](https://discourse.elm-lang.org/u/supermario)\
**Post date:** [July 19, 2020, 7:59am UTC](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994/21 "2020-07-19T07:59:55Z")

</div>

This has been raised before, this thread has lots of good discussion, workarounds and references:

> [@Fullscreen Elm App in 0.19 (childNode issue) Reopened](https://discourse.elm-lang.org/t/fullscreen-elm-app-in-0-19-childnode-issue-reopened/3174):
>
> Continuing the discussion from [JavaScript Exception: Cannot read property childNodes of undefined, with extension Dark Reader](https://discourse.elm-lang.org/t/javascript-exception-cannot-read-property-childnodes-of-undefined-with-extension-dark-reader/2748/5): I am reopening this as I believe it is a big issue for real world Elm applications. At Humio are have big problems with browser extensions and third-party trackers and other scripts in our Elm application. We finally after several weeks of hard work were able to convert from 0.18 -\> 0.19. We use a fullscreen elm application to be able to control navigation etc. We dep…

Also this:

> <https://github.com/elm/browser/blob/master/notes/navigation-in-elements.md>

[Next page](https://discourse.elm-lang.org/t/how-do-you-handle-runtime-exceptions-caused-by-extensions/5994.md?page=2)
