feat(ios-testing): Enhance deeplink testing and error handling

- Improve test data generation and validation
  - Add detailed logging of generated test data
  - Implement robust validation of required fields
  - Use ts-node script for test data generation
  - Add fallback data generation with validation

- Enhance deeplink testing UX
  - Add interactive prompts between tests
  - Display detailed test progress and next steps
  - Improve error handling and test skip logic
  - Add comprehensive logging throughout test execution

- Improve DeepLinkErrorView
  - Add detailed error information display
  - Show debug information for parameters and queries
  - Enhance UI with better styling and layout
  - Add safe area spacing for iOS

- Refactor deeplink handling
  - Standardize route definitions
  - Improve parameter validation
  - Add better error logging
This commit is contained in:
Matthew Raymer
2025-03-20 04:34:47 -07:00
parent 26b98d8b0a
commit 4b7a618ab6
4 changed files with 1426 additions and 352 deletions

View File

@@ -33,6 +33,7 @@ import {
deepLinkSchemas,
baseUrlSchema,
routeSchema,
DeepLinkRoute,
} from "../types/deepLinks";
import { logConsoleAndDb } from "../db";
import type { DeepLinkError } from "../interfaces/deepLinks";
@@ -120,12 +121,12 @@ export class DeepLinkHandler {
"invite-one-accept": "invite-one-accept",
"contact-import": "contact-import",
"confirm-gift": "confirm-gift",
claim: "claim",
"claim": "claim",
"claim-cert": "claim-cert",
"claim-add-raw": "claim-add-raw",
"contact-edit": "contact-edit",
contacts: "contacts",
did: "did",
"contacts": "contacts",
"did": "did",
};
// First try to validate the route path

View File

@@ -1,10 +1,24 @@
<template>
<div class="deep-link-error">
<div class="safe-area-spacer"></div>
<h1>Invalid Deep Link</h1>
<div class="error-details">
<p>{{ errorMessage }}</p>
<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">
<strong>Link attempted:</strong> timesafari://{{ originalPath }}
<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">
@@ -17,7 +31,7 @@
<h2>Supported Deep Links</h2>
<ul>
<li v-for="route in validRoutes" :key="route">
timesafari://{{ route }}/:id
<code>timesafari://{{ route }}/:id</code>
</li>
</ul>
</div>
@@ -45,6 +59,19 @@ const errorMessage = computed(
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 = () => {
@@ -60,8 +87,144 @@ const reportIssue = () => {
// Log the error for analytics
onMounted(() => {
logConsoleAndDb(
`[DeepLink] Error page displayed for path: ${originalPath.value}, code: ${errorCode.value}`,
`[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>