feat: add a component to capture when wrapped components are in view in the browser #2516

pauldambra · 2025-10-28T18:16:34Z

#2504 had weird unrelated build errors, let's split it up

i forget where but this came up in conversation, and a customer mentioned it once

lets us do

<PostHogCaptureOnViewed>
 <MyUpSellComponent />
</PostHogCaptureOnViewed>

and send an event to posthog when its viewed
e.g. to see if people are scrolling down to a particular component in a gallery of products

you can pass trackAllChildren to e.g. wrap a gallery of products and instrument each item in the gallery separately
also adds a playground site with this implemented so you can see it working

Release info Sub-libraries affected

Libraries affected

Checklist

Tests for new code
Accounted for the impact of any changes across different platforms
Accounted for backwards compatibility of any changes (no breaking changes!)
Took care not to unnecessarily increase the bundle size

If releasing new changes

Ran pnpm changeset to generate a changeset file
Added the "release" label to the PR to indicate we're publishing new versions for the affected packages

vercel · 2025-10-28T18:16:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
posthog-js	Ready	Preview	Oct 29, 2025 2:08pm

github-actions · 2025-10-28T18:16:49Z

📝 No Changeset Found

This PR doesn't include a changeset. A changeset (and the release label) is required to release a new version.

How to add a changeset

Run this command and follow the prompts:

pnpm changeset

Remember: Never use major version bumps for posthog-js as it's autoloaded by clients.

pauldambra · 2025-10-28T18:16:51Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-10-28T18:20:38Z

Download bundle size visualization

github-actions · 2025-10-28T18:21:23Z

Size Change: +12.8 kB (+0.26%)

Total Size: 4.87 MB

Filename	Size	Change
`packages/browser/react/dist/esm/index.js`	18.1 kB	+3.01 kB (+19.88%)	🚨
`packages/browser/react/dist/umd/index.js`	21.2 kB	+3.38 kB (+18.96%)	⚠️
`packages/react/dist/esm/index.js`	18.1 kB	+3.01 kB (+19.88%)	🚨
`packages/react/dist/umd/index.js`	21.2 kB	+3.38 kB (+18.96%)	⚠️

ℹ️ View Unchanged

