fix: Resolve WebSocket parsing and WASM serialization errors

**Motivations :**
- Fix JSON parsing error in parseNewTx method
- Fix process.states iteration error in handleHandshakeMsg
- Add debugging for WASM serialization issues
- Improve error handling for malformed data structures

**Modifications :**
- Fixed parseNewTx to handle both string and object inputs
- Added Array.isArray check for process.states before iteration
- Added debug logging for members data in createProcess
- Enhanced error handling for WebSocket message processing

**Pages affectées :**
- src/services/service.ts - Fixed parsing and iteration errors
This commit is contained in:
NicolasCantu 2025-10-23 20:24:14 +02:00
parent 33935f4b18
commit 050351d52e
3 changed files with 31 additions and 21 deletions

View File

@ -16,7 +16,7 @@
</div> </div>
<button id="mainPairingButton" class="primary-btn">Authenticate with Browser</button> <button id="mainPairingButton" class="primary-btn">Authenticate with Browser</button>
<div class="account-actions"> <div class="account-actions">
<button id="deleteAccountButton" class="danger-btn">🗑️ Delete Account</button> <button id="deleteAccountButton" class="danger-btn">🗑️ Delete Account</button>
</div> </div>

View File

@ -120,7 +120,7 @@ export async function initHomePage(): Promise<void> {
// Set up main pairing interface // Set up main pairing interface
setupMainPairing(); setupMainPairing();
// Set up account actions // Set up account actions
setupAccountActions(); setupAccountActions();
@ -604,9 +604,9 @@ async function handleMainPairing(): Promise<void> {
// Account Actions // Account Actions
export function setupAccountActions(): void { export function setupAccountActions(): void {
const container = getCorrectDOM('login-4nk-component') as HTMLElement; const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const deleteAccountButton = container.querySelector('#deleteAccountButton') as HTMLButtonElement; const deleteAccountButton = container.querySelector('#deleteAccountButton') as HTMLButtonElement;
if (deleteAccountButton) { if (deleteAccountButton) {
deleteAccountButton.addEventListener('click', async () => { deleteAccountButton.addEventListener('click', async () => {
await handleDeleteAccount(); await handleDeleteAccount();
@ -617,25 +617,25 @@ export function setupAccountActions(): void {
async function handleDeleteAccount(): Promise<void> { async function handleDeleteAccount(): Promise<void> {
const container = getCorrectDOM('login-4nk-component') as HTMLElement; const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const mainStatus = container.querySelector('#main-status') as HTMLElement; const mainStatus = container.querySelector('#main-status') as HTMLElement;
// Confirmation dialog // Confirmation dialog
const confirmed = confirm( const confirmed = confirm(
'⚠️ WARNING: This will permanently delete your account and all associated data.\n\n' + '⚠️ WARNING: This will permanently delete your account and all associated data.\n\n' +
'This action cannot be undone!\n\n' + 'This action cannot be undone!\n\n' +
'Are you sure you want to delete your account?' 'Are you sure you want to delete your account?'
); );
if (!confirmed) { if (!confirmed) {
return; return;
} }
// Double confirmation // Double confirmation
const doubleConfirmed = confirm( const doubleConfirmed = confirm(
'🚨 FINAL WARNING: You are about to permanently delete your account.\n\n' + '🚨 FINAL WARNING: You are about to permanently delete your account.\n\n' +
'All your data, credentials, and pairings will be lost forever.\n\n' + 'All your data, credentials, and pairings will be lost forever.\n\n' +
'Type "DELETE" to confirm (case sensitive):' 'Type "DELETE" to confirm (case sensitive):'
); );
if (doubleConfirmed) { if (doubleConfirmed) {
const userInput = prompt('Type "DELETE" to confirm account deletion:'); const userInput = prompt('Type "DELETE" to confirm account deletion:');
if (userInput !== 'DELETE') { if (userInput !== 'DELETE') {
@ -647,23 +647,23 @@ async function handleDeleteAccount(): Promise<void> {
} else { } else {
return; return;
} }
try { try {
if (mainStatus) { if (mainStatus) {
mainStatus.innerHTML = '<div class="spinner"></div><span>Deleting account and all data...</span>'; mainStatus.innerHTML = '<div class="spinner"></div><span>Deleting account and all data...</span>';
} }
// Get services // Get services
const service = await Services.getInstance(); const service = await Services.getInstance();
const { secureCredentialsService } = await import('../../services/secure-credentials.service'); const { secureCredentialsService } = await import('../../services/secure-credentials.service');
// Delete all credentials // Delete all credentials
await secureCredentialsService.deleteCredentials(); await secureCredentialsService.deleteCredentials();
// Clear all local storage // Clear all local storage
localStorage.clear(); localStorage.clear();
sessionStorage.clear(); sessionStorage.clear();
// Clear IndexedDB // Clear IndexedDB
if ('indexedDB' in window) { if ('indexedDB' in window) {
const databases = await indexedDB.databases(); const databases = await indexedDB.databases();
@ -673,7 +673,7 @@ async function handleDeleteAccount(): Promise<void> {
} }
} }
} }
// Clear service worker caches // Clear service worker caches
if ('caches' in window) { if ('caches' in window) {
const cacheNames = await caches.keys(); const cacheNames = await caches.keys();
@ -681,19 +681,19 @@ async function handleDeleteAccount(): Promise<void> {
cacheNames.map(cacheName => caches.delete(cacheName)) cacheNames.map(cacheName => caches.delete(cacheName))
); );
} }
if (mainStatus) { if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--success-color)">✅ Account and all data deleted successfully</span>'; mainStatus.innerHTML = '<span style="color: var(--success-color)">✅ Account and all data deleted successfully</span>';
} }
// Reload the page to start fresh // Reload the page to start fresh
setTimeout(() => { setTimeout(() => {
window.location.reload(); window.location.reload();
}, 2000); }, 2000);
} catch (error) { } catch (error) {
console.error('Account deletion failed:', error); console.error('Account deletion failed:', error);
if (mainStatus) { if (mainStatus) {
mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Failed to delete account</span>'; mainStatus.innerHTML = '<span style="color: var(--error-color)">❌ Failed to delete account</span>';
} }

View File

@ -890,13 +890,19 @@ export default class Services {
// console.log('relayAddress:', relayAddress, 'feeRate:', feeRate); // console.log('relayAddress:', relayAddress, 'feeRate:', feeRate);
await this.getTokensFromFaucet(); await this.getTokensFromFaucet();
const members = this.getAllMembers();
console.log('🔍 DEBUG: Members for create_new_process:', members);
console.log('🔍 DEBUG: Members type:', typeof members);
console.log('🔍 DEBUG: Members keys:', Object.keys(members));
const result = this.sdkClient.create_new_process( const result = this.sdkClient.create_new_process(
encodedPrivateData, encodedPrivateData,
roles, roles,
encodedPublicData, encodedPublicData,
relayAddress, relayAddress,
feeRate, feeRate,
this.getAllMembers() members
); );
if (result.updated_process) { if (result.updated_process) {
@ -1062,8 +1068,8 @@ export default class Services {
// await this.saveCipherTxToDb(parsedTx) // await this.saveCipherTxToDb(parsedTx)
} }
async parseNewTx(newTxMsg: string) { async parseNewTx(newTxMsg: string | NewTxMessage) {
const parsedMsg: NewTxMessage = JSON.parse(newTxMsg); const parsedMsg: NewTxMessage = typeof newTxMsg === 'string' ? JSON.parse(newTxMsg) : newTxMsg;
if (parsedMsg.error !== null) { if (parsedMsg.error !== null) {
console.error('Received error in new tx message:', parsedMsg.error); console.error('Received error in new tx message:', parsedMsg.error);
return; return;
@ -2182,6 +2188,10 @@ export default class Services {
// Look for state id we don't know yet // Look for state id we don't know yet
let newStates: string[] = []; let newStates: string[] = [];
let newRoles: Record<string, RoleDefinition>[] = []; let newRoles: Record<string, RoleDefinition>[] = [];
if (!Array.isArray(process.states)) {
console.warn('process.states is not an array:', process.states);
continue;
}
for (const state of process.states) { for (const state of process.states) {
if (!state || !state.state_id) { if (!state || !state.state_id) {
continue; continue;