Analytics i Monitoring 2024

PostHog — product analytics i session replay dla deweloperów?

PostHog: Tim Gleeson. Open source. Self-hostable lub cloud. All-in-one product analytics. Instalacja Next.js: npm install posthog-js posthog-node. Provider: posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {api_host: 'https://eu.posthog.com', person_profiles: 'identified_only'}). Events: posthog.capture('user_signed_up', {plan: 'free', source: 'google'}). Page views: automatyczne (SPA routing dodaj manualnie). Identify: posthog.identify(userId, {email, name, plan}). Group: posthog.group('company', companyId, {name: companyName}). Feature Flags: const flag = await posthog.isFeatureEnabled('new-dashboard'). if (flag) { return NewDashboard }. Multivariate: posthog.getFeatureFlag('button-color') — 'red' | 'blue' | 'control'. Bootstrap flags: server-side evaluation. Bez client latency. Session Recording: automatyczne nagrywanie sesji. Replay w UI. Privacy: maskowanie PII. Heatmaps: click, scroll, rage click. Eksperymentalne. Experiments (A/B testing): Targetowanie. Rollout. Statistical significance. Funnel Analysis: definiuj kroki. Conversion rate. Gdzie odpada. Cohorts: grupy użytkowników. Behavioral cohorts. Retention: jak wracają. Correlation analysis. Self-hosting: docker compose. PostgreSQL + Kafka + ClickHouse. Zaawansowany. EU cloud: eu.posthog.com. GDPR compliant.

Sentry — error monitoring i performance tracking 2024?

Sentry: zaawansowany error tracking. Performance monitoring. Session replays. Release tracking. Instalacja Next.js: npm install @sentry/nextjs. npx @sentry/wizard@latest -i nextjs. Automatyczna konfiguracja. Error tracking: Sentry.captureException(error). Automatyczne uncaught exceptions. Breadcrumbs: trail co się wydarzyło. Context: user, tags, extra. Sentry.setUser({id, email, username}). Sentry.setTag('environment', 'production'). Performance: Sentry.startTransaction({name: 'process-payment'}). Spans: transaction.startChild({op: 'db.query'}). Web Vitals automatyczne (CLS, LCP, FCP, TTFB). Tracing: distributed tracing. Frontend -> Backend -> DB. Sentry.init({dsn, tracesSampleRate: 0.1, profilesSampleRate: 0.1}). Profiles: CPU profiling. Co zajmuje czas. Source Maps: automatyczne z Sentry CLI. Human-readable stack traces. Minified code -> original. Release tracking: sentry-cli releases new. Error rates per release. Regressions. Rollback decision. Alerts: error rate threshold. New issues. Performance regressions. Integrations: GitHub (link do PR). Slack. PagerDuty. Linear. Session Replay: Sentry.init({replaysSessionSampleRate: 0.1}). Replay przy błędzie zawsze. Privacy: maskowanie haseł. Blocked selectors. Pricing: darmowy (5k errors/mies). Pro ($26/mies). Business dla team. Self-hosting: sentry.io/for/self-hosted. Docker. Zaawansowany setup.

Inne narzędzia analytics — Mixpanel, Amplitude, Plausible i FullStory?

Mixpanel: event-based analytics. Funnels, cohorts, retention. Droższy. Świetny UX. Instalacja: npm install mixpanel-browser. mixpanel.init(token). mixpanel.track('Signup', {plan}). Amplitude: enterprise analytics. Behavioral cohorts. Powerful segmentation. Amplitude SDK. Developer-friendly. Analytics.js (Segment): routing warstwy. Jedna linia kodu. Routing do wielu destinacji. Drogi ($120+/mies). Pryvatność-przyjazne: Plausible: prywatne. Open source. Bez cookies. GDPR domyślnie. Skrypt 1KB. Fathom: podobny do Plausible. Simple. Privacy-first. Pirsch: self-hostable. GDPR. Session Replay tools: FullStory: session replay + events. Frustration signals. DX Data. Hotjar: heatmaps + replay + surveys. Bardzo popularne. LogRocket: dev-focused. State replay (Redux). Network requests replay. Errors w kontekście. Microsoft Clarity: darmowy! Session replays. Heatmaps. Konwersacja: No PII per default. Dobry darmowy starter. Porównanie: startup -> PostHog (all-in-one, free). Privacy-focused -> Plausible. Debugging frontend -> LogRocket. Error tracking -> Sentry. Session replay gratis -> Clarity. Enterprise analytics -> Amplitude/Mixpanel. Real User Monitoring (RUM): SpeedCurve, Datadog RUM. Core Web Vitals in real users. Performance po deploymencie. DataDog APM: backend performance. Traces. Logs. Metrics. Kosztowny ale potężny.