Filename	Size
`packages/ai/dist/anthropic/index.cjs`	16.7 kB
`packages/ai/dist/anthropic/index.mjs`	16.5 kB
`packages/ai/dist/gemini/index.cjs`	18.5 kB
`packages/ai/dist/gemini/index.mjs`	18.4 kB
`packages/ai/dist/index.cjs`	121 kB
`packages/ai/dist/index.mjs`	121 kB
`packages/ai/dist/langchain/index.cjs`	40.5 kB
`packages/ai/dist/langchain/index.mjs`	40 kB
`packages/ai/dist/openai/index.cjs`	30.8 kB
`packages/ai/dist/openai/index.mjs`	30.5 kB
`packages/ai/dist/vercel/index.cjs`	23 kB
`packages/ai/dist/vercel/index.mjs`	23 kB
`packages/browser/dist/all-external-dependencies.js`	223 kB
`packages/browser/dist/array.full.es5.js`	292 kB
`packages/browser/dist/array.full.js`	359 kB
`packages/browser/dist/array.full.no-external.js`	374 kB
`packages/browser/dist/array.js`	158 kB
`packages/browser/dist/array.no-external.js`	171 kB
`packages/browser/dist/crisp-chat-integration.js`	1.97 kB
`packages/browser/dist/customizations.full.js`	19 kB
`packages/browser/dist/dead-clicks-autocapture.js`	12.6 kB
`packages/browser/dist/exception-autocapture.js`	11.6 kB
`packages/browser/dist/external-scripts-loader.js`	2.81 kB
`packages/browser/dist/intercom-integration.js`	2.02 kB
`packages/browser/dist/lazy-recorder.js`	147 kB
`packages/browser/dist/main.js`	160 kB
`packages/browser/dist/module.full.js`	360 kB
`packages/browser/dist/module.full.no-external.js`	374 kB
`packages/browser/dist/module.js`	159 kB
`packages/browser/dist/module.no-external.js`	172 kB
`packages/browser/dist/posthog-recorder.js`	242 kB
`packages/browser/dist/recorder-v2.js`	113 kB
`packages/browser/dist/recorder.js`	113 kB
`packages/browser/dist/surveys-preview.js`	71.1 kB
`packages/browser/dist/surveys.js`	80.1 kB
`packages/browser/dist/tracing-headers.js`	1.84 kB
`packages/browser/dist/web-vitals.js`	10.4 kB
`packages/core/dist/error-tracking/chunk-ids.js`	2.54 kB
`packages/core/dist/error-tracking/chunk-ids.mjs`	1.31 kB
`packages/core/dist/error-tracking/coercers/dom-exception-coercer.js`	2.3 kB
`packages/core/dist/error-tracking/coercers/dom-exception-coercer.mjs`	993 B
`packages/core/dist/error-tracking/coercers/error-coercer.js`	2.02 kB
`packages/core/dist/error-tracking/coercers/error-coercer.mjs`	794 B
`packages/core/dist/error-tracking/coercers/error-event-coercer.js`	1.76 kB
`packages/core/dist/error-tracking/coercers/error-event-coercer.mjs`	513 B
`packages/core/dist/error-tracking/coercers/event-coercer.js`	1.82 kB
`packages/core/dist/error-tracking/coercers/event-coercer.mjs`	548 B
`packages/core/dist/error-tracking/coercers/index.js`	6.79 kB
`packages/core/dist/error-tracking/coercers/index.mjs`	326 B
`packages/core/dist/error-tracking/coercers/object-coercer.js`	3.46 kB
`packages/core/dist/error-tracking/coercers/object-coercer.mjs`	2.07 kB
`packages/core/dist/error-tracking/coercers/primitive-coercer.js`	1.67 kB
`packages/core/dist/error-tracking/coercers/primitive-coercer.mjs`	419 B
`packages/core/dist/error-tracking/coercers/promise-rejection-event.js`	2.25 kB
`packages/core/dist/error-tracking/coercers/promise-rejection-event.mjs`	904 B
`packages/core/dist/error-tracking/coercers/string-coercer.js`	2.01 kB
`packages/core/dist/error-tracking/coercers/string-coercer.mjs`	820 B
`packages/core/dist/error-tracking/coercers/utils.js`	2.06 kB
`packages/core/dist/error-tracking/coercers/utils.mjs`	716 B
`packages/core/dist/error-tracking/error-properties-builder.js`	5.64 kB
`packages/core/dist/error-tracking/error-properties-builder.mjs`	4.24 kB
`packages/core/dist/error-tracking/index.js`	4.11 kB
`packages/core/dist/error-tracking/index.mjs`	152 B
`packages/core/dist/error-tracking/parsers/base.js`	1.84 kB
`packages/core/dist/error-tracking/parsers/base.mjs`	472 B
`packages/core/dist/error-tracking/parsers/chrome.js`	2.7 kB
`packages/core/dist/error-tracking/parsers/chrome.mjs`	1.29 kB
`packages/core/dist/error-tracking/parsers/gecko.js`	2.45 kB
`packages/core/dist/error-tracking/parsers/gecko.mjs`	1.11 kB
`packages/core/dist/error-tracking/parsers/index.js`	4.36 kB
`packages/core/dist/error-tracking/parsers/index.mjs`	1.92 kB
`packages/core/dist/error-tracking/parsers/node.js`	3.95 kB
`packages/core/dist/error-tracking/parsers/node.mjs`	2.68 kB
`packages/core/dist/error-tracking/parsers/opera.js`	2.22 kB
`packages/core/dist/error-tracking/parsers/opera.mjs`	706 B
`packages/core/dist/error-tracking/parsers/react-native.js`	203 B
`packages/core/dist/error-tracking/parsers/react-native.mjs`	0 B	🆕
`packages/core/dist/error-tracking/parsers/safari.js`	1.88 kB
`packages/core/dist/error-tracking/parsers/safari.mjs`	574 B
`packages/core/dist/error-tracking/parsers/winjs.js`	1.7 kB
`packages/core/dist/error-tracking/parsers/winjs.mjs`	406 B
`packages/core/dist/error-tracking/types.js`	1.33 kB
`packages/core/dist/error-tracking/types.mjs`	131 B
`packages/core/dist/error-tracking/utils.js`	1.8 kB
`packages/core/dist/error-tracking/utils.mjs`	604 B
`packages/core/dist/eventemitter.js`	1.78 kB
`packages/core/dist/eventemitter.mjs`	571 B
`packages/core/dist/featureFlagUtils.js`	6.5 kB
`packages/core/dist/featureFlagUtils.mjs`	4.28 kB
`packages/core/dist/gzip.js`	1.88 kB
`packages/core/dist/gzip.mjs`	577 B
`packages/core/dist/index.js`	5.7 kB
`packages/core/dist/index.mjs`	485 B
`packages/core/dist/logger.js`	2.46 kB
`packages/core/dist/logger.mjs`	1.17 kB
`packages/core/dist/posthog-core-stateless.js`	29.7 kB
`packages/core/dist/posthog-core-stateless.mjs`	27.1 kB
`packages/core/dist/posthog-core.js`	28 kB
`packages/core/dist/posthog-core.mjs`	24 kB
`packages/core/dist/process/index.js`	2.27 kB
`packages/core/dist/process/index.mjs`	35 B
`packages/core/dist/process/spawn-local.js`	2.33 kB
`packages/core/dist/process/spawn-local.mjs`	1.01 kB
`packages/core/dist/process/utils.js`	3.11 kB
`packages/core/dist/process/utils.mjs`	1.15 kB
`packages/core/dist/testing/index.js`	2.93 kB
`packages/core/dist/testing/index.mjs`	79 B
`packages/core/dist/testing/PostHogCoreTestClient.js`	3.15 kB
`packages/core/dist/testing/PostHogCoreTestClient.mjs`	1.74 kB
`packages/core/dist/testing/test-utils.js`	2.77 kB
`packages/core/dist/testing/test-utils.mjs`	1.09 kB
`packages/core/dist/types.js`	8.2 kB
`packages/core/dist/types.mjs`	5.93 kB
`packages/core/dist/utils/bucketed-rate-limiter.js`	3 kB
`packages/core/dist/utils/bucketed-rate-limiter.mjs`	1.62 kB
`packages/core/dist/utils/index.js`	9.26 kB
`packages/core/dist/utils/index.mjs`	1.88 kB
`packages/core/dist/utils/number-utils.js`	2 kB
`packages/core/dist/utils/number-utils.mjs`	735 B
`packages/core/dist/utils/promise-queue.js`	2 kB
`packages/core/dist/utils/promise-queue.mjs`	768 B
`packages/core/dist/utils/string-utils.js`	1.91 kB
`packages/core/dist/utils/string-utils.mjs`	414 B
`packages/core/dist/utils/type-utils.js`	6.93 kB
`packages/core/dist/utils/type-utils.mjs`	3.03 kB
`packages/core/dist/vendor/uuidv7.js`	8.29 kB
`packages/core/dist/vendor/uuidv7.mjs`	6.72 kB
`packages/nextjs-config/dist/config.js`	5.51 kB
`packages/nextjs-config/dist/config.mjs`	4.03 kB
`packages/nextjs-config/dist/index.js`	2.24 kB
`packages/nextjs-config/dist/index.mjs`	30 B
`packages/nextjs-config/dist/utils.js`	3.94 kB
`packages/nextjs-config/dist/utils.mjs`	2.05 kB
`packages/nextjs-config/dist/webpack-plugin.js`	3.69 kB
`packages/nextjs-config/dist/webpack-plugin.mjs`	1.98 kB
`packages/node/dist/client.js`	22.7 kB
`packages/node/dist/client.mjs`	20.8 kB
`packages/node/dist/entrypoints/index.edge.js`	4.14 kB
`packages/node/dist/entrypoints/index.edge.mjs`	652 B
`packages/node/dist/entrypoints/index.node.js`	5.08 kB
`packages/node/dist/entrypoints/index.node.mjs`	901 B
`packages/node/dist/exports.js`	3.6 kB
`packages/node/dist/exports.mjs`	124 B
`packages/node/dist/extensions/error-tracking/autocapture.js`	2.65 kB
`packages/node/dist/extensions/error-tracking/autocapture.mjs`	1.23 kB
`packages/node/dist/extensions/error-tracking/index.js`	3.88 kB
`packages/node/dist/extensions/error-tracking/index.mjs`	2.61 kB
`packages/node/dist/extensions/error-tracking/modifiers/context-lines.node.js`	8.81 kB
`packages/node/dist/extensions/error-tracking/modifiers/context-lines.node.mjs`	7.15 kB
`packages/node/dist/extensions/error-tracking/modifiers/module.node.js`	2.78 kB
`packages/node/dist/extensions/error-tracking/modifiers/module.node.mjs`	1.45 kB
`packages/node/dist/extensions/express.js`	2.17 kB
`packages/node/dist/extensions/express.mjs`	548 B
`packages/node/dist/extensions/feature-flags/crypto.js`	1.57 kB
`packages/node/dist/extensions/feature-flags/crypto.mjs`	395 B
`packages/node/dist/extensions/feature-flags/feature-flags.js`	27.7 kB
`packages/node/dist/extensions/feature-flags/feature-flags.mjs`	25.7 kB
`packages/node/dist/extensions/sentry-integration.js`	4.66 kB
`packages/node/dist/extensions/sentry-integration.mjs`	3.17 kB
`packages/node/dist/storage-memory.js`	1.52 kB
`packages/node/dist/storage-memory.mjs`	297 B
`packages/node/dist/types.js`	603 B
`packages/node/dist/types.mjs`	0 B	🆕
`packages/node/dist/version.js`	1.21 kB
`packages/node/dist/version.mjs`	46 B
`packages/nuxt/dist/module.mjs`	3.71 kB
`packages/nuxt/dist/runtime/nitro-plugin.js`	1.07 kB
`packages/nuxt/dist/runtime/vue-plugin.js`	652 B
`packages/react-native/dist/autocapture.js`	4.68 kB
`packages/react-native/dist/error-tracking/index.js`	6.65 kB
`packages/react-native/dist/error-tracking/utils.js`	2.58 kB
`packages/react-native/dist/frameworks/wix-navigation.js`	1.3 kB
`packages/react-native/dist/hooks/useFeatureFlag.js`	1.49 kB
`packages/react-native/dist/hooks/useFeatureFlags.js`	821 B
`packages/react-native/dist/hooks/useNavigationTracker.js`	2.46 kB
`packages/react-native/dist/hooks/usePostHog.js`	467 B
`packages/react-native/dist/index.js`	3.12 kB
`packages/react-native/dist/native-deps.js`	13.9 kB
`packages/react-native/dist/optional/OptionalAsyncStorage.js`	299 B
`packages/react-native/dist/optional/OptionalExpoApplication.js`	377 B
`packages/react-native/dist/optional/OptionalExpoDevice.js`	347 B
`packages/react-native/dist/optional/OptionalExpoFileSystem.js`	386 B
`packages/react-native/dist/optional/OptionalExpoFileSystemLegacy.js`	423 B
`packages/react-native/dist/optional/OptionalExpoLocalization.js`	383 B
`packages/react-native/dist/optional/OptionalReactNativeDeviceInfo.js`	415 B
`packages/react-native/dist/optional/OptionalReactNativeLocalize.js`	303 B
`packages/react-native/dist/optional/OptionalReactNativeNavigation.js`	415 B
`packages/react-native/dist/optional/OptionalReactNativeNavigationWix.js`	443 B
`packages/react-native/dist/optional/OptionalReactNativeSafeArea.js`	644 B
`packages/react-native/dist/optional/OptionalSessionReplay.js`	455 B
`packages/react-native/dist/posthog-rn.js`	34.4 kB
`packages/react-native/dist/PostHogContext.js`	329 B
`packages/react-native/dist/PostHogProvider.js`	4.77 kB
`packages/react-native/dist/storage.js`	3.39 kB
`packages/react-native/dist/surveys/components/BottomSection.js`	1.34 kB
`packages/react-native/dist/surveys/components/Cancel.js`	909 B
`packages/react-native/dist/surveys/components/ConfirmationMessage.js`	1.58 kB
`packages/react-native/dist/surveys/components/QuestionHeader.js`	1.11 kB
`packages/react-native/dist/surveys/components/QuestionTypes.js`	10.1 kB
`packages/react-native/dist/surveys/components/SurveyModal.js`	3.86 kB
`packages/react-native/dist/surveys/components/Surveys.js`	7.18 kB
`packages/react-native/dist/surveys/getActiveMatchingSurveys.js`	3.69 kB
`packages/react-native/dist/surveys/icons.js`	7.76 kB
`packages/react-native/dist/surveys/index.js`	600 B
`packages/react-native/dist/surveys/PostHogSurveyProvider.js`	5.66 kB
`packages/react-native/dist/surveys/surveys-utils.js`	9.31 kB
`packages/react-native/dist/surveys/useActivatedSurveys.js`	3.38 kB
`packages/react-native/dist/surveys/useSurveyStorage.js`	2.16 kB
`packages/react-native/dist/types.js`	70 B
`packages/react-native/dist/utils.js`	539 B
`packages/react-native/dist/version.js`	130 B
`packages/web/dist/index.cjs`	13.8 kB
`packages/web/dist/index.mjs`	13.7 kB
`tooling/rollup-utils/dist/index.js`	1.17 kB

