feat: неблокирующий сбор User Flow и гостевых ошибок (api#376 api#377)

components/analytics-client.php

@@ -0,0 +1,63 @@
+<?php
+/** Inline клиент: bounded delivery переживает SSR-переход, не задерживая пользовательский путь. */
+return <<<'JS'
+(() => {
+  if(window.ZoomzillaAnalytics)return;
+  const config=window.ZoomzillaAnalyticsConfig||{},endpoint=config.endpoint||location.origin;
+  const uuid=()=>{if(crypto.randomUUID)return crypto.randomUUID();const b=crypto.getRandomValues(new Uint8Array(16));b[6]=(b[6]&15)|64;b[8]=(b[8]&63)|128;return Array.from(b,(v,i)=>([4,6,8,10].includes(i)?'-':'')+v.toString(16).padStart(2,'0')).join('')};
+  const random=()=>btoa(String.fromCharCode(...crypto.getRandomValues(new Uint8Array(32)))).replace(/\+/g,'-').replace(/\//g,'_').replace(/=+$/,'');
+  const read=(storage,key,fallback)=>{try{const raw=storage().getItem(key);return raw&&raw.length<=65536?JSON.parse(raw):fallback}catch(_){return fallback}};
+  const write=(storage,key,value)=>{try{storage().setItem(key,JSON.stringify(value))}catch(_){}};
+  const local=()=>localStorage,session=()=>sessionStorage,browserKey='zoomzilla.analytics.browser.v1',queueKey='zoomzilla.analytics.delivery.v1';
+  let browser=read(local,browserKey,null)||read(session,browserKey,null);
+  if(!/^[0-9a-f-]{36}$/.test(browser||''))browser=uuid();
+  write(local,browserKey,browser);write(session,browserKey,browser);
+  const page=uuid(),queue=[];let token=null,contextTry=0,timer=null,sending=false,current=null,departureKey=null;
+  const captureCandidate=config.capture||new URL(location.href).searchParams.get('azv');
+  let capture=/^[A-Za-z0-9_-]{43}$/.test(captureCandidate||'')?captureCandidate:null;
+  const pageCapture=capture;
+  function prune(){for(let i=queue.length-1;i>=0;i--)if(queue[i].tries>=5||Date.now()-queue[i].created>86400000)queue.splice(i,1);while(queue.length>64||JSON.stringify(queue).length>62000)queue.shift()}
+  function persist(){prune();write(session,queueKey,{browser,endpoint,pending:queue})}
+  function restoreQueue(){const saved=read(session,queueKey,null);if(saved?.browser!==browser||saved?.endpoint!==endpoint||!Array.isArray(saved.pending))return;for(const item of saved.pending.slice(-64)){if(!item||!item.event||typeof item.event.id!=='string'||JSON.stringify(item.event).length>1024||!Number.isFinite(item.created)||!Number.isInteger(item.tries)||item.tries<0)continue;const existing=queue.find(x=>x.event.id===item.event.id);if(existing)existing.tries=Math.max(existing.tries,item.tries);else queue.push(item)}prune()}
+  restoreQueue();
+  const post=async(path,data,unload=false)=>{const controller=new AbortController(),timeout=setTimeout(()=>controller.abort(),5000);try{const response=await fetch(endpoint+'/api/analytics/public/'+path,{method:'POST',credentials:'omit',cache:'no-store',headers:{'Content-Type':unload?'text/plain;charset=UTF-8':'application/json'},body:JSON.stringify(data),signal:controller.signal,keepalive:true});if(!response.ok)throw new Error('analytics');return await response.json()}finally{clearTimeout(timeout)}};
+  function batch(){prune();const items=queue.slice(0,20);for(const item of items)item.tries++;persist();return items.map(item=>item.event)}
+  function acknowledge(result){const accepted=new Set(result.accepted||[]);for(let i=queue.length-1;i>=0;i--)if(accepted.has(queue[i].event.id))queue.splice(i,1);persist()}
+  const schedule=()=>{if(timer)return;const tries=queue.length?Math.max(...queue.map(item=>item.tries)):0;timer=setTimeout(()=>{timer=null;flush()},Math.min(30000,500*2**tries)+Math.random()*500)};
+  function contextBody(events,extra={}){const oldCapture=events.find(event=>event.capture)?.capture;return {browser,...((capture||oldCapture)?{capture:capture||oldCapture}:{}),...(current?{handoff:current.handoff,journey:current.journey}:{}),...extra,events}}
+  async function connect(extra={}){
+    const requestedBrowser=browser,events=batch();
+    try{const result=await post('context',contextBody(events,extra));if(browser!==requestedBrowser)return;token=result.token;contextTry=0;capture=null;acknowledge(result);flush()}catch(_){if(contextTry++<5)setTimeout(()=>connect(extra),Math.min(30000,500*2**contextTry)+Math.random()*500)}
+  }
+  async function flush(){
+    if(sending||!token||!queue.length)return;sending=true;
+    try{acknowledge(await post('events',{token,events:batch()}))}catch(_){}
+    sending=false;persist();if(queue.length)schedule();
+  }
+  function depart(){
+    persist();if(!queue.length)return;
+    const key=queue.map(item=>item.event.id).join(':');if(key===departureKey)return;departureKey=key;
+    const events=batch();
+    // fetch keepalive отправляется синхронно; ни pagehide, ни навигация его не ждут.
+    const delivery=token?post('events',{token,events},true):post('context',contextBody(events),true);
+    delivery.then(acknowledge).catch(()=>{});
+  }
+  function emit(kind,details={},operation=current){
+    const event={id:uuid(),page_id:page,kind,at:new Date().toISOString(),...(operation?.journey?{journey_id:operation.journey}:(config.operationProof?{operation_proof:config.operationProof}:{})),...(pageCapture?{capture:pageCapture}:{}),...details};
+    if(JSON.stringify(event).length>1024)return;queue.push({event,tries:0,created:Date.now()});persist();schedule();
+  }
+  window.ZoomzillaAnalytics={emit,uuid,
+    begin(saved){if(saved?.browser&&saved.browser!==browser){browser=saved.browser;token=null;write(local,browserKey,browser);write(session,browserKey,browser)}current=saved||{journey:uuid(),handoff:random(),browser};if(current.browser===browser)connect({handoff:current.handoff,journey:current.journey});return {...current}},
+    restore(saved){if(saved)this.begin(saved);return current},
+    metadata(){return current?{...current}:null},
+    append(data,operation=current){if(operation?.browser===browser){if(token)data.append('analytics_context',token);data.append('analytics_journey',operation.journey);data.append('analytics_handoff',operation.handoff)}},
+    headers(operation=current){return token&&operation?.browser===browser?{'X-Analytics-Context':token,'X-Analytics-Journey':operation.journey}:{}},
+    handoff(operation=current){return operation?.handoff||null}
+  };
+  let visited=false;
+  function visible(){if(config.observePage===false||visited||document.visibilityState!=='visible'||!document.body)return;visited=true;emit('visit',config.entryProof?{entry_proof:config.entryProof}:{},null);if(config.join)emit('join_visit',{},null);if(config.accountProof)emit('account_visit',{account_proof:config.accountProof},null)}
+  document.addEventListener('visibilitychange',()=>{if(document.visibilityState==='hidden')depart();else{departureKey=null;visible()}});
+  document.addEventListener('DOMContentLoaded',visible);window.addEventListener('pagehide',depart);
+  window.addEventListener('pageshow',()=>{restoreQueue();visible();flush()});visible();connect();
+})();
+JS;

components/browser-upload.php

@@ -91,6 +91,7 @@
                 event.preventDefault();
                 event.stopPropagation();
                 if (form.querySelector('.dropzone-form-button')?.disabled) return;
+                if(event.isTrusted&&window.ZoomzillaAnalyticsConfig?.guestUpload!==false)window.ZoomzillaAnalytics?.emit('upload_click');
                 other.value = '';
                 other.click();
             });