Feature Flags — LaunchDarkly, Unleash i OpenFeature?

Feature Flags: kontroluj co widzą użytkownicy. A/B testing. Canary releases. Kill switches. Stopniowy rollout. LaunchDarkly: lider rynku. SDKs: React, Node, iOS, Android. Drogi ($10+/mies per user). Enterprise features. Reguły targetowania: user ID, country, plan, random %. const variation = await ldClient.variation('new-feature', user, false). React SDK: const flags = useFlags(). flags['new-feature'] — boolean. Unleash: open source. Self-hostable. REST API. SDKs. Darmowy self-host. SaaS plan. npm install @unleash/proxy-client-react. Growthbook: open source. A/B testing focused. Statistical analysis. Self-hostable lub cloud. Flagsmith: open source. Remote config. JavaScript SDK. Docker self-host. PostHog Flags: wbudowane w PostHog. NEXT_PUBLIC_POSTHOG_KEY. Bez osobnego narzędzia. OpenFeature: CNCF projekt. Standard SDK dla feature flags. Provider pattern. Nie zmieniaj providera bez zmiany kodu. Multiple backends. @openfeature/react-sdk. const {value} = useFlag('new-feature', false). Provider: LaunchDarkly, Flagsmith, Unleash. Rollout patterns: Percentage rollout: 5% -> 25% -> 50% -> 100%. Ring deployment: internal -> beta -> prod. Geographic: kraj po kraju. User-based: opt-in beta. Plan-based: premium first. Kill switches: produkcja problem -> wyłącz feature. Bez deployu. Szybsze niż rollback. Serverside flags: nie eksponuj warunków. Zmniejsz bundle. SSR + bootstrap.

Web Vitals i Real User Monitoring — mierzenie performance?

Core Web Vitals 2024: LCP (Largest Contentful Paint): czas do renderowania największego elementu. Dobry: 2.5s. Wymaga poprawy: 4s. CLS (Cumulative Layout Shift): nieoczekiwane przesunięcia. Dobry: 0.1. Wymaga: 0.25. INP (Interaction to Next Paint): zastąpił FID w 2024. Czas reakcji na interakcję. Dobry: 200ms. Wymaga: 500ms. TTFB (Time to First Byte): serwer response. Dobry: 800ms. FCP (First Contentful Paint): pierwsze malowanie. web-vitals biblioteka: import {getLCP, getCLS, getINP, onFCP, onTTFB} from 'web-vitals'. onLCP(({value, rating}) => { sendToAnalytics({metric: 'LCP', value, rating}) }). Next.js Web Vitals: export function reportWebVitals(metric: NextWebVitalsMetric) { if (metric.label === 'web-vital') { console.log(metric) } }. RUM (Real User Monitoring): dane od prawdziwych użytkowników. Google PageSpeed Insights. Chrome User Experience Report (CrUX). Google Search Console. DataDog RUM. New Relic Browser. Różni się od Lighthouse (syntetyczny). INP optymalizacja: Long Tasks poniżej 50ms. scheduler.postTask() — prioritize tasks. startTransition dla React updates. Requestanimationframe dla animacje. Debounce event handlers. LCP optymalizacja: fetchpriority='high' na LCP image. Preload LCP resource. Nie lazy-load LCP. Server-side rendering. Szybki TTFB. CLS optymalizacja: wymiary obrazów zawsze. Skeleton loaders z stałymi wymiarami. Nie wstawiaj powyżej treści. Font display: swap. Reserved space dla ads.

Wyślij zapytanie