feat:add online solution links for qiankun

.changeset/chilled-radios-retire.md

@@ -0,0 +1,5 @@
+---
+"@qiankunjs/shared": patch
+---
+
+feat: add online solution links for qiankun

.dumi/pages/error/CodeSnippet.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default function CodeSnippet(props) {
+  const lines = props.children.split('\n')
+  const firstTextualLine = lines.find(l => l.trim() !== l)
+  const numLeadingSpaces = firstTextualLine ? /([^\s])/.exec(firstTextualLine).index : 0
+  const formattedLines = lines.map(line => line.slice(numLeadingSpaces)).filter((line, i) => line.length > 0 || i > 0).join('\n')
+  return (
+    <div className="__dumi-default-code-block">
+      <pre className="prism-code language-tsx">
+      {formattedLines}
+    </pre>
+    </div>
+
+  )
+}

.dumi/pages/error/codes/1.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#1: Application died in status NOT_MOUNTED: Target container with #container not existed after {props.getErrorCodeArg(0)} mounted!</h1>
+            <p>
+                This error thrown as the container DOM does not exist after the micro app is loaded. The possible reasons are:
+            </p>
+            <h4>
+                1.The root id of the micro app conflicts with other DOM, and the solution is to modify the search range of the root id.
+            </h4>
+            <div>
+                <h4>vue micro app:</h4>
+                <CodeSnippet>
+                    {`
+                        function render(props = {}) {
+                            const { container } = props;
+                            instance = new Vue({
+                            router,
+                            store,
+                            render: (h) => h(App),
+                            }).$mount(container ? container.querySelector('#app') : '#app');
+                        }
+                        export async function mount(props) {
+                            render(props);
+                        }
+                    `}
+                </CodeSnippet>
+                <h4>react micro app:</h4>
+                <CodeSnippet>
+                    { `
+                        function render(props) {
+                            const { container } = props;
+                            ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
+                          }
+                        export async function mount(props) {
+                            render(props);
+                        }
+                        export async function unmount(props) {
+                            const { container } = props;
+                            ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
+                        }
+                    `}
+                </CodeSnippet>
+            </div>
+            <h2>Explanation:</h2>
+            <p>
+                <a href="/qiankun/faq#application-died-in-status-not_mounted-target-container-with-container-not-existed-after-xxx-mounted">FAQ</a> 
+            </p>
+        </>
+    )
+}

.dumi/pages/error/index.tsx

@@ -0,0 +1,29 @@
+/**
+ * sidebar: false
+ */
+
+import React from 'react'
+import { useLocation, useParams } from 'react-router-dom';
+import Error1 from './codes/1'
+import { useSearchParams } from 'dumi';
+const r = require.context('./codes/', false, /\.tsx$/);
+
+export default function CodeSnippet() {
+    let [searchParams, setSearchParams] = useSearchParams();
+    const code = searchParams.get('code');
+    const Comp = code && r(`./${code}.tsx`).default;
+    const errorCodeArgs = searchParams.getAll('arg');
+
+    return code ? (
+        <div>
+            <Comp errorCodeArgs={errorCodeArgs}
+                getErrorCodeArg={getErrorCodeArg}
+                errorCode={code} />
+        </div>
+    ) : (<div>请输入错误码code</div>)
+
+    function getErrorCodeArg(index, argName) {
+        const missingArg = argName ? `(${argName})` : `(unknown)`;
+        return errorCodeArgs.length > index ? errorCodeArgs[index] : missingArg;
+    }
+}

.dumirc.ts

@@ -58,4 +58,5 @@ export default defineConfig({
   theme: {
     '@c-primary': '#6451AB',
   },
+  styles: [`li a[href="/qiankun/error"],li a[href="/qiankun/error"] ~ * { display: none}]`],
 });

packages/shared/src/error/QiankunError.ts

@@ -1,5 +1,13 @@
 export class QiankunError extends Error {
-  constructor(message: string) {
-    super(`[qiankun]: ${message}`);
+  constructor(message: string, code?: number,  ...args: string[]) {
+    let errorMessage = `[qiankun #${code}]: ${message ? message + ' ' : ''}`;
+    if (process.env.NODE_ENV === 'production' && typeof(code) !== 'undefined') {
+      errorMessage += `See https://qiankun.umijs.org/error/?code=${code}${
+        args.length ? `&arg=${args.join('&arg=')}` : ''
+      }`;
+    } else {
+      console.warn('args', ...args);
+    }
+    super(errorMessage);
   }
 }