# Errors with UI templates

**URL:** <https://discourse.nodered.org/t/errors-with-ui-templates/68038>\
**Category:** Dashboard\
**Created:** [21 September 2022 16:30 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038 "2022-09-21T16:30:00Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [21 September 2022 16:30 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/1 "2022-09-21T16:30:00Z")

</div>

I'm using this ui template to display some Grafana charts in an iframe.

The flow works OK, but on page refresh I see

_**TypeError: Cannot read properties of undefined (reading 'payload')**_

in browser console. Is there some way to stop this ?

My limited understanding tells me that scope watch shouldn't be trying to set the attribute until the payload arrives, so why the error on refresh or page load?

```auto
<html>
<iframe id="myFrame3" width="1384" height="106px" style = "overflow:hidden; margin:auto; border:0px solid green;"></iframe>

<script>
//NOTE, more then one chart on a page, rename in the second and following 
//templates the "myframe" variable so that every template has a unique name.
(function(scope) {
    // watch msg object from Node-RED
    scope.$watch('msg', function(msg) {
        // new message received
        var x = document.getElementById('myFrame3');
        x.setAttribute('src', msg.payload); 
        });
})(scope);
</script>
</html>

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [21 September 2022 17:27 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/2 "2022-09-21T17:27:59Z")

</div>

> [@Sean-McG](#):
>
> so why the error on refresh or page load?

hello .. have you unchecked the option in the **ui\_template**

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/4/a45ec6b8cfb9e4985b9486c8bbb75cc1bbe1f0db.png)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [21 September 2022 23:41 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/3 "2022-09-21T23:41:00Z")

</div>

Yes tried all combinations ?

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [21 September 2022 23:56 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/4 "2022-09-21T23:56:30Z")

</div>

what if you console.log the msg in `$watch` to see for any clues in the browser's dev tools, where that msg is coming from

```auto
scope.$watch('msg', function(msg) {
        // new message received
        console.log(msg)
        var x = document.getElementById('myFrame3');
        x.setAttribute('src', msg.payload); 
        });

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [21 September 2022 23:58 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/5 "2022-09-21T23:58:38Z")

</div>

good idea but it shows nothing in log 😪  
scratch that it was filter in console, I do get an undefined msg, even if the ui-node has no input connected 🤪

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 September 2022 00:21 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/6 "2022-09-22T00:21:48Z")

</div>

If I disable the ui-template error goes away so it must be from that node.

Does it run the function on a page refresh, and even without a payload excute  
**x.setAttribute('src', msg.payload);** one time ?

> [@Sean-McG](#):
>
> ```auto
> (function(scope) {
> // watch msg object from Node-RED
> scope.$watch('msg', function(msg) {
> // new message received
> var x = document.getElementById('myFrame3');
> x.setAttribute('src', msg.payload); 
> });
> })(scope);
> 
> ```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 September 2022 00:49 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/7 "2022-09-22T00:49:55Z")

</div>

Thanks for your help - it looks there is a phantom msg, I got around that with

```auto
if (msg != null) {x.setAttribute('src', msg.payload)};

```

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [22 September 2022 00:50 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/8 "2022-09-22T00:50:43Z")

</div>

> [@Sean-McG](#):
>
> Does it run the function on a page refresh, and even without a payload excute

I tested your code and it does seem to execute everytime .. even with the Reload last value unchecked

maybe the best way to block it from proceeding is use an if statement like in the example in the help tab  
to check if the msg has a value before proceeding

```auto
(function(scope) {
    // watch msg object from Node-RED
    scope.$watch('msg', function(msg) {
    if (msg) {
        // new message received
        var x = document.getElementById('myFrame3');
        x.setAttribute('src', msg.payload);
    }
    });
})(scope);

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 September 2022 00:55 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/9 "2022-09-22T00:55:34Z")

</div>

Thanks for checking, I thought I was going mad 😉

Looks like I need to do a lot of modifications in all my scope.$watch functions 🤣

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 October 2022 00:56 UTC](https://discourse.nodered.org/t/errors-with-ui-templates/68038/10 "2022-10-06T00:56:03Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.