feat: show error message in rsdoctor page

examples/rsbuild-minimal/rsbuild.config.ts

@@ -24,6 +24,12 @@ export default defineConfig({
                   limit: 1,
                 },
               ],
+              'ecma-version-check': [
+                'Warn',
+                {
+                  ecmaVersion: 3,
+                },
+              ],
             },
           },
           port: 9988,

packages/components/package.json

@@ -50,6 +50,7 @@
     "dist/"
   ],
   "devDependencies": {
+    "@rsbuild/plugin-check-syntax": "1.2.0-beta.1",
     "@ant-design/icons": "5.5.1",
     "@monaco-editor/react": "4.6.0",
     "@rsdoctor/graph": "workspace:*",

packages/components/src/components/Alert/link.tsx

@@ -1,25 +1,38 @@
 import React from 'react';
 import { Alert, Button, Space, Typography } from 'antd';
 import { InfoCircleOutlined } from '@ant-design/icons';
+
 import { useRuleIndexNavigate } from '../../utils';
+
 import { LinkAlertProps } from './types';
 
 export const LinkRuleAlert: React.FC<LinkAlertProps> = ({ data }) => {
-  const { title, description = '', level, code } = data;
+  const { title, error, description, level, code } = data;
   const navigate = useRuleIndexNavigate(code, data.link);
 
   return (
     <Alert
       showIcon
       message={
         <Space>
-          <Typography.Text code strong onClick={navigate} style={{ cursor: 'pointer' }}>
+          <Typography.Text
+            code
+            strong
+            onClick={navigate}
+            style={{ cursor: 'pointer' }}
+          >
             <a>{code}</a>
           </Typography.Text>
           <Typography.Text strong>{title}</Typography.Text>
         </Space>
       }
-      description={<div dangerouslySetInnerHTML={{ __html: description }} />}
+      description={
+        <div>
+          {error?.source?.path ? <div>Source: {error.source.path}</div> : null}
+          {error?.output?.path ? <div>Output: {error.output.path}</div> : null}
+          <div>Message: {description}</div>
+        </div>
+      }
       type={level === 'warn' ? 'info' : level}
       action={
         <Button type="link" onClick={navigate} size="small">

packages/components/src/components/Alert/types.ts

@@ -1,6 +1,8 @@
 import { Rule } from '@rsdoctor/types';
 import React from 'react';
 
+import type { CheckSyntax } from '@rsbuild/plugin-check-syntax';
+
 export interface AlertProps extends Omit<PackageRelationAlertProps, 'data'> {
   data: Rule.RuleStoreDataItem;
   cwd: string;
@@ -29,8 +31,12 @@ export interface CodeViewAlertProps {
   cwd: string;
 }
 
+type CheckSyntaxError =
+  CheckSyntax['errors'] extends Array<infer T> ? T : false;
 export interface LinkAlertProps {
-  data: Rule.LinkRuleStoreData;
+  data: Rule.LinkRuleStoreData & {
+    error?: CheckSyntaxError;
+  };
 }
 
 export interface EMOAlertProps {

packages/core/src/rules/rules/ecma-version-check/index.ts

@@ -6,7 +6,6 @@ import { defineRule } from '../../rule';
 import { Config } from './types';
 
 import { Linter } from '@rsdoctor/types';
-
 export type { Config } from './types';
 
 const title = 'ecma-version-check';
@@ -49,9 +48,9 @@ export const rule = defineRule<typeof title, Config>(() => {
         await checkSyntax.check(asset.path, asset.content);
         checkSyntax.errors.forEach((err) => {
           report({
-            message: err.message,
+            message: `Find some syntax that does not match "ecmaVersion <= ${checkSyntax.ecmaVersion}"`,
             detail: {
-              err,
+              error: err,
               type: 'link',
             },
           });

packages/core/src/rules/rules/ecma-version-check/types.ts

@@ -1,3 +1,3 @@
 import type { PluginCheckSyntaxOptions } from '@rsbuild/plugin-check-syntax';
 
-export type Config = PluginCheckSyntaxOptions;
+export interface Config extends PluginCheckSyntaxOptions {}