_{compressed-size-action}

greptile-apps

Additional Comments (2)

packages/react/src/components/PostHogCaptureOnViewed.tsx, line 1 (link)

logic: file is empty - no implementation present
packages/react/src/components/__tests__/PostHogCaptureOnViewed.test.tsx, line 1 (link)

logic: test file is empty - no tests present

_{2 files reviewed, 2 comments}

_{Edit Code Review Agent Settings | Greptile}

…in the browser

pauldambra · 2025-10-29T14:08:32Z

Merge activity

Oct 29, 2:08 PM UTC: @pauldambra merged this pull request with Graphite.

This was referenced Oct 28, 2025

chore: rearrange things for re-use within the react SDK #2515

Merged

chore: add a posthog react playground that does nothing #2514

Merged

pauldambra marked this pull request as ready for review October 28, 2025 18:18

pauldambra added the release label Oct 28, 2025 — with Graphite App

greptile-apps bot reviewed Oct 28, 2025

View reviewed changes

vercel bot deployed to Preview October 28, 2025 18:21 View deployment

pauldambra mentioned this pull request Oct 28, 2025

chore: add capture on viewed to playground #2517

Merged

pauldambra force-pushed the feat/add-on-viewed branch from 64f476d to a5ca692 Compare October 28, 2025 18:25

