handle local domains

components/ServerInfo.tsx

@@ -4,8 +4,8 @@ import { codes } from '@/utils/codes';
 export default function ServerInfo({ data }: { data: ServerData }) {
 
   const countryName = data.country
-  ? codes[data.country.toLowerCase()] || "N/A"
+    ? codes[data.country.toLowerCase()] || "N/A"
-  : "N/A";
+    : "N/A";
 
   if (data.isBrowserResource) {
     return (
@@ -32,13 +32,26 @@ export default function ServerInfo({ data }: { data: ServerData }) {
             Internal Network
           </h2>
         </div>
-        <div className="flex items-center space-x-3">
+
-          <ServerIcon className="w-6 h-6 text-yellow-400 flex-shrink-0" />
+        {data.ip && (
-          <div>
+          <div className="flex items-center space-x-3">
-            <p className="text-sm text-gray-400">IP Address</p>
+            <ServerIcon className="w-6 h-6 text-yellow-400 flex-shrink-0" />
-            <p className="font-medium">{data.ip}</p>
+            <div>
+              <p className="text-sm text-gray-400">IP Address</p>
+              <p className="font-medium">{data.ip}</p>
+            </div>
           </div>
-        </div>
+        )}
+
+        {data.hostname && (
+          <div className="flex items-center space-x-3">
+            <LinkIcon className="w-6 h-6 text-green-400 flex-shrink-0" />
+            <div>
+              <p className="text-sm text-gray-400">Hostname</p>
+              <p className="font-medium break-all">{data.hostname}</p>
+            </div>
+          </div>
+        )}
       </div>
     );
   }

hooks/useTabData.ts

@@ -1,7 +1,11 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react'
-import browser from 'webextension-polyfill';
+import { isPrivateIP } from '@/utils'
-import { isPrivateIP } from '@/utils';
+import {
-import { FetchServerInfoRequest, FetchServerInfoResponse, ServerData } from '@/utils/model';
+  FetchServerInfoRequest,
+  FetchServerInfoResponse,
+  ServerData,
+} from '@/utils/model'
+import browser from 'webextension-polyfill'
 
 export function useTabData() {
   const [data, setData] = useState<ServerData | null>(null)
@@ -39,7 +43,7 @@ export function useTabData() {
           return setData({
             origin: '',
             ip: hostname,
-            hostname: url.href,
+            hostname: '',
             country: '',
             city: '',
             org: '',
@@ -48,7 +52,10 @@ export function useTabData() {
           })
         }
 
-        const response = await browser.runtime.sendMessage<FetchServerInfoRequest, FetchServerInfoResponse>({
+        const response = await browser.runtime.sendMessage<
+          FetchServerInfoRequest,
+          FetchServerInfoResponse
+        >({
           type: 'FETCH_SERVER_INFO',
           hostname: hostname,
         })
@@ -58,7 +65,16 @@ export function useTabData() {
         }
 
         if (response.error) {
-          throw new Error(response.error)
+          return setData({
+            origin: '',
+            ip: '',
+            hostname: hostname,
+            country: '',
+            city: '',
+            org: '',
+            isLocal: true,
+            isBrowserResource: false,
+          })
         }
 
         if (!response.data?.ip) {
@@ -68,7 +84,7 @@ export function useTabData() {
         setData(response.data)
         setError(null)
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to fetch data')
+        setError(err instanceof Error ? err.message : 'No data found')
         setData(null)
       } finally {
         setLoading(false)