@@ -117,6 +118,7 @@
                 const reader = new FileReader();
                 const timer = window.setTimeout(() => reader.abort(), 30000);
                 const failed = error => {
+                    if(window.ZoomzillaAnalyticsConfig?.guestUpload!==false)window.ZoomzillaAnalytics?.emit('photo_error',{stage:'read',reason_code:'file_read_failed'});
                     window.clearTimeout(timer);
                     window.UploadDiagnostics?.record('buffer_error', { error_name: error.name, message: error.message });
                     reject(error);

components/form.php

@@ -108,7 +108,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 		let leavingUploadPage = false;
 		let uploadAttempt = 0;
 		const recovery = window.ZoomzillaUploadRecovery.create({scope: 'preland', target: createApiUrl});
-		const metadata = () => ({actionUrl: createApiUrl, redirectBase: redirectUrlBase, redirectUtm: redirectUrlUtm, utmDigits: {...utmDigits}});
+		const metadata = () => ({actionUrl: createApiUrl, redirectBase: redirectUrlBase, redirectUtm: redirectUrlUtm, utmDigits: {...utmDigits}, analytics: window.ZoomzillaAnalytics?.metadata()});
 		const clearRecovery = () => recovery.clear().catch(() => {});
 		let uploadDots = 1;
 		let uploadDotsTimer = null;
@@ -157,6 +157,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 				return;
 			}
 			if (e.target !== fileInput) {
+				if(e.isTrusted)window.ZoomzillaAnalytics?.emit('upload_click');
 				fileInput.click();
 			}
 		});
