report the error message on the page

src/App.vue

@@ -15,6 +15,7 @@
       <el-header>
         <el-input v-model="givenStatement" placeholder="Enter statement to prove"></el-input>
         <el-button type="primary" @click="submitStatement">Submit</el-button>
+        <el-alert v-if="errorMsg" title="Error" type="error" :closable="false">{{ errorMsg }}</el-alert>
       </el-header>
       <el-main>
         <div id="proof-tree"></div>
@@ -40,6 +41,7 @@ export default {
     return {
       givenStatement: '',
       latexStatement: '',
+      errorMsg: '',
       proofTree: null, // 这里假设 proofTree 是一个二叉树结构
       isDialogVisible: false,
     };
@@ -47,9 +49,16 @@ export default {
   methods: {
     submitStatement() {
       // 处理提交逻辑，渲染 proof tree
-      const targetAst = parse(this.givenStatement);
-      this.latexStatement = ast.astsToLateX(targetAst);
-      this.renderProofTree();
+
+      // 接受parse的报错信息
+      try {
+        const targetAst = parse(this.givenStatement);
+        this.latexStatement = ast.astsToLateX(targetAst);
+        this.renderProofTree();
+      } catch (error) {
+        this.errorMsg = 'Parsing error: ' + error.message;
+        // Handle the error here, such as displaying an error message to the user
+      }
     },
     renderKaTeX() {
       katex.render(this.latexStatement, this.$refs.katexContainer, {