vercel bot deployed to Preview October 28, 2025 18:30 View deployment

pauldambra force-pushed the feat/add-on-viewed branch from a5ca692 to c4fa36a Compare October 28, 2025 18:39

pauldambra force-pushed the chore/rearrange-things-for-re-use branch from e4f12fb to 7caa257 Compare October 28, 2025 18:39

vercel bot deployed to Preview October 28, 2025 18:44 View deployment

hpouillot approved these changes Oct 29, 2025

View reviewed changes

pauldambra force-pushed the chore/rearrange-things-for-re-use branch 2 times, most recently from e00ce28 to bee42de Compare October 29, 2025 13:53

pauldambra force-pushed the feat/add-on-viewed branch from c4fa36a to 5faeebd Compare October 29, 2025 13:54

pauldambra changed the base branch from chore/rearrange-things-for-re-use to graphite-base/2516 October 29, 2025 14:01

pauldambra force-pushed the graphite-base/2516 branch from bee42de to 1a1e2cf Compare October 29, 2025 14:01

pauldambra force-pushed the feat/add-on-viewed branch from 5faeebd to 86dce8a Compare October 29, 2025 14:01

graphite-app bot changed the base branch from graphite-base/2516 to main October 29, 2025 14:01

feat: add a component to capture when wrapped components are in view …

