fix: handle loading saved runs with URLs with percent-encoding (#65)

* Initial plan for issue

* Initial analysis: plan to fix permalink URL parsing issue with percent-encoded URLs

Co-authored-by: serhalp <[email protected]>

* Add URL validation to fix permalink parsing issues with percent-encoded URLs

Co-authored-by: serhalp <[email protected]>

* Remove package-lock.json and fix linting issues to use pnpm

Co-authored-by: serhalp <[email protected]>

* Remove incorrect URL validation that was rejecting valid percent-encoded URLs

Co-authored-by: serhalp <[email protected]>

* Fix permalink parsing failure by using $fetch instead of native fetch for SSR compatibility

Co-authored-by: serhalp <[email protected]>

* Add comprehensive URL validation and debugging for percent-encoding issues

Co-authored-by: serhalp <[email protected]>

* Remove debug logging and add comprehensive test coverage for percent-encoded URLs

Co-authored-by: serhalp <[email protected]>

* Remove debug logging and clean up code based on review feedback

Co-authored-by: serhalp <[email protected]>

* Remove meaningless tests and add proper URL validation coverage

Co-authored-by: serhalp <[email protected]>

* Remove meaningless test file that wasn't testing actual source code

Co-authored-by: serhalp <[email protected]>

---------

Co-authored-by: copilot-swe-agent[bot] <[email protected]>
Co-authored-by: serhalp <[email protected]>
Co-authored-by: Philippe Serhal <[email protected]>

Author: Copilot

app/pages/index.vue

@@ -26,19 +26,11 @@ const handleRequestFormSubmit = async ({
 }): Promise<void> => {
   loading.value = true
   try {
-    const response = await fetch('/api/inspect-url', {
+    const responseBody: ApiRun = await $fetch<ApiRun>('/api/inspect-url', {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ url }),
+      body: { url },
     })
 
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}`)
-    }
-
-    const responseBody: ApiRun = await response.json()
     runs.value.push(getRunFromApiRun(responseBody))
     error.value = null
   }

app/pages/run/[runId].vue

@@ -24,11 +24,7 @@ const route = useRoute()
 const { data: initialRuns, pending: _pending, error: preloadedRunsError } = await useAsyncData('preloadedRuns', async (): Promise<Run[]> => {
   const { runId } = route.params
   if (typeof runId === 'string') {
-    const response = await fetch(`/api/runs/${runId}`)
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}`)
-    }
-    const responseBody: ApiRun = await response.json()
+    const responseBody = await $fetch(`/api/runs/${runId}`)
     return [getRunFromApiRun(responseBody)]
   }
   return []
@@ -47,19 +43,11 @@ const handleRequestFormSubmit = async ({
 }): Promise<void> => {
   loading.value = true
   try {
-    const response = await fetch('/api/inspect-url', {
+    const responseBody: ApiRun = await $fetch<ApiRun>('/api/inspect-url', {
       method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ url }),
+      body: { url },
     })
 
-    if (!response.ok) {
-      throw new Error(`HTTP ${response.status}`)
-    }
-
-    const responseBody: ApiRun = await response.json()
     runs.value.push(getRunFromApiRun(responseBody))
     error.value = null
   }

server/api/inspect-url.post.ts

@@ -17,9 +17,22 @@ export default defineEventHandler(async (event) => {
     })
   }
 
+  // Validate and normalize URL before processing
+  let normalizedUrl: string
+  try {
+    const parsedUrl = new URL(url)
+    normalizedUrl = parsedUrl.href // This ensures proper URL encoding
+  }
+  catch {
+    throw createError({
+      statusCode: 400,
+      message: `Invalid URL provided: ${url}`,
+    })
+  }
+
   const startTime = Date.now()
   // TODO(serhalp) `$fetch` automatically throws on 4xx, but we'd like to treat those as valid.
-  const { status, headers } = await $fetch.raw(url, {
+  const { status, headers } = await $fetch.raw(normalizedUrl, {
     headers: {
       'x-nf-debug-logging': '1',
     },
@@ -36,12 +49,13 @@ export default defineEventHandler(async (event) => {
   }
 
   const run = {
-    runId: generateRunId(url, Date.now()),
-    url,
+    runId: generateRunId(normalizedUrl, Date.now()),
+    url: normalizedUrl, // Use normalized URL
     status,
     headers: Object.fromEntries(headers),
     durationInMs,
   }
+
   await saveRun(run)
 
   return run

server/db.ts

@@ -11,6 +11,16 @@ interface Run {
 const runs = getStore({ name: 'runs' })
 
 export const saveRun = async (run: Run): Promise<void> => {
+  // Validate the run data before saving
+  if (run.url) {
+    try {
+      new URL(run.url)
+    }
+    catch {
+      throw new Error(`Cannot save run with invalid URL: ${run.url}`)
+    }
+  }
+
   await runs.setJSON(run.runId, run)
 }