Improve error output of python jobs (#219)

Before:

![Screenshot 2022-11-14 at 12 27
12](https://user-images.githubusercontent.com/40952/201649291-a84162bc-56d0-42b5-aa90-11409ebbf581.png)

After:

![Screenshot 2022-11-14 at 12 27
54](https://user-images.githubusercontent.com/40952/201649314-587281a2-0960-4082-8672-342326f2b8fb.png)

Author: fjakobs

packages/databricks-vscode/package.json

@@ -531,6 +531,7 @@
         "@types/triple-beam": "^1.3.2",
         "@vscode/debugadapter": "^1.58.0",
         "@vscode/webview-ui-toolkit": "^1.1.0",
+        "ansi-to-html": "^0.7.2",
         "triple-beam": "^1.3.0"
     },
     "devDependencies": {

packages/databricks-vscode/src/run/WorkflowRunner.ts

@@ -19,6 +19,7 @@ import {SyncDestination} from "../configuration/SyncDestination";
 import {CodeSynchronizer} from "../sync/CodeSynchronizer";
 import {isNotebook} from "../utils";
 import {WorkflowOutputPanel} from "./WorkflowOutputPanel";
+import Convert from "ansi-to-html";
 
 export class WorkflowRunner implements Disposable {
     private panels = new Map<string, WorkflowOutputPanel>();
@@ -135,7 +136,7 @@ export class WorkflowRunner implements Disposable {
                     message: e.message,
                     stack:
                         "error_trace" in e.response
-                            ? e.response.error_trace
+                            ? new Convert().toHtml(e.response.error_trace)
                             : undefined,
                 });
             } else {

packages/databricks-vscode/webview-ui/job.html

@@ -93,6 +93,12 @@
                 display: none;
             }
 
+            #error-stack {
+                margin-top: 10px;
+                white-space: pre;
+                font-family: monospace;
+            }
+
             .alert-error .error-icon {
                 display: inline-block;
                 padding: 0 8px;
@@ -166,7 +172,7 @@
                     </span>
                     <div>
                         <b id="error-description"></b>
-                        <pre id="error-stack"></pre>
+                        <div id="error-stack"></div>
                     </div>
                 </div>
             </div>
@@ -279,7 +285,7 @@
 
                     document.getElementById("error-description").innerText =
                         message || "";
-                    document.getElementById("error-stack").innerText =
+                    document.getElementById("error-stack").innerHTML =
                         stack || "";
                 }
             }
@@ -330,18 +336,19 @@
                 setTimeout(() => {
                     page.setError(
                         `SyntaxError: invalid syntax (hello.py, line 10)`,
-                        `Traceback (most recent call last):
+                        `SyntaxError: invalid syntax (hello.py, line 9)
+Traceback <span style="color:#0AA">(most recent call last)</span>:
 
-            File [1;32m"/databricks/python/lib/python3.9/site-packages/IPython/core/interactiveshell.py"[0m, line [1;32m3524[0m, in [1;35mrun_code[0m
-              exec(code_obj, self.user_global_ns, self.user_ns)
+  File <b><span style="color:#0A0">"/databricks/python/lib/python3.9/site-packages/IPython/core/interactiveshell.py"</span></b>, line <b><span style="color:#0A0">3524</span></b>, in <b><span style="color:#A0A">run_code</span></b>
+    exec(code_obj, self.user_global_ns, self.user_ns)
 
-            [0;36m  File [0;32m""[0;36m, line [0;32m8[0;36m, in [0;35m[0;36m[0m
-            [0;31m    exec(compile(f.read(), filename, 'exec'))[0m
+<span style="color:#0AA">  File </span><span style="color:#0A0">"<command--1>"</span><span style="color:#0AA">, line </span><span style="color:#0A0">8</span><span style="color:#0AA">, in </span><span style="color:#A0A"><cell line: 7></span><span style="color:#0AA"></span>
+<span style="color:#A00">    exec(compile(f.read(), filename, 'exec'))</span>
 
-            [0;36m  File [0;32m"/Workspace/Repos/fabian.jakobs@databricks.com/notebook-best-practices/jobs/hello.py"[0;36m, line [0;32m10[0m
-            [0;31m    pri nt("Hi Deco")[0m
-            [0m        ^[0m
-            [0;31mSyntaxError[0m[0;31m:[0m invalid syntax`
+<span style="color:#0AA">  File </span><span style="color:#0A0">"/Workspace/Repos/fabian.jakobs@databricks.com/ide-best-practices/jobs/hello.py"</span><span style="color:#0AA">, line </span><span style="color:#0A0">9</span>
+<span style="color:#A00">    pr int("Hi Deco")</span>
+       ^
+<span style="color:#A00">SyntaxError</span><span style="color:#A00">:</span> invalid syntax`
                     );
                     stop();
                 }, 3000);

yarn.lock

@@ -1169,6 +1169,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ansi-to-html@npm:^0.7.2":
+  version: 0.7.2
+  resolution: "ansi-to-html@npm:0.7.2"
+  dependencies:
+    entities: ^2.2.0
+  bin:
+    ansi-to-html: bin/ansi-to-html
+  checksum: 8f6ecec6e0d01c37a36541703688870a2a89382117229c54b1af19f455cb87d4645b0b8580691edb50d531fa02dfb7e2b8af3d0768e1527d4164d1e124286516
+  languageName: node
+  linkType: hard
+
 "anymatch@npm:~3.1.2":
   version: 3.1.2
   resolution: "anymatch@npm:3.1.2"
@@ -2142,6 +2153,7 @@ __metadata:
     "@vscode/debugadapter": ^1.58.0
     "@vscode/test-electron": ^2.2.0
     "@vscode/webview-ui-toolkit": ^1.1.0
+    ansi-to-html: ^0.7.2
     esbuild: ^0.15.13
     eslint: ^8.26.0
     fs-extra: ^10.1.0
@@ -2415,6 +2427,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"entities@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "entities@npm:2.2.0"
+  checksum: 19010dacaf0912c895ea262b4f6128574f9ccf8d4b3b65c7e8334ad0079b3706376360e28d8843ff50a78aabcb8f08f0a32dbfacdc77e47ed77ca08b713669b3
+  languageName: node
+  linkType: hard
+
 "entities@npm:^4.2.0, entities@npm:^4.3.0, entities@npm:^4.4.0":
   version: 4.4.0
   resolution: "entities@npm:4.4.0"