You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
1.9 KiB
67 lines
1.9 KiB
<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>
|
|
|