fix: propagate and display invalid JSON errors in VRL web playground (#…

…17826)

<!--
**Your PR title must conform to the conventional commit spec!**

  <type>(<scope>)!: <description>

  * `type` = chore, enhancement, feat, fix, docs
  * `!` = OPTIONAL: signals a breaking change
* `scope` = Optional when `type` is "chore" or "docs", available scopes
https://github.com/vectordotdev/vector/blob/master/.github/semantic.yml#L20
  * `description` = short description of the change

Examples:

  * enhancement(file source): Add `sort` option to sort discovered files
  * feat(new source): Initial `statsd` source
  * fix(file source): Fix a bug discovering new files
  * chore(external docs): Clarify `batch_size` option
-->

closes: #17445 

Note that `wasm-pack build` modified some previously generated files.
Created #17827.

Example:

![image](https://github.com/vectordotdev/vector/assets/1138161/4fd0b825-8e1b-4466-9c90-5ab8705ad0e8)

lib/vector-vrl/web-playground/public/README.md

@@ -53,15 +53,16 @@ Some functions of VRL are not supported or don't work as expected at the
 moment due to WASM limitations with some Rust crates, in
 the future we will modify the functions so that they are supported.
 
-List of functions that aren't supported at the moment:
-
-- `log()`
-- `decrypt()`
-- `encrypt()`
-- `get_hostname()`
-- `parse_groks()`
-- `random_bytes()`
-- `reverse_dns()`
+List of functions that aren't supported at the moment. All of them exist,
+but they will either error (enrichment functions) or abort (all the others) at runtime.
+
+- `log`
+- `get_hostname`
+- `parse_grok`
+- `parse_groks`
+- `reverse_dns`
+- `find_enrichment_table_records`
+- `get_enrichment_table_record`
 
 Functions from VRL stdlib that are currently not supported can be found
 with this [issue filter][vrl-wasm-unsupported-filter]

lib/vector-vrl/web-playground/public/index.js

@@ -100,13 +100,29 @@ export class VrlWebPlayground {
                 program: this.programEditor.getValue(),
                 event: this.eventEditor.getModel().getLinesContent().join("\n"),
                 is_jsonl: true,
+                error: null,
             };
         }
-        return {
-            program: this.programEditor.getValue(),
-            event: JSON.parse((this.eventEditor.getValue().length == 0) ? "{}" : this.eventEditor.getValue()),
-            is_jsonl: false,
-        };
+
+        const editorValue = this.eventEditor.getValue();
+        try {
+            return {
+                program: this.programEditor.getValue(),
+                event: JSON.parse((editorValue.length === 0) ? "{}" : editorValue),
+                is_jsonl: false,
+                error: null,
+            };
+        }
+        catch (error) {
+            console.error(error);
+            return {
+                program: this.programEditor.getValue(),
+                event: null,
+                is_jsonl: false,
+                error: `Could not parse JSON event:\n${editorValue}`,
+            };
+        }
+        return state;
     }
 
     disableJsonLinting() {
@@ -168,6 +184,11 @@ export class VrlWebPlayground {
         if (input == null) {
             input = this.getState();
         }
+        if (input.error) {
+            this.disableJsonLinting();
+            this.outputEditor.setValue(input.error);
+            return input;
+        }
 
         let res = this.run_vrl(input);
         console.log("[DEBUG::handleRunCode()] Printing out res: ", res);

lib/vector-vrl/web-playground/public/package.json

@@ -8,7 +8,5 @@
   ],
   "module": "vector_vrl_web_playground.js",
   "types": "vector_vrl_web_playground.d.ts",
-  "sideEffects": [
-    "./snippets/*"
-  ]
+  "sideEffects": false
 }