Fix: error handling on 404

pages/components/Minecraft/GetName.js

@@ -7,18 +7,31 @@ function App (props) {
 
   useEffect(() => {
     const fetchData = async () => {
-      const result = await axios(
+      let result = null;
-        'https://api.ashcon.app/mojang/v2/user/' + uuid.uuid,
+      try {
-      );
+        result = await axios('https://api.ashcon.app/mojang/v2/user/' + uuid.uuid);
-      setData(result.data);
+        setData(result.data);
+      } catch (err) {
+        result = 404;
+        setData(result);
+      }
     };  
     fetchData();
   }, []);
   if (data === undefined){
         console.log("[Minecraft: UUID to player's name] データの取得に失敗しました。 / Failed to retrieve data.")
-        return <></>
+        return <>取得中...</>
   }else {
-        return <>{data.username}</>
+        if (data === 404) {
+          return <p>そのようなプレイヤーは存在しません。</p>
+        } else {
+        return (
+          <div className='has-tooltip'>
+            <span className='tooltip rounded shadow-lg p-1 bg-gray-100 text-red-500 -mt-8 font-mono text-sm'>UUID: {uuid.uuid}</span>
+            <p className="text-2xl">{data.username}</p>
+          </div>
+        )
+        }
     };
 }
 

pages/components/Minecraft/LastPlayed.js

@@ -52,6 +52,9 @@ function App (props) {
         if (data.toString() == "[object Object]") {
             return <p>取得中です...</p>
         } else {
+            if (data.toString() == "not_found") {
+                return <></>
+            } else {
             let dateTime = new Date(parseInt(data.toString()) * 1000);
             return (
                 <div className='has-tooltip'>
@@ -60,6 +63,7 @@ function App (props) {
                 </div>
             )
         }
+        }
     };
 }
 

pages/components/Minecraft/Players.js

@@ -12,11 +12,9 @@ function App (props) {
         </div>
         <div className="w-5"></div>
         <div>
-            <p className="text-2xl text-mono"><GetName uuid={uuid.uuid} /></p>
+          <p className="text-2xl text-mono"><GetName uuid={uuid.uuid} /></p>
-            <p className="text-xs">UUID: <span className="font-mono">{uuid.uuid}</span></p>
+          <p><Online uuid={uuid.uuid} /></p>
-            <p><Online uuid={uuid.uuid} /></p>
         </div>
-        
     </div>
   )
 }