JS-error improvements (exercism#7818)

* Add readable missing export error

* Adjust error header

* Visual tweak

Author: dem4ron

app/css/bootcamp/components/editor-information-tooltip.css

@@ -75,6 +75,8 @@
     &.error {
         @apply bg-white border-2 border-red-500;
 
+        @apply p-0;
+
         filter: drop-shadow(0px 4px 8px rgba(79, 114, 205, 0.5));
 
         h2 {
@@ -89,6 +91,7 @@
             }
         }
         .content {
+            @apply rounded-6;
             @apply text-textColor1;
             @apply pt-10 px-20 pb-12;
             @apply relative z-tooltip-content bg-white;

app/javascript/components/bootcamp/JikiscriptExercisePage/CodeMirror/extensions/end-line-information/describeError.ts

@@ -9,14 +9,19 @@ import { marked } from 'marked'
 import type { StaticError } from '@/interpreter/error'
 import { SyntaxError } from '@/interpreter/error'
 
-export function describeError(error: StaticError, context?: string) {
+export function describeError(
+  error: StaticError,
+  language: 'jikiscript' | 'javascript',
+  context?: string
+) {
+  const who = language === 'jikiscript' ? 'Jiki' : 'We'
   let errorHeading
   if (error instanceof SyntaxError) {
-    errorHeading = "Jiki couldn't understand your code"
+    errorHeading = `${who} couldn't understand your code`
   } else if (error.type == 'LogicError') {
     errorHeading = "Something didn't go as expected!"
   } else {
-    errorHeading = 'Jiki hit a problem running your code.'
+    errorHeading = `${who} hit a problem running your code.`
   }
   if (context) {
     errorHeading = `${context}: ${errorHeading}`

app/javascript/components/bootcamp/JikiscriptExercisePage/test-runner/generateAndRunTestSuite/execJS.ts

@@ -33,7 +33,7 @@ export async function execJS(
   } catch (err: any) {
     return {
       status: 'error',
-      cleanup: () => {},
+      cleanup: () => { },
       error: {
         message: err.message.replace(/\s*\(\d+:\d+\)$/, ''),
         lineNumber: err.loc.line - 1, // No idea why we are 2 out.
@@ -79,8 +79,8 @@ export async function execJS(
     }
     return successResult
   } catch (error: any) {
-    let lineNumber
-    let colNumber
+    let lineNumber: string
+    let colNumber: string
 
     if (error.name === 'JikiLogicError') {
       ;[, lineNumber, colNumber] = extractLineColFromJikiLogicError(error)
@@ -89,6 +89,9 @@ export async function execJS(
       ;[, lineNumber, colNumber] =
         error.stack?.match(/:(\d+):(\d+)\)?\s*$/m) || []
     }
+    if (error.message.includes('does not provide an export')) {
+      error.message = `Oh dear, we couldn't find \`${fnName}\`. Did you forget to \`export\` it?`
+    }
 
     const execError: ExecError = {
       status: 'error',

app/javascript/components/bootcamp/JikiscriptExercisePage/utils/showError.ts

@@ -51,7 +51,7 @@ export function showError({
     from = Math.max(0, error.location.absolute.begin - 1)
     to = Math.max(0, error.location.absolute.end - 1)
     line = error.location.line
-    html = describeError(error, context)
+    html = describeError(error, 'jikiscript', context)
   } else {
     // Codemirror requires a 1-based line number, while Js's error output generates a 0-based line number
     const lineNumber = error.lineNumber + 1
@@ -61,12 +61,15 @@ export function showError({
     from = pos - 1
     to = pos
     line = lineNumber
-    html = describeError({
-      // @ts-expect-error - partial StaticError-like structure
-      // TODO: adjust types in describeError
-      type: error.type,
-      message: error.message,
-    })
+    html = describeError(
+      {
+        // @ts-expect-error - partial StaticError-like structure
+        // TODO: adjust types in describeError
+        type: error.type,
+        message: error.message,
+      },
+      'javascript'
+    )
   }
 
   scrollToLine(editorView, line)