MISC: Show user-friendly error message when there is syntax error in scripts (#1963)

src/Script/RamCalculations.ts

@@ -146,7 +146,7 @@ function parseOnlyRamCalculate(
     const scriptFileType = getFileType(script.filename);
     let moduleAST;
     try {
-      moduleAST = parseAST(script.code, scriptFileType);
+      moduleAST = parseAST(script.filename, script.server, script.code, scriptFileType);
     } catch (error) {
       return {
         errorCode: RamCalculationErrorCode.ImportError,
@@ -552,7 +552,7 @@ export function calculateRamUsage(
 ): RamCalculation {
   try {
     const fileType = getFileType(scriptName);
-    const ast = typeof input === "string" ? parseAST(input, fileType) : input;
+    const ast = typeof input === "string" ? parseAST(scriptName, server, input, fileType) : input;
     return parseOnlyRamCalculate(ast, scriptName, server, getFileTypeFeature(fileType), otherScripts);
   } catch (error) {
     return {

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -276,7 +276,7 @@ function Root(props: IProps): React.ReactElement {
     }
     let ast;
     try {
-      ast = parseAST(newCode, getFileType(currentScript.path));
+      ast = parseAST(currentScript.path, currentScript.hostname, newCode, getFileType(currentScript.path));
       makeModelsForImports(ast, server);
     } catch (error) {
       showRAMError({

src/utils/ScriptTransformer.ts

@@ -63,9 +63,10 @@ export function getFileTypeFeature(fileType: FileType): FileTypeFeature {
   return result;
 }
 
-export function parseAST(code: string, fileType: FileType): AST {
+export function parseAST(scriptName: string, hostname: string, code: string, fileType: FileType): AST {
   const fileTypeFeature = getFileTypeFeature(fileType);
   let ast: AST;
+  try {
     /**
      * acorn is much faster than babel-parser, especially when parsing many big JS files, so we use it to parse the AST of
      * JS code. babel-parser is only useful when we have to parse JSX and TypeScript.
@@ -90,6 +91,37 @@ export function parseAST(code: string, fileType: FileType): AST {
         plugins: [["estree", { classFeatures: true }], ...plugins],
       }).program;
     }
+  } catch (error) {
+    /**
+     * The message of syntax errors may be cryptic for players without programming experience. For example, some players
+     * asked us what "Unexpected token" means. Therefore, we will catch the error here and provide a user-friendly error
+     * message.
+     */
+    if (error instanceof SyntaxError) {
+      let errorLocation = "unknown";
+      /**
+       * Some browsers (e.g., Firefox, Chrome) add the "loc" property to the error object. This property provides the
+       * line and column numbers of the error.
+       */
+      if (
+        "loc" in error &&
+        error.loc &&
+        typeof error.loc === "object" &&
+        "line" in error.loc &&
+        "column" in error.loc
+      ) {
+        errorLocation = `Line ${error.loc.line}, Column: ${error.loc.column}`;
+      }
+      throw new Error(
+        `Syntax error in ${scriptName}, server: ${hostname}. Error location: ${errorLocation}. Error message: ${error.message}.`,
+        {
+          cause: error,
+        },
+      );
+    } else {
+      throw error;
+    }
+  }
   return ast;
 }