@andersundsehr/storybook-typo3 0.1.11 → 0.1.12

package/dist/functions/fetchComponent.js

@@ -6,7 +6,7 @@ export async function fetchComponent(component) {
         alert(message);
         throw new Error(message);
     }
-    const data = await fetchWithUserRetry(url + '/_storybook/componentMeta?viewHelper=' + component, {}, 'metadata for component `' + component + '` from TYPO3');
+    const data = await fetchWithUserRetry(url + '/_storybook/componentMeta?viewHelper=' + component, {}, 'metadata for component `' + component + '`');
     return {
         fullName: component,
         name: component.split(':')[1],

package/dist/functions/fetchPreviewConfig.js

@@ -32,7 +32,7 @@ export async function fetchPreviewConfig(currentGlobals) {
             'Content-Type': 'application/json',
         },
         body: JSON.stringify({ globals }),
-    }, 'preview config from TYPO3');
+    }, 'preview config');
 }
 export function initGlobalsHandling(initalGlobalTypes) {
     const channel = addons.getChannel();

package/dist/functions/fetchRenderAction.js

@@ -15,6 +15,6 @@ export async function fetchRenderAction(urlA, id, params, storyContext) {
     return await fetchWithUserRetry(url + '/_storybook/render', {
         method: 'POST',
         body: JSON.stringify(body),
-    }, 'rendering component in TYPO3', 'text');
+    }, 'rendering component', 'text');
 }
 ;

package/dist/functions/fetchWithUserRetry.d.ts

@@ -1 +1,3 @@
-export declare function fetchWithUserRetry<T>(url: string, options: RequestInit, message: string, result?: 'json' | 'text'): Promise<T>;
+type PossibleResults = string | object;
+export declare function fetchWithUserRetry<T extends PossibleResults>(url: string, options: RequestInit, message: string, resultType?: 'json' | 'text'): Promise<T>;
+export {};

package/dist/functions/fetchWithUserRetry.js

@@ -1,11 +1,11 @@
 /*
 We want to make it obvious for the user what he has to do.
 
-We have 2 different usecases:
+We have 2 different use cases:
 - background fetches (componentMeta & preview)
 - html Fetches
 
-most of the time the user has to do something in there IDE to fix the problem.
+most of the time the user has to do something in their IDE to fix the problem.
 So we want to show a message that tells the user what he has to do.
 
 In the case of a background fetch, we want to show the full error in the console.
@@ -13,40 +13,112 @@ And give the user a alert with the error message and a retry button.
 
 In the case of a html fetch, we want to show the error as html response?
 - yes: because the user can see the error in the browser and can fix it
-- no: because storybook dose not understand that it is an error
+- no: because storybook does not understand that it is an error
 
 In any case we should get the error in json so we can handle it in the frontend as we like.
-Some times it can still be text/html so we need to handle that as well.
+Sometimes it can still be text/html so we need to handle that as well.
  */