@@ -193,6 +194,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 		});
 
 		function handleSelectedFile(file) {
+			window.ZoomzillaAnalytics?.begin();
 			if (maxUploadBytes > 0 && file.size > maxUploadBytes) {
 				rejectOversizedFile(file);
 				return;
@@ -202,9 +204,11 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 		}
 
 		function redirectToTour(record) {
+			const azv=window.ZoomzillaAnalytics?.handoff(record.meta.analytics);
 			let targetUrl = record.meta.redirectBase + encodeURIComponent(record.key);
 			const redirectQuery = window.ZoomzillaUtmHandoff.query(record.meta, utmDigits);
 			if (redirectQuery) targetUrl += '&' + redirectQuery;
+			if(azv)targetUrl+='&azv='+encodeURIComponent(azv);
 			const shownTheme = window.ZoomzillaTheme.current();
 			targetUrl += '&shown_theme=' + encodeURIComponent(shownTheme);
 			window.PublicNavigationGuard.allowNavigation(() => { window.location.href = targetUrl; });
@@ -222,6 +226,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 			formData.append('original_name', file.name || 'upload');
 			formData.append('original_size', String(file.size || 0));
 			formData.append('client_key', clientKey);
+			window.ZoomzillaAnalytics?.append(formData,record.meta.analytics);
 			const xhr = new XMLHttpRequest();
 			xhr.open('POST', record.meta.actionUrl, true);
 			xhr.withCredentials = true;
@@ -230,12 +235,12 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 				if (attempt !== uploadAttempt || leavingUploadPage) return;
 				if (xhr.status >= 200 && xhr.status < 300) {
 					try { const result = JSON.parse(xhr.responseText); if (!result?.id) throw new Error(); await recovery.accepted({id: result.id}); redirectToTour(record); }
-					catch (_) { showUploadError(genericErrorMsg); }
+					catch (_) { showUploadError(genericErrorMsg, false, false, true, xhr); }
 					return;
 				}
-				showUploadError(genericErrorMsg, false, xhr.status === 408 || xhr.status >= 500);
+				showUploadError(genericErrorMsg, false, xhr.status === 408 || xhr.status >= 500, true, xhr);
 			};
-			xhr.onerror = () => { if (attempt === uploadAttempt && !leavingUploadPage) showUploadError(genericErrorMsg, true, true); };
+			xhr.onerror = () => { if (attempt === uploadAttempt && !leavingUploadPage) showUploadError(genericErrorMsg, true, true, true, xhr); };
 			xhr.send(formData);
 			} catch (_) { if (attempt === uploadAttempt && !leavingUploadPage) showUploadError(genericErrorMsg); }
 		}
@@ -249,7 +254,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 					const record = saved || await recovery.remember(new File([bytes], file.name, {type: file.type, lastModified: file.lastModified}), metadata());
 					if (attempt === uploadAttempt && !leavingUploadPage) uploadPreparedFile(file, bytes, record);
 				})
