crowd-funder-for-time-pwa/src/views/DeepLinkErrorView.vue

<template>
  <div class="deep-link-error">
    <div class="safe-area-spacer"></div>
    <h1>Invalid Deep Link</h1>
    <div class="error-details">
      <div class="error-message">
        <h3>Error Details</h3>
        <p>{{ errorMessage }}</p>
        <div v-if="errorCode" class="error-code">
          Error Code: <span>{{ errorCode }}</span>
        </div>
      </div>
      <div v-if="originalPath" class="original-link">
        <h3>Attempted Link</h3>
        <code>timesafari://{{ formattedPath }}</code>
        <div class="debug-info">
          <h4>Parameters:</h4>
          <pre>{{ JSON.stringify(route.params, null, 2) }}</pre>
          <h4>Query:</h4>
          <pre>{{ JSON.stringify(route.query, null, 2) }}</pre>
        </div>
      </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">
          <code>timesafari://{{ route }}/:id</code>
        </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;

// Format the path and include any parameters
const formattedPath = computed(() => {
  if (!originalPath.value) return '';
  let path = originalPath.value.replace(/^\/+/, '');
  
  // Log for debugging
  console.log('Original Path:', originalPath.value);
  console.log('Route Params:', route.params);
  console.log('Route Query:', route.query);
  
  return path;
});

// 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}, params: ${JSON.stringify(route.params)}`,
    true,
  );
});
</script>

<style scoped>
.deep-link-error {
  padding-top: 60px;
  padding-left: 20px;
  padding-right: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.safe-area-spacer {
  height: env(safe-area-inset-top);
}

h1 {
  color: #ff4444;
  margin-bottom: 24px;
}

h2, h3 {
  color: #333;
  margin-bottom: 12px;
}

.error-details {
  background-color: #f8f8f8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.error-message {
  margin-bottom: 20px;
}

.error-message p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 12px;
}

.error-code {
  font-family: monospace;
  color: #666;
  margin-top: 8px;
}

.error-code span {
  background-color: #eee;
  padding: 2px 6px;
  border-radius: 4px;
}

.original-link {
  padding: 12px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.original-link code {
  color: #0066cc;
  font-family: monospace;
  word-break: break-all;
}

.actions {
  margin: 24px 0;
  display: flex;
  gap: 12px;
}

.actions button {
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  font-weight: 500;
  cursor: pointer;
}

.primary-button {
  background-color: #007aff;
  color: white;
}

.secondary-button {
  background-color: #f2f2f2;
  color: #333;
}

.supported-links {
  margin-top: 32px;
}

.supported-links ul {
  list-style: none;
  padding: 0;
}

.supported-links li {
  padding: 8px 12px;
  background-color: #f8f8f8;
  border-radius: 4px;
  margin-bottom: 8px;
}

.supported-links code {
  font-family: monospace;
  color: #0066cc;
}

.debug-info {
  margin-top: 16px;
  padding: 12px;
  background-color: #f0f0f0;
  border-radius: 4px;
}

.debug-info h4 {
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.debug-info pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: monospace;
  font-size: 12px;
  color: #333;
  background-color: #fff;
  padding: 8px;
  border-radius: 4px;
  margin: 4px 0;
}
</style>