chore: unify error code (#3156)

Author: 2heal1

apps/website-new/docs/en/guide/_meta.json

@@ -13,5 +13,10 @@
     "type": "dir",
     "name": "framework",
     "label": "Frameworks"
+  },
+  {
+    "type":"dir",
+    "name":"troubleshooting",
+    "label":"Troubleshooting"
   }
 ]

apps/website-new/docs/en/guide/basic/_meta.json

@@ -1 +1 @@
-["runtime", "rspack", "webpack", "rsbuild", "vite", "chrome-devtool", "type-prompt", "error-catalog"]
+["runtime", "rspack", "webpack", "rsbuild", "vite", "chrome-devtool", "type-prompt"]

apps/website-new/docs/en/guide/basic/error-catalog.mdx

@@ -0,0 +1,16 @@
+[
+  "overview",
+  {
+    "type": "dir",
+    "name": "runtime",
+    "label": "Runtime",
+    "collapsed":true
+  },
+  {
+    "type": "dir",
+    "name": "type",
+    "label": "Type",
+    "collapsed":true
+  },
+  "other"
+]

apps/website-new/docs/en/guide/troubleshooting/_meta.json

@@ -0,0 +1,74 @@
+# Other
+
+This section is a collection of common issues related to the implementation of `Module Federation` in general(not specific error code).
+The main goal is to provide additional context and solution paths for beginners not familiar with the fundamental ways of how `Module Federation` is working at its core.
+
+## Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+#### Error Message
+:::danger Browser Error Message
+Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
+
+You might have mismatching versions of React and the renderer (such as React DOM)
+
+You might be breaking the Rules of Hooks
+
+You might have more than one copy of React in the same app
+:::
+
+:::danger Browser Error Message
+Uncaught TypeError: Cannot read properties on null (reading `useState`)
+:::
+
+#### Solution
+
+This error is a React multi-instance problem, which usually occurs when react does not reuse the same instance.
+This problem can be avoided by setting `shared` and setting `singleton: true` singleton mode.
+
+```ts title="modern.config.js"
+{
+    ...
+    new ModuleFederationPlugin({
+            ...,
+         // Default basic configuration
+         // shared: [
+         //   'react',
+         //   'react-dom',
+         //   'my-custom-module'
+         // ]
+
+         // Configuration with more specificity
+            shared: {
+                react: { singleton: true, },
+                'react-dom': { singleton: true, },
+                'my-custom-module': { singleton: true, },
+                ...
+            },
+        })
+      ])
+  }
+```
+
+## Unable to compile federated types, Error: compile TS failed
+
+#### Error Message
+:::danger Browser Error Message
+Unable to compile federated types, Error: compile TS failed, the original command is 'npx tsc --project file-path.json'.
+:::
+
+:::danger Browser Error Message
+Error: ENOENT: no such file or directory, open 'project-path/rspack_hmr/application-name/dist/@mf-types.zip'
+:::
+
+#### Solution
+
+1. Execute `npx tsc --project file-path.json` according to the error message to solve all type problems encountered.
+2. Check your `ModuleFederationPlugin` config field `exposes`:
+
+```ts title="[modern|rspack|rsbuild|webpack].config.[js,ts]"
+new ModuleFederationPlugin({
+    ...
+    // Make sure both key and value start with "./"
+    exposes: { './Foo': './src/<path-to-file>/Foo.tsx' },
+    ...
+  })
+```

apps/website-new/docs/en/guide/troubleshooting/other.mdx

@@ -0,0 +1,12 @@
+# Overview
+
+Module Federation currently provides **Build Tools**, **Runtime API**, **Type Hints** and **Debugging Tools**. In order to locate the corresponding problems faster, we classify error messages. Divide them into the following categories:
+
+* [Runtime](./runtime/RUNTIME-001)
+* [Type](./type/TYPE-001)
+* Build
+* Debugging tools
+
+And for the information thrown internally, specific error codes will be given. The error code consists of the error type and ID (such as **RUNTIME-001**). You can find the specified page based on the error code to learn about the cause and solution of the error.
+
+For common problems when using third-party packages, we have placed them in the [Other](./other) chapter, such as high-frequency React multi-instance problems, etc.

apps/website-new/docs/en/guide/troubleshooting/overview.md

@@ -0,0 +1,24 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+import Table from '@components/Table'
+
+<ErrorCodeTitle code='RUNTIME-001'/>
+
+
+## Reasons
+
+When the producer entry file is loaded normally, the producer will be registered in the global object (globalThis/window), which can be accessed through window[remoteEntryKey].
+
+However, during this loading process, registered producers are inaccessible. There are three possible causes for this error:
+
+1. The remoteEntryUrl is not right.
+2. The remoteEntry file does not mount the container correctly.
+3. Network problem, the resource cannot be accessed.
+
+## Solutions
+
+There are corresponding solutions for the reasons:
+
+1. Check whether the remoteEntryUrl is correct.
+  - If using manifest, check the publicPath and remoteEntry.name  fields in the manifest
+2. If the project builder is rspack, check whether [runtimeChunk](https://rspack.dev/config/optimization#optimizationruntimechunk) is set in the final build configuration. If so, delete this configuration.
+3. Check if the resource is externally accessible.

apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-001.mdx

@@ -0,0 +1,18 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+import Table from '@components/Table'
+
+<ErrorCodeTitle code='RUNTIME-002'/>
+
+
+## Reasons
+
+Can not get remote container `init` function.
+
+The remote container should provide an object which value is `{ get, init }`. However, the `init` is `undefined` during this load.
+
+## Solutions
+
+Check in the following order:
+
+1. Before loading the producer, enter window[remoteEntryKey] in `terminal` to check whether this object is occupied. If so, you need to rename the producer [name](../../../configure/name#name)
+2. If the project builder is rspack, check whether [runtimeChunk](https://rspack.dev/config/optimization#optimizationruntimechunk) is set in the final build configuration. If so, delete this configuration.

apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-002.mdx

@@ -0,0 +1,12 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+
+<ErrorCodeTitle code='RUNTIME-003'/>
+
+## Reasons
+
+Failed to load the manifest, the manifest url may be wrong
+
+## Solutions
+
+1. Check whether manifestUrl can be accessed normally alone
+2. Check manifestUrl for cross-domain issues

apps/website-new/docs/en/guide/troubleshooting/runtime/RUNTIME-003.mdx

@@ -0,0 +1,18 @@
+import ErrorCodeTitle from '@components/ErrorCodeTitle';
+
+<ErrorCodeTitle code='RUNTIME-004'/>
+
+## Reasons
+
+The matching remote module cannot be found. This error may be caused by the following x reasons:
+1. The corresponding producer information is not registered with the consumer.
+2. requestId uses the wrong alias or name
+3. There is a `beforeRequest` hook registered and the correct data is not returned
+
+## Solutions
+
+There are corresponding solutions for the reasons:
+
+1. Check whether the producer information for this request is registered with the consumer
+2. Check whether the registered producer information (name/alias) is consistent with requestId
+3. Check whether the `beforeRequest` hook is additionally registered in the project, and modify the runtime plug-in of the parameters