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/codes/2.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#2: You should not set multiply entry script in one entry html, but {props.getErrorCodeArg(0)} has at least 2 entry scripts</h1>
+        </>
+    )
+}

.dumi/pages/error/codes/3.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#3: entry {props.getErrorCodeArg(0)} load failed as entry script {props.getErrorCodeArg(1)} load failed</h1>
+        </>
+    )
+}

.dumi/pages/error/codes/4.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#4: entry {props.getErrorCodeArg(0)} response body is empty!</h1>
+        </>
+    )
+}

.dumi/pages/error/codes/5.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#5: {props.getErrorCodeArg(0)} entry {props.getErrorCodeArg(1)} load failed as it not export lifecycles</h1>
+        </>
+    )
+}

.dumi/pages/error/codes/6.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#6: You need to export lifecycle functions in {props.getErrorCodeArg(0)} entry</h1>
+        </>
+    )
+}

.dumi/pages/error/codes/7.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#7: {props.getErrorCodeArg(0)} head element not existed while accessing document.head!</h1>
+        </>
+    )
+}

.dumi/pages/error/codes/8.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import CodeSnippet from '../CodeSnippet'
+
+export default function ErrorCode1(props) {
+    return (
+        <>
+            <h1>#8: {props.getErrorCodeArg(0)} container {props.getErrorCodeArg(1)} element not ready while rebuilding!</h1>
+        </>
+    )
+}

.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>Please enter the error 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/loader/src/index.ts

@@ -121,7 +121,9 @@ export async function loadEntry<T>(entry: Entry, container: HTMLElement, opts: L
           if (isEntryScript(script)) {
             if (foundEntryScript) {
               throw new QiankunError(
+                2,
                 `You should not set multiply entry script in one entry html, but ${entry} has at least 2 entry scripts`,
+                entry,
               );
             }
 
@@ -139,7 +141,12 @@ export async function loadEntry<T>(entry: Entry, container: HTMLElement, opts: L
                   onEntryLoaded();
                 } else {
                   entryScriptLoadedDeferred.reject(
-                    new QiankunError(`entry ${entry} load failed as entry script ${script.src} load failed}`),
+                    new QiankunError(
+                      3,
+                      `entry ${entry} load failed as entry script ${script.src} load failed`,
+                      entry,
+                      script.src,
+                    ),
                   );
                 }
               }
@@ -171,5 +178,5 @@ export async function loadEntry<T>(entry: Entry, container: HTMLElement, opts: L
     return entryScriptLoadedDeferred.promise;
   }
 
-  throw new QiankunError(`entry ${entry} response body is empty!`);
+  throw new QiankunError(4, `entry ${entry} response body is empty!`, entry);
 }

packages/qiankun/src/core/loadApp.ts

@@ -10,7 +10,7 @@ import { moduleResolver as defaultModuleResolver, transpileAssets, wrapFetchWith
 import { concat, isFunction, mergeWith } from 'lodash';
 import type { ParcelConfigObject } from 'single-spa';
 import getAddOns from '../addons';
-import { QiankunError } from '../error';
+import { QiankunError } from '@qiankunjs/shared';
 import type { AppConfiguration, LifeCycleFn, LifeCycles, LoadableApp, MicroAppLifeCycles, ObjectType } from '../types';
 import {
   getPureHTMLStringWithoutScripts,
@@ -94,7 +94,8 @@ export default async function loadApp<T extends ObjectType>(
   await execHooksChain(toArray(beforeLoad), app, global);
 
   const lifecycles = await lifecyclesPromise;
-  if (!lifecycles) throw new QiankunError(`${appName} entry ${entry} load failed as it not export lifecycles`);
+  if (!lifecycles)
+    throw new QiankunError(5, `${appName} entry ${entry} load failed as it not export lifecycles`, appName, entry);
   const { bootstrap, mount, unmount, update } = getLifecyclesFromExports(
     lifecycles,
     appName,
@@ -235,7 +236,7 @@ function getLifecyclesFromExports(
     return globalVariableExports;
   }
 
-  throw new QiankunError(`You need to export lifecycle functions in ${appName} entry`);
+  throw new QiankunError(6, `You need to export lifecycle functions in ${appName} entry`, appName);
 }
 
 function calcPublicPath(entry: string): string {

packages/qiankun/src/error.ts

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

packages/sandbox/src/patchers/dynamicAppend/forStandardSandbox.ts

@@ -78,7 +78,11 @@ function patchDocument(sandbox: Sandbox, getContainer: () => HTMLElement): Calla
     const container = getContainer();
     const containerHeadElement = getContainerHeadElement(container);
     if (!containerHeadElement) {
-      throw new QiankunError(`${sandbox.name} head element not existed while accessing document.head!`);
+      throw new QiankunError(
+        7,
+        `${sandbox.name} head element not existed while accessing document.head!`,
+        sandbox.name,
+      );
     }
     return containerHeadElement;
   };
@@ -374,7 +378,10 @@ export function patchStandardSandbox(
                     const containerHeadElement = getContainerHeadElement(container);
                     if (!containerHeadElement) {
                       throw new QiankunError(
+                        8,
                         `${appName} container ${qiankunHeadTagName} element not ready while rebuilding!`,
+                        appName,
+                        qiankunHeadTagName,
                       );
                     }
                     return containerHeadElement;

packages/shared/src/error/QiankunError.ts

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

packages/shared/src/reporter/QiankunError.ts

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