-export async function fetchWithUserRetry(url, options, message, result = 'json') {
-    options = { ...options }; // Clone options to avoid mutating the original
-    options.signal = options.signal || AbortSignal.timeout(5000);
+export async function fetchWithUserRetry(url, options, message, resultType = 'json') {
     try {
+        options = { ...options }; // Clone options to avoid mutating the original
+        options.signal = options.signal || AbortSignal.timeout(5000);
         const response = await fetch(url, options);
         if (!response.ok) {
-            // let responseBody = await response.text();
-            // if (responseBody) {
-            //   responseBody += '\n';
-            // }
-            // throw new Error(`${responseBody}HTTP ${response.status}\nURL: ${url}\nError while fetching ${message}`);
+            return retry(response, url, options, message, resultType);
         }
-        if (result === 'text') {
-            return await response.text();
-        }
-        return await response.json();
+        return (await response[resultType]());
     }
     catch (error) {
-        console.error('Fetch failed:', { error });
-        const retry = confirm(''
-            + 'ERROR: ' + String(error) + '\n\n\n'
-            + 'Error while fetching ' + message + '. \n\n'
-            + 'fetch: ' + url + '\n\n'
-            + 'look at the console for more details.\n\n'
-            + 'Do you want to retry?');
-        if (retry) {
-            options.signal = undefined; // Reset the signal to avoid reusing the same AbortSignal
-            return fetchWithUserRetry(url, options, message);
+        return retry(error, url, options, message, resultType);
+    }
+}
+async function retry(errorOrResponse, url, options, message, resultType) {
+    const errorType = await getErrorExplanation(errorOrResponse);
+    let exception = errorOrResponse instanceof Error ? errorOrResponse : undefined;
+    let confirmationMessage = '';
+    if (errorType.errorType === 'network') {
+        confirmationMessage = `🛜+🚫 A network error occurred while fetching ${message} from TYPO3:\n\n`
+            + `💬 ${errorType.message}\n\n`
+            + `⏩ Please check your network connection and try again.\n\n`
+            + `🔗 url: ${url}\n\n`;
+        exception = new Error(`Network error: ${errorType.message}`);
+    }
+    else if (errorType.errorType === 'extension') {
+        if (resultType === 'text') {
+            // no retry via confirm()
+            return errorType.errorHtml;
         }
-        throw error; // Re-throw the error if the user does not want to retry
+        confirmationMessage = `💥 An error occurred while fetching ${message} from TYPO3:\n\n`
+            + `💬 ${errorType.reason}\n\n`
+            + `${errorType.stackTrace ? `🕵🏻‍♂️ Stack trace: ${errorType.stackTrace}\n\n` : ''}`
+            + `🔗 url: ${url}\n\n`;
+        exception = new Error(`Extension error: ${errorType.reason}`);
+    }
+    else {
+        if (resultType === 'text' && errorType.message) {
+            // no retry via confirm()
+            return errorType.message;
+        }
+        // unknown error
+        confirmationMessage = `😳 An error occurred while fetching ${message} from TYPO3:\n\n`
+            + `💬 ${errorType.message}\n\n`
+            + `#️⃣ Status code: ${errorType.statusCode || 'unknown'}\n\n`
+            + `🔗 url: ${url}\n\n`;
+    }
+    confirmationMessage = confirmationMessage.trim();
+    confirmationMessage = confirmationMessage.length > 700 ? confirmationMessage.substring(0, 700 - 3) + '\n…' : confirmationMessage;
+    const retry = confirm(confirmationMessage + '\n\n Do you want to retry 🔄❓');
+    if (retry) {
+        options.signal = undefined;
+        return fetchWithUserRetry(url, options, message, resultType);
+    }
+    throw exception || new Error(`Failed to fetch ${message} from TYPO3: ${JSON.stringify(errorType)}`);
+}
+async function getErrorExplanation(errorOrResponse) {
+    if (errorOrResponse instanceof Response) {
+        let text = undefined;
+        try {
+            text = await errorOrResponse.text();
+        }
+        catch (e) {
+            return {
+                errorType: 'unknown',
+                message: `Failed to read response from TYPO3: ${errorOrResponse.status}\n ${errorOrResponse.statusText}`,
+            };
+        }
+        try {
+            const extensionError = JSON.parse(text);
+            if (extensionError && typeof extensionError === 'object' && 'errorType' in extensionError && extensionError.errorType === 'extension') {
+                return extensionError;
+            }
+            return {
+                errorType: 'unknown',
+                statusCode: errorOrResponse.status,
+                message: `Received an unexpected response from TYPO3: ${errorOrResponse.status}\n ${JSON.stringify(extensionError)}`,
+            };
+        }
+        catch (e) {
+            console.warn('⁉️ Failed to parse JSON from TYPO3 response:', e);
+        }
+        return {
+            errorType: 'unknown',
+            message: `Received an unexpected response from TYPO3: ${errorOrResponse.status}\n ${text}`,
+        };
+    }
+    if (errorOrResponse instanceof Error) {
+        return {
+            errorType: 'network',
+            message: errorOrResponse.message,
+        };
+    }
+    if (typeof errorOrResponse === 'string') {
+        return {
+            errorType: 'unknown',
+            message: errorOrResponse,
+        };
     }
+    return {
+        errorType: 'unknown',
+        message: `An unknown error occurred: ${JSON.stringify(errorOrResponse) || ''}`,
+    };
 }

package/package.json

@@ -49,5 +49,5 @@
     "dist",
     "README.md"
   ],
-  "version": "0.1.11"
+  "version": "0.1.12"
 }