3a160ea

…in the browser

pauldambra force-pushed the feat/add-on-viewed branch from 86dce8a to 3a160ea Compare October 29, 2025 14:01

pauldambra merged commit 3f9478c into main Oct 29, 2025
28 of 29 checks passed

pauldambra deleted the feat/add-on-viewed branch October 29, 2025 14:08

vercel bot deployed to Preview October 29, 2025 14:08 View deployment

Copilot AI mentioned this pull request Oct 29, 2025

Add PostHogCaptureOnViewed component documentation to React SDK PostHog/posthog.com#13435

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add a component to capture when wrapped components are in view in the browser #2516

feat: add a component to capture when wrapped components are in view in the browser #2516

pauldambra commented Oct 28, 2025 •

edited

Loading

Uh oh!

vercel bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

pauldambra commented Oct 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Oct 28, 2025 •

edited

Loading

Uh oh!

greptile-apps bot left a comment •

edited

Loading

Uh oh!

Uh oh!

pauldambra commented Oct 29, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat: add a component to capture when wrapped components are in view in the browser #2516

feat: add a component to capture when wrapped components are in view in the browser #2516

Conversation

pauldambra commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release info Sub-libraries affected

Libraries affected

Checklist

If releasing new changes

Uh oh!

vercel bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 No Changeset Found

How to add a changeset

Uh oh!

pauldambra commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Additional Comments (2)

Uh oh!

Uh oh!

pauldambra commented Oct 29, 2025

Merge activity

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

pauldambra commented Oct 28, 2025 •

edited

Loading

vercel bot commented Oct 28, 2025 •

edited

Loading

github-actions bot commented Oct 28, 2025 •

edited

Loading

pauldambra commented Oct 28, 2025 •

edited

Loading

github-actions bot commented Oct 28, 2025 •

edited

Loading

github-actions bot commented Oct 28, 2025 •

edited

Loading

greptile-apps bot left a comment •

edited

Loading