chore: better error management

pkg/jsonpath/parser.go

@@ -55,7 +55,7 @@ func (p *JSONPath) parse() error {
 }
 
 func (p *JSONPath) parseFailure(target *token.TokenInfo, msg string) error {
-	return errors.New(p.tokenizer.ErrorTokenString(target, msg))
+	return errors.New(p.tokenizer.ErrorString(target, msg))
 }
 
 // peek returns true if the upcoming token matches the given token type.

pkg/jsonpath/token/token.go

@@ -315,7 +315,10 @@ func (t Tokenizer) ErrorString(target *TokenInfo, msg string) string {
 
 	// Write the caret symbol pointing to the target token
 	errorBuilder.WriteString(spaces)
-	dots := strings.Repeat(".", target.Len-1)
+	dots := ""
+	if target.Len > 0 {
+		dots = strings.Repeat(".", target.Len-1)
+	}
 	errorBuilder.WriteString("^" + dots + "\n")
 
 	return errorBuilder.String()

web/src/Playground.tsx

@@ -70,6 +70,9 @@ function Playground() {
   const [shareUrl, setShareUrl] = useState("");
   const [shareUrlLoading, setShareUrlLoading] = useState(false);
   const isSmallScreen = useMediaQuery("(max-width: 768px)");
+  const clearError = useCallback(() => {
+    setError("");
+  }, []);
   const defaultLayout = useMemo(
     () => (isSmallScreen ? [20, 60, 20] : [30, 40, 30]),
     [],
@@ -313,7 +316,7 @@ function Playground() {
                     onClick={getShareUrl}
                     disabled={shareUrlLoading}
                   >
-                    Share
+                    Short URL
                   </Button>
                   <div className="flex items-center gap-x-2 grow">
                     {shareUrl ? <CopyButton value={shareUrl} /> : null}
@@ -324,7 +327,21 @@ function Playground() {
           </div>
         </div>
       </div>
-      {error && <Alert variant={"error"}>{error}</Alert>}
+      {error && (
+        <Alert onDismiss={clearError} variant={"error"}>
+          {error.split("\n").length > 1 ? (
+            <>
+              {error.split("\n")[0]}
+              <br />
+              <div className="text-left whitespace-pre">
+                <pre>{error.split("\n").slice(1).join("\n")}</pre>
+              </div>
+            </>
+          ) : (
+            error
+          )}
+        </Alert>
+      )}
       <div
         style={{
           display: "flex",

web/src/index.css

@@ -36,33 +36,6 @@ h1 {
 }
 
 button {
-  border-radius: 8px;
   border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
   transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}