Browse Source
- Add comprehensive route validation with zod schema - Create type-safe DeepLinkRoute enum for all valid routes - Add structured error handling for invalid routes - Redirect to error page with detailed feedback - Add better timeout handling in deeplink tests The changes improve robustness by: 1. Validating route paths before navigation 2. Providing detailed error messages for invalid links 3. Redirecting users to dedicated error pages 4. Adding parameter validation with specific feedback 5. Improving type safety across deeplink handlingapp_id_fix
7 changed files with 173 additions and 21 deletions
@ -0,0 +1,67 @@ |
|||
<template> |
|||
<div class="deep-link-error"> |
|||
<h1>Invalid Deep Link</h1> |
|||
<div class="error-details"> |
|||
<p>{{ errorMessage }}</p> |
|||
<div v-if="originalPath" class="original-link"> |
|||
<strong>Link attempted:</strong> timesafari://{{ originalPath }} |
|||
</div> |
|||
</div> |
|||
<div class="actions"> |
|||
<button class="primary-button" @click="goHome">Go to Home</button> |
|||
<button class="secondary-button" @click="reportIssue"> |
|||
Report Issue |
|||
</button> |
|||
</div> |
|||
<div class="supported-links"> |
|||
<h2>Supported Deep Links</h2> |
|||
<ul> |
|||
<li v-for="route in validRoutes" :key="route"> |
|||
timesafari://{{ route }}/:id |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { computed, onMounted } from "vue"; |
|||
import { useRoute, useRouter } from "vue-router"; |
|||
import { VALID_DEEP_LINK_ROUTES } from "../types/deepLinks"; |
|||
import { logConsoleAndDb } from "../db"; |
|||
|
|||
const route = useRoute(); |
|||
const router = useRouter(); |
|||
|
|||
// Extract error information from query params |
|||
const errorCode = computed( |
|||
() => (route.query.errorCode as string) || "UNKNOWN_ERROR", |
|||
); |
|||
const errorMessage = computed( |
|||
() => |
|||
(route.query.message as string) || |
|||
"The deep link you followed is invalid or not supported.", |
|||
); |
|||
const originalPath = computed(() => route.query.originalPath as string); |
|||
const validRoutes = VALID_DEEP_LINK_ROUTES; |
|||
|
|||
// Navigation methods |
|||
const goHome = () => router.replace({ name: "home" }); |
|||
const reportIssue = () => { |
|||
// Open a support form or email |
|||
window.open( |
|||
"mailto:support@timesafari.app?subject=Invalid Deep Link&body=" + |
|||
encodeURIComponent( |
|||
`I encountered an error with a deep link: timesafari://${originalPath.value}\nError: ${errorMessage.value}`, |
|||
), |
|||
); |
|||
}; |
|||
|
|||
// Log the error for analytics |
|||
onMounted(() => { |
|||
logConsoleAndDb( |
|||
`[DeepLink] Error page displayed for path: ${originalPath.value}, code: ${errorCode.value}`, |
|||
true, |
|||
); |
|||
}); |
|||
</script> |
Loading…
Reference in new issue