# Show errors in ACE and Monaco editor

**URL:** https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529
**Category:** Developing Nodes
**Created:** [17 July 2021 15:11 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529 "2021-07-17T15:11:48Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [17 July 2021 15:11 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/1 "2021-07-17T15:11:48Z")

</div>

Hi folks,

When javascript syntax errors are generated in the blockly node (which shouldn't happen...):

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

Then I would like the editor to show those errors. But I'm not sure how to do that at the moment...  
@Steve-Mcl has working hard to integrate the Monaco editor in Node-RED, but now Node-RED supports both the Monaco and Ace editor. So how can I support both editors? Is it a common API perhaps?

I had a quick look at the function node ([here](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/10-function.html#L397)), but I don't see where it is achieved...

And to get hold of the errors, I assume I can use `getAnnotations` (see [here](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/10-function.html#L503)) for both editors?

Thanks for the clarification!!  
Bart

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 July 2021 15:15 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/2 "2021-07-17T15:15:03Z")

</div>

Not 100% sure what you are asking Bart?

Monaco simply emulates the most common ace functions. Whether ace or Monaco is used it should be transparent.

> [@BartButenaers](#):
>
> And to get hold of the errors, I assume I can use `getAnnotations` (see [here](https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/10-function.html#L503)) for both editors?

Correct.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [17 July 2021 15:27 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/3 "2021-07-17T15:27:11Z")

</div>

> [@Steve-Mcl](#):
>
> Monaco simply emulates the most common ace functions

Ah ok, I assumed it where completely different editors. Each with its own API...

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 July 2021 15:34 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/4 "2021-07-17T15:34:07Z")

</div>

There isn't really an API (there probably should be to simplify transplanting the code editor) but as ace was exposed to node creators from the start (and many node creators accessed ace functionally directly) there was little option but to emulate ace functionally.

Saying that, I did break parts of the code up for easier future editor replacements.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [17 July 2021 20:40 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/5 "2021-07-17T20:40:45Z")

</div>

> [@Steve-Mcl](#):
>
> node creators accessed ace functionally directly) there was little option but to emulate ace functionally

Oops, sorry! 😀

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [17 July 2021 20:43 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/6 "2021-07-17T20:43:13Z")

</div>

Hey Steve,

I'm back at home ...j  
The getAnnotations already works file.  
But when I copy the javascript code from the blockly node (see screenshot above) to a function node, then the errors are underlined and I get information about it in a popup:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/8/28ed26c2443be46214fe28ffe04b9510430bb4e1.png)

It is not clear to me why I don't get those error indicators in the blockly node editor.  
Could that be because our editor is readonly perhaps?

> [@Steve-Mcl](#):
>
> many node creators accessed ace functionally directly

For sure it wasn't me 🤥

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [17 July 2021 20:54 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/7 "2021-07-17T20:54:59Z")

</div>

> [@BartButenaers](#):
>
> Could that be because our editor is readonly perhaps?

Bart, are you saying the Monaco errors are not shown in the blocky nodes js editor (but obviously you want them?)

I'm not sure if it is a feature or if there is a flag to not validate read-only code.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [17 July 2021 21:06 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/8 "2021-07-17T21:06:02Z")

</div>

Yes seems so. When I set readonly to false, then the errors are displayed in the blockly node:

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

Will need to start googling ...

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [17 July 2021 21:19 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/9 "2021-07-17T21:19:12Z")

</div>

> [@BartButenaers](#):
>
> Will need to start googling ...

I see [here](https://github.com/microsoft/monaco-editor/issues/311#issuecomment-272682233) someone with the same request as me. So it seems this is not supported. Case closed...

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [17 July 2021 21:47 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/10 "2021-07-17T21:47:49Z")

</div>

@BartButenaers later in that same thread is this comment that shows they have added an option to show validation errors in read-only mode - [Markers are not shown in readonly models · Issue #311 · microsoft/monaco-editor · GitHub](https://github.com/microsoft/monaco-editor/issues/311#issuecomment-578026465)

So it is supported, just needs enabling. Would need @Steve-Mcl to advise if we expose the right things to get to that setting.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [17 July 2021 21:59 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/11 "2021-07-17T21:59:21Z")

</div>

@knolleary Thanks for having a look at that thread!!!!!

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [18 July 2021 08:32 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/12 "2021-07-18T08:32:34Z")

</div>

Good find.

@BartButenaers can you try setting your instantiation of the editor to ...

```javascript
            node.aceEditor = RED.editor.createEditor({
                id: 'aceDiv',
                mode: 'ace/mode/nrjavascript',
                value: node.func,
                readOnly: true,
                renderValidationDecorations: "on" 
            });

```

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [18 July 2021 20:59 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/13 "2021-07-18T20:59:11Z")

</div>

> [@Steve-Mcl](#):
>
> `renderValidationDecorations: "on" `

That works fine!  
The errors are marked, even in readonly mode.

Thanks a lot guys for your help!!!!!!  
Bart

---

<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: [1 August 2021 20:59 UTC](https://discourse.nodered.org/t/show-errors-in-ace-and-monaco-editor/48529/14 "2021-08-01T20:59:45Z")

</div>

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