-				.catch(() => { if (attempt === uploadAttempt && !leavingUploadPage) showUploadError(genericErrorMsg); });
+				.catch(() => { if (attempt === uploadAttempt && !leavingUploadPage) showUploadError(genericErrorMsg, false, false, false); });
 		}
 		function uploadPreparedFile(file, bytes, record) {
 			const attempt = uploadAttempt;
@@ -260,6 +265,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 			const clientKey = record.key;
 			formData.append('file', bytes, file.name || 'upload');
 			formData.append('client_key', clientKey);
+			window.ZoomzillaAnalytics?.append(formData,record.meta.analytics);
 
 			const actionUrl = record.meta.actionUrl;
 			xhr.open('POST', actionUrl, true);
@@ -280,13 +286,13 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 					try {
 						response = JSON.parse(xhr.responseText);
 					} catch (e) {
-						showUploadError(genericErrorMsg);
+						showUploadError(genericErrorMsg, false, false, true, xhr);
 						return;
 					}
 
 					const imageId = response?.id || response?.data?.id || response?.image?.id || response?.image_id;
 					if (!imageId) {
-						showUploadError(genericErrorMsg);
+						showUploadError(genericErrorMsg, false, false, true, xhr);
 						return;
 					}
 
@@ -297,21 +303,23 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 
 					// Переход: $redirect_url_base . client_key . ($redirect_url_utm ? '&' . $redirect_url_utm : '')
 					try { await recovery.accepted({id: imageId}); redirectToTour(record); }
-					catch (_) { showUploadError(genericErrorMsg); }
+					catch (_) { showUploadError(genericErrorMsg, false, false, true, xhr); }
 				} else {
-					showUploadError(genericErrorMsg, false, xhr.status === 408 || xhr.status >= 500);
+					showUploadError(genericErrorMsg, false, xhr.status === 408 || xhr.status >= 500, true, xhr);
 				}
 			};
 
 			xhr.onerror = () => {
-				if (attempt === uploadAttempt && !leavingUploadPage) showUploadError(genericErrorMsg, true, true);
+				if (attempt === uploadAttempt && !leavingUploadPage) showUploadError(genericErrorMsg, true, true, true, xhr);
 			};
 
 			xhr.send(formData);
 		}
 
-		function showUploadError(msg, keepRecovery = false, connection = false) {
+		function showUploadError(msg, keepRecovery = false, connection = false, recordAnalytics = true, analyticsRequest = null) {
 			if (leavingUploadPage) return;
+			const failureProof=analyticsRequest?.getResponseHeader?.('X-Analytics-Failure');
+			if(recordAnalytics)window.ZoomzillaAnalytics?.emit('photo_error',{stage:'upload',reason_code:'upload_failed',...(analyticsRequest?.status>=100?{http_status:analyticsRequest.status}:{}),...(failureProof?{failure_proof:failureProof}:{})});
 			uploadAttempt++;
 			if (!keepRecovery) clearRecovery();
 			resetUploadPending();
@@ -333,6 +341,7 @@ $basePickerAccept = 'image/jpeg,image/png,image/gif,image/webp,image/bmp,image/a
 		(async () => {
 			try {
 				const saved = await recovery.load();
+				window.ZoomzillaAnalytics?.restore(saved?.meta?.analytics);
 				if (!saved) return;
 				if (performance.getEntriesByType('navigation')[0]?.type !== 'reload' || saved.sourceUrl !== location.href || saved.meta.actionUrl !== createApiUrl) { clearRecovery(); return; }
 				if (saved.result?.id) { beginUploadPending(); redirectToTour(saved); }

index.php

@@ -17,7 +17,7 @@ Yii::init($config['default_language'] ?? 'ru');
 $config = prelandNumericUtmConfig($config);
 $resolvedUtm = prelandResolveUtm($_GET, $config);
 $UTM = $resolvedUtm['context'];
-$get_params = array_diff_key($_GET, array_fill_keys(['indpic','theme','degr','reg','banch','tp','cons','focus','part','registration','bchoice','chob','chb','key'], true));
+$get_params = array_diff_key($_GET, array_fill_keys(['indpic','theme','degr','reg','banch','tp','cons','focus','part','registration','bchoice','chob','chb','key','azv'], true));
 // Числа — внутренний snapshot для recovery. Публичная оболочка создаётся при навигации.
 $redirect_digits = $resolvedUtm['digits'];
 $themeInitial = prelandThemeResolve(($UTM['theme'] ?? 'light') === 'dark' ? 'dark' : 'light');

template.php

@@ -5,6 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <?php require __DIR__ . '/components/theme-style.php'; ?>
         <?php require __DIR__ . '/components/theme-client.php'; ?>
+        <script>window.ZoomzillaAnalyticsConfig={endpoint:<?= json_encode($apiHost) ?>};<?= require __DIR__.'/components/analytics-client.php' ?></script>
 
         <title><?= $page_title ?? $default_title ?></title>