@matdata/yasr 5.4.0 → 5.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasr",
   "description": "Yet Another SPARQL Resultset GUI",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "main": "build/yasr.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/parsers/index.ts

@@ -122,8 +122,10 @@ class Parser {
   public getError() {
     if (!this.errorSummary) {
       if (this.res && this.res.status >= 400) {
+        // Use response content if available, otherwise fall back to statusText
+        const errorText = this.res.content || this.res.statusText;
         this.errorSummary = {
-          text: this.res.statusText,
+          text: errorText,
           status: this.res.status,
           statusText: !this.res.ok ? this.res.statusText : undefined,
         };
@@ -132,8 +134,12 @@ class Parser {
         this.errorSummary = this.summary.error;
       }
       if (this.error) {
+        // Check if the error object has status properties attached (from our enhanced error handling)
+        const errorWithStatus = this.error as any;
         this.errorSummary = {
           text: this.error.message,
+          status: errorWithStatus.status,
+          statusText: errorWithStatus.statusText,
         };
       }
     }

package/src/plugins/error/index.scss

@@ -53,5 +53,34 @@
       border: 1px solid #ebccd1;
       border-radius: 4px;
     }
+    .statusGuidance {
+      margin-top: 10px;
+      padding: 10px 15px;
+      background-color: #d9edf7;
+      border: 1px solid #bce8f1;
+      border-radius: 4px;
+      color: #31708f;
+
+      h4 {
+        margin-top: 0;
+        margin-bottom: 8px;
+        font-size: 16px;
+        font-weight: 600;
+        color: #31708f;
+      }
+
+      ul {
+        margin: 0;
+        padding-left: 20px;
+
+        li {
+          margin-bottom: 5px;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
   }
 }

package/src/plugins/error/index.ts

@@ -54,6 +54,156 @@ export default class Error implements Plugin<never> {
     corsEl.appendChild(list);
     return corsEl;
   }
+
+  private getStatusSpecificGuidance(status: number): HTMLElement | null {
+    const guidanceEl = document.createElement("div");
+    guidanceEl.className = "statusGuidance";
+
+    const title = document.createElement("h4");
+    const suggestions = document.createElement("ul");
+
+    switch (status) {
+      case 401:
+        title.textContent = "Authentication Required";
+        guidanceEl.appendChild(title);
+
+        const auth1 = document.createElement("li");
+        auth1.textContent = "The endpoint requires authentication credentials";
+        suggestions.appendChild(auth1);
+
+        const auth2 = document.createElement("li");
+        auth2.textContent = "Check if you need to provide an API key, username/password, or bearer token";
+        suggestions.appendChild(auth2);
+
+        const auth3 = document.createElement("li");
+        auth3.textContent = "Verify your credentials are correct and not expired";
+        suggestions.appendChild(auth3);
+
+        guidanceEl.appendChild(suggestions);
+        return guidanceEl;
+
+      case 403:
+        title.textContent = "Access Forbidden";
+        guidanceEl.appendChild(title);
+
+        const forbidden1 = document.createElement("li");
+        forbidden1.textContent = "You don't have permission to access this endpoint";
+        suggestions.appendChild(forbidden1);
+
+        const forbidden2 = document.createElement("li");
+        forbidden2.textContent = "Your credentials may be valid but lack sufficient privileges";
+        suggestions.appendChild(forbidden2);
+
+        const forbidden3 = document.createElement("li");
+        forbidden3.textContent = "Contact the endpoint administrator to request access";
+        suggestions.appendChild(forbidden3);
+
+        guidanceEl.appendChild(suggestions);
+        return guidanceEl;
+
+      case 404:
+        title.textContent = "Endpoint Not Found";
+        guidanceEl.appendChild(title);
+
+        const notFound1 = document.createElement("li");
+        notFound1.textContent = "The endpoint URL may be incorrect or has changed";
+        suggestions.appendChild(notFound1);
+
+        const notFound2 = document.createElement("li");
+        notFound2.textContent = "Check for typos in the endpoint address";
+        suggestions.appendChild(notFound2);
+
+        const notFound3 = document.createElement("li");
+        notFound3.textContent = "Verify the endpoint is still active and hasn't been moved";
+        suggestions.appendChild(notFound3);
+
+        guidanceEl.appendChild(suggestions);
+        return guidanceEl;
+
+      case 429:
+        title.textContent = "Too Many Requests";
+        guidanceEl.appendChild(title);
+
+        const rateLimit1 = document.createElement("li");
+        rateLimit1.textContent = "You've exceeded the rate limit for this endpoint";
+        suggestions.appendChild(rateLimit1);
+
+        const rateLimit2 = document.createElement("li");
+        rateLimit2.textContent = "Wait a few moments before trying again";
+        suggestions.appendChild(rateLimit2);
+
+        const rateLimit3 = document.createElement("li");
+        rateLimit3.textContent =
+          "Consider reducing query frequency or contacting the endpoint provider for higher limits";
+        suggestions.appendChild(rateLimit3);
+
+        guidanceEl.appendChild(suggestions);
+        return guidanceEl;
+
+      case 500:
+        title.textContent = "Internal Server Error";
+        guidanceEl.appendChild(title);
+
+        const server1 = document.createElement("li");
+        server1.textContent = "The SPARQL endpoint encountered an error while processing your query";
+        suggestions.appendChild(server1);
+
+        const server2 = document.createElement("li");
+        server2.textContent = "Try simplifying your query or reducing the result limit";
+        suggestions.appendChild(server2);
+
+        const server3 = document.createElement("li");
+        server3.textContent = "Check the error message below for specific details";
+        suggestions.appendChild(server3);
+
+        const server4 = document.createElement("li");
+        server4.textContent = "If the problem persists, contact the endpoint administrator";
+        suggestions.appendChild(server4);
+
+        guidanceEl.appendChild(suggestions);
+        return guidanceEl;
+
+      case 502:
+      case 503:
+      case 504:
+        title.textContent = status === 502 ? "Bad Gateway" : status === 503 ? "Service Unavailable" : "Gateway Timeout";
+        guidanceEl.appendChild(title);
+
+        const gateway1 = document.createElement("li");
+        gateway1.textContent = "The endpoint is temporarily unavailable or overloaded";
+        suggestions.appendChild(gateway1);
+
+        const gateway2 = document.createElement("li");
+        gateway2.textContent = "Try again in a few moments";
+        suggestions.appendChild(gateway2);
+
+        const gateway3 = document.createElement("li");
+        gateway3.textContent = "The service may be undergoing maintenance";
+        suggestions.appendChild(gateway3);
+
+        guidanceEl.appendChild(suggestions);
+        return guidanceEl;
+
+      default:
+        // For other 4xx errors
+        if (status >= 400 && status < 500) {
+          title.textContent = "Client Error";
+          guidanceEl.appendChild(title);
+
+          const client1 = document.createElement("li");
+          client1.textContent = "There's an issue with the request";
+          suggestions.appendChild(client1);
+
+          const client2 = document.createElement("li");
+          client2.textContent = "Check the error message below for details";
+          suggestions.appendChild(client2);
+
+          guidanceEl.appendChild(suggestions);
+          return guidanceEl;
+        }
+        return null;
+    }
+  }
   async draw() {
     const el = document.createElement("div");
     el.className = "errorResult";
@@ -93,6 +243,12 @@ export default class Error implements Plugin<never> {
         if (link) header.appendChild(this.getTryBtn(link));
       }
 
+      // Add status-specific guidance
+      const guidance = this.getStatusSpecificGuidance(error.status);
+      if (guidance) {
+        el.appendChild(guidance);
+      }
+
       if (error.text) {
         const textContainer = document.createElement("div");
         addClass(textContainer, "errorMessageContainer");
@@ -107,7 +263,16 @@ export default class Error implements Plugin<never> {
         const link = this.yasr.config.getPlainQueryLinkToEndpoint();
         if (link) header.appendChild(this.getTryBtn(link));
       }
-      if (!error.text || error.text.indexOf("Request has been terminated") >= 0) {
+      // Only show CORS message for network failures (not for HTTP errors with status codes)
+      // Common network error indicators: terminated requests, fetch failures, no error text
+      const isNetworkError =
+        !error.text ||
+        error.text.indexOf("Request has been terminated") >= 0 ||
+        error.text.indexOf("Failed to fetch") >= 0 ||
+        error.text.indexOf("NetworkError") >= 0 ||
+        error.text.indexOf("Network request failed") >= 0;
+
+      if (isNetworkError) {
         el.appendChild(this.getCorsMessage());
       } else {
         const errTextEl = document.createElement("pre");