feat: show 403 error when not enable $:/config/Server/AllowAllExterna…

…lFilters

src/i18n/en-UK/translation.json

@@ -43,5 +43,10 @@
   "SelectTagsForAssets": "Select Tags For Assets...",
   "SelectDefaultTagsForAssets": "Select Default Tags For Assets...",
   "DefaultTagsForAssets": "Default Tags For Assets",
-  "DefaultTagsForAssetsDescription": "Assets such as images can also be clipped and referenced in Markdown or WikiText. The tags for these resources can be set here to differentiate them from the main content of the page."
+  "DefaultTagsForAssetsDescription": "Assets such as images can also be clipped and referenced in Markdown or WikiText. The tags for these resources can be set here to differentiate them from the main content of the page.",
+  "Error": {
+    "WebServer403": "错误403：你需要允许太微服务器执行任意筛选器",
+    "WebServerCORS": "错误CORS：你的浏览器擅自把请求改为了HTTPS，导致请求失败",
+    "WebServerUnknown": "错误：未知的请求错误"
+  }
 }

src/i18n/zh-Hans/translation.json

@@ -43,5 +43,10 @@
   "SelectDefaultTagsForAssets": "选择默认为资源带上的标签…",
   "DefaultTagsForAssets": "资源默认标签",
   "DefaultTagsForAssetsDescription": "图片等资源也可以被剪藏下来，并在 Markdown 或 WikiText 中被引用。这些资源带有的标签在这里设置，可以和网页主要内容带不一样的标签，作出区分。",
-  "SelectTagsForAssets": "选择资源的标签…"
+  "SelectTagsForAssets": "选择资源的标签…",
+  "Error": {
+    "WebServer403": "Error403: You need to enable server AllowAllExternalFilters",
+    "WebServerCORS": "ErrorCORS: Your browsr turn request to HTTPS cuase it failed",
+    "WebServerUnknown": "Error: Unknown request error"
+  }
 }

src/shared/hooks/useAvailableTags.ts

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import { t } from 'i18next';
 import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
 import type { ITiddlerFields } from 'tw5-typed';
 import { addProtocolToUrl } from '../../utils';
 import { useServerStore } from '../server';
@@ -11,13 +13,29 @@ export function useAvailableTags() {
   useEffect(() => {
     if (availableTagOptions.length > 0) return;
     const getTagsTask = activeServers.map(item => item.uri).map(async serverUriBase => {
+      const url = new URL('/recipes/default/tiddlers.json?filter=[tags[]]', addProtocolToUrl(serverUriBase));
       try {
-        const url = new URL('/recipes/default/tiddlers.json?filter=[tags[]]', addProtocolToUrl(serverUriBase));
         // FIXME: will auto become https and cause CORS error
-        const tagsJSON = await fetch(url).then(async response => await (await response.json() as Promise<ITiddlerFields[]>));
+        const response = await fetch(url);
+        if (response.status === 403) {
+          toast(t('Error.WebServer403'));
+          return [];
+        }
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
+        const tagsJSON = await (await response.json() as Promise<ITiddlerFields[]>);
         return tagsJSON;
       } catch (error) {
-        console.error(error);
+        console.error('useAvailableTags', error, (error as Error)?.message);
+        if ((error as Error)?.message?.includes?.('CORS')) {
+          toast(t('Error.WebServerCORS'));
+        } else {
+          toast(t('Error.WebServerUnknown'));
+          try {
+            console.error('useAvailableTags, errored content is', await fetch(url).then(async response => await response.text()));
+          } catch {}
+        }
         return [] as ITiddlerFields[];
       }
     });