vybekiit 0.7.34 → 0.7.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. package/dist/bin.js +520 -9
  2. package/dist/global-skills/eas-app-stores/SKILL.md +2 -2
  3. package/dist/global-skills/eas-hosting/SKILL.md +2 -2
  4. package/dist/global-skills/eas-observe/SKILL.md +7 -15
  5. package/dist/global-skills/eas-observe/references/queries.md +51 -10
  6. package/dist/global-skills/eas-observe/references/setup.md +60 -7
  7. package/dist/global-skills/eas-simulator/SKILL.md +2 -2
  8. package/dist/global-skills/eas-simulator/references/run-your-app.md +2 -0
  9. package/dist/global-skills/eas-update/SKILL.md +2 -2
  10. package/dist/global-skills/eas-update-insights/SKILL.md +2 -2
  11. package/dist/global-skills/eas-workflows/SKILL.md +2 -2
  12. package/dist/global-skills/expo-animation/SKILL.md +2 -2
  13. package/dist/global-skills/expo-app-clip/SKILL.md +2 -2
  14. package/dist/global-skills/expo-brownfield/SKILL.md +2 -2
  15. package/dist/global-skills/expo-data-fetching/SKILL.md +2 -2
  16. package/dist/global-skills/expo-design-system/SKILL.md +2 -2
  17. package/dist/global-skills/expo-dev-client/SKILL.md +4 -2
  18. package/dist/global-skills/expo-dom/SKILL.md +2 -2
  19. package/dist/global-skills/expo-examples/SKILL.md +2 -2
  20. package/dist/global-skills/expo-migrate-module/SKILL.md +2 -2
  21. package/dist/global-skills/expo-module/SKILL.md +2 -2
  22. package/dist/global-skills/expo-native-ui/SKILL.md +2 -2
  23. package/dist/global-skills/expo-overview/SKILL.md +9 -4
  24. package/dist/global-skills/expo-overview/references/launch-without-dev-menu.md +24 -0
  25. package/dist/global-skills/expo-project-structure/SKILL.md +2 -2
  26. package/dist/global-skills/expo-router/SKILL.md +2 -2
  27. package/dist/global-skills/expo-ui/SKILL.md +2 -2
  28. package/dist/global-skills/expo-upgrade/SKILL.md +2 -2
  29. package/dist/global-skills/expo-web-to-native/SKILL.md +2 -2
  30. package/dist/global-skills/expo-web-to-native/references/verify-on-device.md +1 -1
  31. package/dist/global-skills/firebase-app-hosting-basics/SKILL.md +16 -3
  32. package/dist/global-skills/firebase-app-hosting-basics/references/cli_commands.md +10 -12
  33. package/dist/global-skills/firebase-app-hosting-basics/references/configuration.md +2 -1
  34. package/dist/global-skills/firebase-basics/SKILL.md +6 -4
  35. package/dist/global-skills/firebase-basics/references/web_setup.md +3 -3
  36. package/dist/global-skills/instrument-feature-flags/references/adding-feature-flag-code.md +81 -333
  37. package/dist/global-skills/instrument-feature-flags/references/android.md +19 -13
  38. package/dist/global-skills/instrument-feature-flags/references/api.md +17 -13
  39. package/dist/global-skills/instrument-feature-flags/references/best-practices.md +35 -35
  40. package/dist/global-skills/instrument-feature-flags/references/django.md +120 -72
  41. package/dist/global-skills/instrument-feature-flags/references/dotnet.md +48 -102
  42. package/dist/global-skills/instrument-feature-flags/references/elixir.md +4 -10
  43. package/dist/global-skills/instrument-feature-flags/references/flask.md +55 -39
  44. package/dist/global-skills/instrument-feature-flags/references/flutter.md +19 -13
  45. package/dist/global-skills/instrument-feature-flags/references/go.md +21 -13
  46. package/dist/global-skills/instrument-feature-flags/references/ios.md +19 -13
  47. package/dist/global-skills/instrument-feature-flags/references/java.md +4 -12
  48. package/dist/global-skills/instrument-feature-flags/references/laravel.md +18 -16
  49. package/dist/global-skills/instrument-feature-flags/references/next-js.md +44 -54
  50. package/dist/global-skills/instrument-feature-flags/references/nodejs.md +21 -13
  51. package/dist/global-skills/instrument-feature-flags/references/php.md +21 -13
  52. package/dist/global-skills/instrument-feature-flags/references/python.md +22 -14
  53. package/dist/global-skills/instrument-feature-flags/references/react-native.md +18 -13
  54. package/dist/global-skills/instrument-feature-flags/references/react.md +21 -14
  55. package/dist/global-skills/instrument-feature-flags/references/ruby-on-rails.md +31 -68
  56. package/dist/global-skills/instrument-feature-flags/references/ruby.md +21 -13
  57. package/dist/global-skills/instrument-feature-flags/references/rust.md +10 -34
  58. package/dist/global-skills/instrument-feature-flags/references/usage.md +94 -114
  59. package/dist/global-skills/instrument-feature-flags/references/web.md +21 -13
  60. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-android.md +7 -7
  61. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-expo.md +2 -2
  62. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-fastapi.md +1 -1
  63. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-flask.md +1 -1
  64. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-laravel.md +2 -2
  65. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-php.md +1 -1
  66. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-python.md +1 -1
  67. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-ruby.md +1 -1
  68. package/dist/global-skills/instrument-product-analytics/references/EXAMPLE-swift.md +4 -4
  69. package/dist/global-skills/instrument-product-analytics/references/android.md +64 -109
  70. package/dist/global-skills/instrument-product-analytics/references/angular.md +32 -28
  71. package/dist/global-skills/instrument-product-analytics/references/astro.md +29 -34
  72. package/dist/global-skills/instrument-product-analytics/references/configuration.md +27 -42
  73. package/dist/global-skills/instrument-product-analytics/references/django.md +120 -72
  74. package/dist/global-skills/instrument-product-analytics/references/dotnet.md +48 -102
  75. package/dist/global-skills/instrument-product-analytics/references/elixir.md +25 -50
  76. package/dist/global-skills/instrument-product-analytics/references/flask.md +55 -39
  77. package/dist/global-skills/instrument-product-analytics/references/flutter.md +94 -96
  78. package/dist/global-skills/instrument-product-analytics/references/go.md +39 -77
  79. package/dist/global-skills/instrument-product-analytics/references/identify-users.md +24 -26
  80. package/dist/global-skills/instrument-product-analytics/references/ios.md +22 -22
  81. package/dist/global-skills/instrument-product-analytics/references/laravel.md +18 -16
  82. package/dist/global-skills/instrument-product-analytics/references/next-js.md +44 -54
  83. package/dist/global-skills/instrument-product-analytics/references/nuxt-js-3-6.md +32 -34
  84. package/dist/global-skills/instrument-product-analytics/references/nuxt-js.md +36 -36
  85. package/dist/global-skills/instrument-product-analytics/references/php.md +42 -87
  86. package/dist/global-skills/instrument-product-analytics/references/posthog-python.md +15 -12
  87. package/dist/global-skills/instrument-product-analytics/references/python.md +106 -154
  88. package/dist/global-skills/instrument-product-analytics/references/react-native.md +97 -176
  89. package/dist/global-skills/instrument-product-analytics/references/react-router-v6.md +29 -40
  90. package/dist/global-skills/instrument-product-analytics/references/react-router-v7-data-mode.md +29 -38
  91. package/dist/global-skills/instrument-product-analytics/references/react-router-v7-declarative-mode.md +29 -40
  92. package/dist/global-skills/instrument-product-analytics/references/react-router-v7-framework-mode.md +32 -37
  93. package/dist/global-skills/instrument-product-analytics/references/ruby-on-rails.md +31 -68
  94. package/dist/global-skills/instrument-product-analytics/references/ruby.md +40 -96
  95. package/dist/global-skills/instrument-product-analytics/references/svelte.md +34 -34
  96. package/dist/global-skills/instrument-product-analytics/references/tanstack-start.md +19 -19
  97. package/dist/global-skills/instrument-product-analytics/references/usage.md +94 -114
  98. package/dist/global-skills/instrument-product-analytics/references/vue-js.md +33 -45
  99. package/dist/global-skills/mongodb-search-and-ai/SKILL.md +40 -22
  100. package/dist/global-skills/mongodb-search-and-ai/references/automated-embedding.md +8 -2
  101. package/dist/global-skills/mongodb-search-and-ai/references/quick-start.md +725 -0
  102. package/dist/global-skills/mongodb-search-and-ai/scripts/quickstart_complete.py +386 -0
  103. package/dist/global-skills/neon/references/claimable-neon.md +2 -0
  104. package/dist/global-skills/neon-realtime/references/queries.md +2 -2
  105. package/dist/global-skills/resend/SKILL.md +1 -1
  106. package/dist/global-skills/resend/references/inboxes.md +49 -21
  107. package/dist/global-skills/resend/references/webhooks.md +1 -1
  108. package/dist/global-skills/stripe-best-practices/SKILL.md +1 -1
  109. package/dist/global-skills/stripe-best-practices/references/connect.md +1 -1
  110. package/dist/global-skills/stripe-best-practices/references/security.md +9 -9
  111. package/dist/global-skills/vybekiitReferences/backend/AGENTS.md +1 -1
  112. package/dist/global-skills/vybekiitReferences/backend/agent/goal-routes.json +303 -18
  113. package/dist/global-skills/vybekiitReferences/extension/AGENTS.md +1 -1
  114. package/dist/global-skills/vybekiitReferences/extension/agent/goal-routes.json +352 -18
  115. package/dist/global-skills/vybekiitReferences/mobile/AGENTS.md +1 -1
  116. package/dist/global-skills/vybekiitReferences/mobile/agent/goal-routes.json +413 -22
  117. package/dist/global-skills/vybekiitReferences/spa/AGENTS.md +1 -1
  118. package/dist/global-skills/vybekiitReferences/spa/agent/goal-routes.json +391 -21
  119. package/dist/global-skills/vybekiitReferences/web/AGENTS.md +14 -2
  120. package/dist/global-skills/vybekiitReferences/web/agent/goal-routes.json +490 -32
  121. package/package.json +8 -8
@@ -2,7 +2,24 @@
2
2
 
3
3
  # React Router V6
4
4
 
5
- This guide walks you through setting up PostHog for React Router V6. If you're using React Router v7, find the guide for that mode in the [React Router page](/docs/libraries/react-router.md). If you're using React with another framework, go to the [React integration guide](/docs/libraries/react.md).
5
+ Canonical URL: https://posthog.com/docs/libraries/react-router/react-router-v6
6
+
7
+ > **Cloud region:** This page uses US Cloud hosts. For an EU Cloud project, use `https://eu.i.posthog.com` instead of `https://us.i.posthog.com` (ingestion host), and use `https://eu.posthog.com` instead of `https://us.posthog.com` or `https://app.posthog.com` (app host for links).
8
+
9
+ ## On this page
10
+
11
+ - [Install client-side SDKs](#install-client-side-sdks)
12
+ - [Add your environment variables](#add-your-environment-variables)
13
+ - [Add the PostHogProvider to your app](#add-the-posthogprovider-to-your-app)
14
+ - [Verify client-side events are captured](#verify-client-side-events-are-captured)
15
+ - [Access PostHog methods](#access-posthog-methods)
16
+ - [Identify your user](#identify-your-user)
17
+ - [Create an error boundary](#create-an-error-boundary)
18
+ - [Tracking element visibility](#tracking-element-visibility)
19
+ - [Set up server-side analytics](#set-up-server-side-analytics)
20
+ - [Next steps](#next-steps)
21
+
22
+ This guide walks you through setting up PostHog for React Router V6. If you're using React Router v7, find the guide for that mode in the [React Router page](https://posthog.com/docs/libraries/react-router.md). If you're using React with another framework, go to the [React integration guide](https://posthog.com/docs/libraries/react.md).
6
23
 
7
24
  1. 1
8
25
 
@@ -44,7 +61,7 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
44
61
  > worker-src 'self' blob: data:;
45
62
  > ```
46
63
  >
47
- > `script-src` covers the snippet and the lazy-loaded bundles, `connect-src` covers event ingestion and feature flags, and `worker-src` covers session replay. The [toolbar needs a few more](/docs/advanced/content-security-policy.md), or use a [reverse proxy](/docs/advanced/proxy.md) so everything is first-party. Failing to do so causes silent failures where `capture` and `identify` calls never send, so the integration looks complete while zero events arrive. Remember `connect-src` falls back to `default-src`, so `default-src 'self'` blocks event delivery even when the script itself is bundled.
64
+ > `script-src` covers the snippet and the lazy-loaded bundles, `connect-src` covers event ingestion and feature flags, and `worker-src` covers session replay. The [toolbar needs a few more](https://posthog.com/docs/advanced/content-security-policy.md), or use a [reverse proxy](https://posthog.com/docs/advanced/proxy.md) so everything is first-party. Failing to do so causes silent failures where `capture` and `identify` calls never send, so the integration looks complete while zero events arrive. Remember `connect-src` falls back to `default-src`, so `default-src 'self'` blocks event delivery even when the script itself is bundled.
48
65
 
49
66
  2. 2
50
67
 
@@ -105,14 +122,12 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
105
122
 
106
123
  This initializes PostHog and passes it to your app through the `PostHogProvider` context.
107
124
 
108
- TypeError: Cannot read properties of undefined
125
+ **TypeError: Cannot read properties of undefined**
109
126
 
110
127
  If you see the error `TypeError: Cannot read properties of undefined (reading '...')` this is likely because you tried to call a posthog function when posthog was not initialized (such as during the initial render). On purpose, we still render the children even if PostHog is not initialized so that your app still loads even if PostHog can't load.
111
128
 
112
129
  To fix this error, add a check that posthog has been initialized such as:
113
130
 
114
- React
115
-
116
131
  ```jsx
117
132
  useEffect(() => {
118
133
  posthog?.capture('test') // using optional chaining (recommended)
@@ -131,12 +146,10 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
131
146
 
132
147
  *Confirm that you can capture client-side events and see them in your PostHog project*
133
148
 
134
- At this point, you should be able to capture client-side events and see them in your PostHog project. This includes basic events like page views and button clicks that are [autocaptured](/docs/product-analytics/autocapture.md).
149
+ At this point, you should be able to capture client-side events and see them in your PostHog project. This includes basic events like page views and button clicks that are [autocaptured](https://posthog.com/docs/product-analytics/autocapture.md).
135
150
 
136
151
  You can also try to capture a custom event to verify it's working. You can access PostHog in any component using the `usePostHog` hook.
137
152
 
138
- TSX
139
-
140
153
  ```jsx
141
154
  import { usePostHog } from '@posthog/react'
142
155
 
@@ -156,8 +169,6 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
156
169
 
157
170
  On the client-side, you can access the PostHog client using the `usePostHog` hook. This hook returns the initialized PostHog client, which you can use to call PostHog methods. For example:
158
171
 
159
- TSX
160
-
161
172
  ```jsx
162
173
  import { usePostHog } from '@posthog/react'
163
174
 
@@ -167,7 +178,7 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
167
178
  }
168
179
  ```
169
180
 
170
- For a complete list of available methods, see the [posthog-js documentation](/docs/libraries/js.md).
181
+ For a complete list of available methods, see the [posthog-js documentation](https://posthog.com/docs/libraries/js.md).
171
182
 
172
183
  6. 5
173
184
 
@@ -179,8 +190,6 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
179
190
 
180
191
  Generally, you identify users when they log in or when they input some identifiable information (e.g. email, name, etc.). You can identify users by calling the `identify` method on the PostHog client:
181
192
 
182
- TSX
183
-
184
193
  ```jsx
185
194
  export default function Login() {
186
195
  const { user, login } = useAuth();
@@ -218,8 +227,6 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
218
227
 
219
228
  PostHog can capture exceptions thrown in your app through an error boundary. PostHog provides a `PostHogErrorBoundary` component that you can use to capture exceptions. You can wrap your app with this component to capture exceptions.
220
229
 
221
- TSX
222
-
223
230
  ```jsx
224
231
  ReactDOM.createRoot(root).render(
225
232
  <StrictMode>
@@ -252,8 +259,6 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
252
259
 
253
260
  **Basic usage:**
254
261
 
255
- React
256
-
257
262
  ```jsx
258
263
  import { PostHogCaptureOnViewed } from '@posthog/react'
259
264
 
@@ -270,8 +275,6 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
270
275
 
271
276
  You can include additional properties with the event to provide more context:
272
277
 
273
- React
274
-
275
278
  ```jsx
276
279
  <PostHogCaptureOnViewed
277
280
  name="product-card"
@@ -289,8 +292,6 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
289
292
 
290
293
  Use `trackAllChildren` to track each child element separately. This is useful for galleries or lists where you want to know which specific items were viewed:
291
294
 
292
- React
293
-
294
295
  ```jsx
295
296
  <PostHogCaptureOnViewed
296
297
  name="product-gallery"
@@ -309,8 +310,6 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
309
310
 
310
311
  You can customize when elements are considered "viewed" by passing options to the `IntersectionObserver`:
311
312
 
312
- React
313
-
314
313
  ```jsx
315
314
  <PostHogCaptureOnViewed
316
315
  name="footer"
@@ -331,12 +330,10 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
331
330
 
332
331
  Recommended
333
332
 
334
- Now that you've set up PostHog for React Router V7 in declarative mode, you can continue to set up server-side analytics. You can find our other SDKs in the [SDKs page](/docs/libraries.md).
333
+ Now that you've set up PostHog for React Router V7 in declarative mode, you can continue to set up server-side analytics. You can find our other SDKs in the [SDKs page](https://posthog.com/docs/libraries.md).
335
334
 
336
335
  To help PostHog track your user sessions across the client and server, you'll need to add the `tracing_headers: ['your-backend-hostname1.com', 'your-backend-hostname2.com', ...]` option to your PostHog initialization:
337
336
 
338
- TSX
339
-
340
337
  ```jsx
341
338
  posthog.init(import.meta.env.VITE_POSTHOG_PROJECT_TOKEN, {
342
339
  api_host: import.meta.env.VITE_POSTHOG_HOST,
@@ -357,17 +354,9 @@ This guide walks you through setting up PostHog for React Router V6. If you're u
357
354
 
358
355
  To get the most out of PostHog, you should familiarize yourself with the following:
359
356
 
360
- - [PostHog Web SDK docs](/docs/libraries/js.md): Learn more about the PostHog Web SDK and how to use it on the client-side.
361
- - [PostHog Node SDK docs](/docs/libraries/node.md): Learn more about the PostHog Node SDK and how to use it on the server-side.
362
- - [Identify users](/docs/product-analytics/identify.md): Learn more about how to identify users in your app.
363
- - [Group analytics](/docs/product-analytics/group-analytics.md): Learn more about how to use group analytics in your app.
364
- - [PostHog AI](/docs/posthog-ai.md): After capturing events, use PostHog AI to help you understand your data and build insights.
365
- - [Feature flags and experiments](/docs/libraries/react.md#feature-flags): Feature flag and experiment setup is the same as React. You can find more details in the React integration guide.
366
-
367
- ### Still have questions?
368
-
369
- Ask PostHog AI
370
-
371
- ### Was this page useful?
372
-
373
- HelpfulCould be better
357
+ - [PostHog Web SDK docs](https://posthog.com/docs/libraries/js.md): Learn more about the PostHog Web SDK and how to use it on the client-side.
358
+ - [PostHog Node SDK docs](https://posthog.com/docs/libraries/node.md): Learn more about the PostHog Node SDK and how to use it on the server-side.
359
+ - [Identify users](https://posthog.com/docs/product-analytics/identify.md): Learn more about how to identify users in your app.
360
+ - [Group analytics](https://posthog.com/docs/product-analytics/group-analytics.md): Learn more about how to use group analytics in your app.
361
+ - [PostHog AI](https://posthog.com/docs/posthog-ai.md): After capturing events, use PostHog AI to help you understand your data and build insights.
362
+ - [Feature flags and experiments](https://posthog.com/docs/libraries/react.md#feature-flags): Feature flag and experiment setup is the same as React. You can find more details in the React integration guide.
@@ -2,7 +2,24 @@
2
2
 
3
3
  # React Router V7 data mode
4
4
 
5
- This guide walks you through setting up PostHog for React Router V7 in data mode. If you're using React Router in another mode, find the guide for that mode in the [React Router page](/docs/libraries/react-router.md). If you're using React with another framework, go to the [React integration guide](/docs/libraries/react.md).
5
+ Canonical URL: https://posthog.com/docs/libraries/react-router/react-router-v7-data-mode
6
+
7
+ > **Cloud region:** This page uses US Cloud hosts. For an EU Cloud project, use `https://eu.i.posthog.com` instead of `https://us.i.posthog.com` (ingestion host), and use `https://eu.posthog.com` instead of `https://us.posthog.com` or `https://app.posthog.com` (app host for links).
8
+
9
+ ## On this page
10
+
11
+ - [Install client-side SDKs](#install-client-side-sdks)
12
+ - [Add your environment variables](#add-your-environment-variables)
13
+ - [Add the PostHogProvider to your app](#add-the-posthogprovider-to-your-app)
14
+ - [Verify client-side events are captured](#verify-client-side-events-are-captured)
15
+ - [Access PostHog methods](#access-posthog-methods)
16
+ - [Identify your user](#identify-your-user)
17
+ - [Create an error boundary](#create-an-error-boundary)
18
+ - [Tracking element visibility](#tracking-element-visibility)
19
+ - [Set up server-side analytics](#set-up-server-side-analytics)
20
+ - [Next steps](#next-steps)
21
+
22
+ This guide walks you through setting up PostHog for React Router V7 in data mode. If you're using React Router in another mode, find the guide for that mode in the [React Router page](https://posthog.com/docs/libraries/react-router.md). If you're using React with another framework, go to the [React integration guide](https://posthog.com/docs/libraries/react.md).
6
23
 
7
24
  1. 1
8
25
 
@@ -44,7 +61,7 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
44
61
  > worker-src 'self' blob: data:;
45
62
  > ```
46
63
  >
47
- > `script-src` covers the snippet and the lazy-loaded bundles, `connect-src` covers event ingestion and feature flags, and `worker-src` covers session replay. The [toolbar needs a few more](/docs/advanced/content-security-policy.md), or use a [reverse proxy](/docs/advanced/proxy.md) so everything is first-party. Failing to do so causes silent failures where `capture` and `identify` calls never send, so the integration looks complete while zero events arrive. Remember `connect-src` falls back to `default-src`, so `default-src 'self'` blocks event delivery even when the script itself is bundled.
64
+ > `script-src` covers the snippet and the lazy-loaded bundles, `connect-src` covers event ingestion and feature flags, and `worker-src` covers session replay. The [toolbar needs a few more](https://posthog.com/docs/advanced/content-security-policy.md), or use a [reverse proxy](https://posthog.com/docs/advanced/proxy.md) so everything is first-party. Failing to do so causes silent failures where `capture` and `identify` calls never send, so the integration looks complete while zero events arrive. Remember `connect-src` falls back to `default-src`, so `default-src 'self'` blocks event delivery even when the script itself is bundled.
48
65
 
49
66
  2. 2
50
67
 
@@ -99,14 +116,12 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
99
116
 
100
117
  This initializes PostHog and passes it to your app through the `PostHogProvider` context.
101
118
 
102
- TypeError: Cannot read properties of undefined
119
+ **TypeError: Cannot read properties of undefined**
103
120
 
104
121
  If you see the error `TypeError: Cannot read properties of undefined (reading '...')` this is likely because you tried to call a posthog function when posthog was not initialized (such as during the initial render). On purpose, we still render the children even if PostHog is not initialized so that your app still loads even if PostHog can't load.
105
122
 
106
123
  To fix this error, add a check that posthog has been initialized such as:
107
124
 
108
- React
109
-
110
125
  ```jsx
111
126
  useEffect(() => {
112
127
  posthog?.capture('test') // using optional chaining (recommended)
@@ -125,12 +140,10 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
125
140
 
126
141
  *Confirm that you can capture client-side events and see them in your PostHog project*
127
142
 
128
- At this point, you should be able to capture client-side events and see them in your PostHog project. This includes basic events like page views and button clicks that are [autocaptured](/docs/product-analytics/autocapture.md).
143
+ At this point, you should be able to capture client-side events and see them in your PostHog project. This includes basic events like page views and button clicks that are [autocaptured](https://posthog.com/docs/product-analytics/autocapture.md).
129
144
 
130
145
  You can also try to capture a custom event to verify it's working. You can access PostHog in any component using the `usePostHog` hook.
131
146
 
132
- TSX
133
-
134
147
  ```jsx
135
148
  import { usePostHog } from '@posthog/react'
136
149
 
@@ -150,8 +163,6 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
150
163
 
151
164
  On the client-side, you can access the PostHog client using the `usePostHog` hook. This hook returns the initialized PostHog client, which you can use to call PostHog methods. For example:
152
165
 
153
- TSX
154
-
155
166
  ```jsx
156
167
  import { usePostHog } from '@posthog/react'
157
168
 
@@ -161,7 +172,7 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
161
172
  }
162
173
  ```
163
174
 
164
- For a complete list of available methods, see the [posthog-js documentation](/docs/libraries/js.md).
175
+ For a complete list of available methods, see the [posthog-js documentation](https://posthog.com/docs/libraries/js.md).
165
176
 
166
177
  6. 5
167
178
 
@@ -173,8 +184,6 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
173
184
 
174
185
  Generally, you identify users when they log in or when they input some identifiable information (e.g. email, name, etc.). You can identify users by calling the `identify` method on the PostHog client:
175
186
 
176
- TSX
177
-
178
187
  ```jsx
179
188
  export default function Login() {
180
189
  const { user, login } = useAuth();
@@ -243,8 +252,6 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
243
252
 
244
253
  **Basic usage:**
245
254
 
246
- React
247
-
248
255
  ```jsx
249
256
  import { PostHogCaptureOnViewed } from '@posthog/react'
250
257
 
@@ -261,8 +268,6 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
261
268
 
262
269
  You can include additional properties with the event to provide more context:
263
270
 
264
- React
265
-
266
271
  ```jsx
267
272
  <PostHogCaptureOnViewed
268
273
  name="product-card"
@@ -280,8 +285,6 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
280
285
 
281
286
  Use `trackAllChildren` to track each child element separately. This is useful for galleries or lists where you want to know which specific items were viewed:
282
287
 
283
- React
284
-
285
288
  ```jsx
286
289
  <PostHogCaptureOnViewed
287
290
  name="product-gallery"
@@ -300,8 +303,6 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
300
303
 
301
304
  You can customize when elements are considered "viewed" by passing options to the `IntersectionObserver`:
302
305
 
303
- React
304
-
305
306
  ```jsx
306
307
  <PostHogCaptureOnViewed
307
308
  name="footer"
@@ -322,12 +323,10 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
322
323
 
323
324
  Recommended
324
325
 
325
- Now that you've set up PostHog for React Router V7 in data mode, you can continue to set up server-side analytics. You can find our other SDKs in the [SDKs page](/docs/libraries.md).
326
+ Now that you've set up PostHog for React Router V7 in data mode, you can continue to set up server-side analytics. You can find our other SDKs in the [SDKs page](https://posthog.com/docs/libraries.md).
326
327
 
327
328
  To help PostHog track your user sessions across the client and server, you'll need to add the `tracing_headers: ['your-backend-hostname1.com', 'your-backend-hostname2.com', ...]` option to your PostHog initialization:
328
329
 
329
- TSX
330
-
331
330
  ```jsx
332
331
  posthog.init(import.meta.env.VITE_POSTHOG_PROJECT_TOKEN, {
333
332
  api_host: import.meta.env.VITE_POSTHOG_HOST,
@@ -348,17 +347,9 @@ This guide walks you through setting up PostHog for React Router V7 in data mode
348
347
 
349
348
  To get the most out of PostHog, you should familiarize yourself with the following:
350
349
 
351
- - [PostHog Web SDK docs](/docs/libraries/js.md): Learn more about the PostHog Web SDK and how to use it on the client-side.
352
- - [PostHog Node SDK docs](/docs/libraries/node.md): Learn more about the PostHog Node SDK and how to use it on the server-side.
353
- - [Identify users](/docs/product-analytics/identify.md): Learn more about how to identify users in your app.
354
- - [Group analytics](/docs/product-analytics/group-analytics.md): Learn more about how to use group analytics in your app.
355
- - [PostHog AI](/docs/posthog-ai.md): After capturing events, use PostHog AI to help you understand your data and build insights.
356
- - [Feature flags and experiments](/docs/libraries/react.md#feature-flags): Feature flag and experiment setup is the same as React. You can find more details in the React integration guide.
357
-
358
- ### Still have questions?
359
-
360
- Ask PostHog AI
361
-
362
- ### Was this page useful?
363
-
364
- HelpfulCould be better
350
+ - [PostHog Web SDK docs](https://posthog.com/docs/libraries/js.md): Learn more about the PostHog Web SDK and how to use it on the client-side.
351
+ - [PostHog Node SDK docs](https://posthog.com/docs/libraries/node.md): Learn more about the PostHog Node SDK and how to use it on the server-side.
352
+ - [Identify users](https://posthog.com/docs/product-analytics/identify.md): Learn more about how to identify users in your app.
353
+ - [Group analytics](https://posthog.com/docs/product-analytics/group-analytics.md): Learn more about how to use group analytics in your app.
354
+ - [PostHog AI](https://posthog.com/docs/posthog-ai.md): After capturing events, use PostHog AI to help you understand your data and build insights.
355
+ - [Feature flags and experiments](https://posthog.com/docs/libraries/react.md#feature-flags): Feature flag and experiment setup is the same as React. You can find more details in the React integration guide.
@@ -2,7 +2,24 @@
2
2
 
3
3
  # React Router V7 declarative mode
4
4
 
5
- This guide walks you through setting up PostHog for React Router V7 in declarative mode. If you're using React Router in another mode, find the guide for that mode in the [React Router page](/docs/libraries/react-router.md). If you're using React with another framework, go to the [React integration guide](/docs/libraries/react.md).
5
+ Canonical URL: https://posthog.com/docs/libraries/react-router/react-router-v7-declarative-mode
6
+
7
+ > **Cloud region:** This page uses US Cloud hosts. For an EU Cloud project, use `https://eu.i.posthog.com` instead of `https://us.i.posthog.com` (ingestion host), and use `https://eu.posthog.com` instead of `https://us.posthog.com` or `https://app.posthog.com` (app host for links).
8
+
9
+ ## On this page
10
+
11
+ - [Install client-side SDKs](#install-client-side-sdks)
12
+ - [Add your environment variables](#add-your-environment-variables)
13
+ - [Add the PostHogProvider to your app](#add-the-posthogprovider-to-your-app)
14
+ - [Verify client-side events are captured](#verify-client-side-events-are-captured)
15
+ - [Access PostHog methods](#access-posthog-methods)
16
+ - [Identify your user](#identify-your-user)
17
+ - [Create an error boundary](#create-an-error-boundary)
18
+ - [Tracking element visibility](#tracking-element-visibility)
19
+ - [Set up server-side analytics](#set-up-server-side-analytics)
20
+ - [Next steps](#next-steps)
21
+
22
+ This guide walks you through setting up PostHog for React Router V7 in declarative mode. If you're using React Router in another mode, find the guide for that mode in the [React Router page](https://posthog.com/docs/libraries/react-router.md). If you're using React with another framework, go to the [React integration guide](https://posthog.com/docs/libraries/react.md).
6
23
 
7
24
  1. 1
8
25
 
@@ -44,7 +61,7 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
44
61
  > worker-src 'self' blob: data:;
45
62
  > ```
46
63
  >
47
- > `script-src` covers the snippet and the lazy-loaded bundles, `connect-src` covers event ingestion and feature flags, and `worker-src` covers session replay. The [toolbar needs a few more](/docs/advanced/content-security-policy.md), or use a [reverse proxy](/docs/advanced/proxy.md) so everything is first-party. Failing to do so causes silent failures where `capture` and `identify` calls never send, so the integration looks complete while zero events arrive. Remember `connect-src` falls back to `default-src`, so `default-src 'self'` blocks event delivery even when the script itself is bundled.
64
+ > `script-src` covers the snippet and the lazy-loaded bundles, `connect-src` covers event ingestion and feature flags, and `worker-src` covers session replay. The [toolbar needs a few more](https://posthog.com/docs/advanced/content-security-policy.md), or use a [reverse proxy](https://posthog.com/docs/advanced/proxy.md) so everything is first-party. Failing to do so causes silent failures where `capture` and `identify` calls never send, so the integration looks complete while zero events arrive. Remember `connect-src` falls back to `default-src`, so `default-src 'self'` blocks event delivery even when the script itself is bundled.
48
65
 
49
66
  2. 2
50
67
 
@@ -105,14 +122,12 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
105
122
 
106
123
  This initializes PostHog and passes it to your app through the `PostHogProvider` context.
107
124
 
108
- TypeError: Cannot read properties of undefined
125
+ **TypeError: Cannot read properties of undefined**
109
126
 
110
127
  If you see the error `TypeError: Cannot read properties of undefined (reading '...')` this is likely because you tried to call a posthog function when posthog was not initialized (such as during the initial render). On purpose, we still render the children even if PostHog is not initialized so that your app still loads even if PostHog can't load.
111
128
 
112
129
  To fix this error, add a check that posthog has been initialized such as:
113
130
 
114
- React
115
-
116
131
  ```jsx
117
132
  useEffect(() => {
118
133
  posthog?.capture('test') // using optional chaining (recommended)
@@ -131,12 +146,10 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
131
146
 
132
147
  *Confirm that you can capture client-side events and see them in your PostHog project*
133
148
 
134
- At this point, you should be able to capture client-side events and see them in your PostHog project. This includes basic events like page views and button clicks that are [autocaptured](/docs/product-analytics/autocapture.md).
149
+ At this point, you should be able to capture client-side events and see them in your PostHog project. This includes basic events like page views and button clicks that are [autocaptured](https://posthog.com/docs/product-analytics/autocapture.md).
135
150
 
136
151
  You can also try to capture a custom event to verify it's working. You can access PostHog in any component using the `usePostHog` hook.
137
152
 
138
- TSX
139
-
140
153
  ```jsx
141
154
  import { usePostHog } from '@posthog/react'
142
155
 
@@ -156,8 +169,6 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
156
169
 
157
170
  On the client-side, you can access the PostHog client using the `usePostHog` hook. This hook returns the initialized PostHog client, which you can use to call PostHog methods. For example:
158
171
 
159
- TSX
160
-
161
172
  ```jsx
162
173
  import { usePostHog } from '@posthog/react'
163
174
 
@@ -167,7 +178,7 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
167
178
  }
168
179
  ```
169
180
 
170
- For a complete list of available methods, see the [posthog-js documentation](/docs/libraries/js.md).
181
+ For a complete list of available methods, see the [posthog-js documentation](https://posthog.com/docs/libraries/js.md).
171
182
 
172
183
  6. 5
173
184
 
@@ -179,8 +190,6 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
179
190
 
180
191
  Generally, you identify users when they log in or when they input some identifiable information (e.g. email, name, etc.). You can identify users by calling the `identify` method on the PostHog client:
181
192
 
182
- TSX
183
-
184
193
  ```jsx
185
194
  export default function Login() {
186
195
  const { user, login } = useAuth();
@@ -218,8 +227,6 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
218
227
 
219
228
  PostHog can capture exceptions thrown in your app through an error boundary. PostHog provides a `PostHogErrorBoundary` component that you can use to capture exceptions. You can wrap your app with this component to capture exceptions.
220
229
 
221
- TSX
222
-
223
230
  ```jsx
224
231
  ReactDOM.createRoot(root).render(
225
232
  <StrictMode>
@@ -252,8 +259,6 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
252
259
 
253
260
  **Basic usage:**
254
261
 
255
- React
256
-
257
262
  ```jsx
258
263
  import { PostHogCaptureOnViewed } from '@posthog/react'
259
264
 
@@ -270,8 +275,6 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
270
275
 
271
276
  You can include additional properties with the event to provide more context:
272
277
 
273
- React
274
-
275
278
  ```jsx
276
279
  <PostHogCaptureOnViewed
277
280
  name="product-card"
@@ -289,8 +292,6 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
289
292
 
290
293
  Use `trackAllChildren` to track each child element separately. This is useful for galleries or lists where you want to know which specific items were viewed:
291
294
 
292
- React
293
-
294
295
  ```jsx
295
296
  <PostHogCaptureOnViewed
296
297
  name="product-gallery"
@@ -309,8 +310,6 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
309
310
 
310
311
  You can customize when elements are considered "viewed" by passing options to the `IntersectionObserver`:
311
312
 
312
- React
313
-
314
313
  ```jsx
315
314
  <PostHogCaptureOnViewed
316
315
  name="footer"
@@ -331,12 +330,10 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
331
330
 
332
331
  Recommended
333
332
 
334
- Now that you've set up PostHog for React Router V7 in declarative mode, you can continue to set up server-side analytics. You can find our other SDKs in the [SDKs page](/docs/libraries.md).
333
+ Now that you've set up PostHog for React Router V7 in declarative mode, you can continue to set up server-side analytics. You can find our other SDKs in the [SDKs page](https://posthog.com/docs/libraries.md).
335
334
 
336
335
  To help PostHog track your user sessions across the client and server, you'll need to add the `tracing_headers: ['your-backend-hostname1.com', 'your-backend-hostname2.com', ...]` option to your PostHog initialization:
337
336
 
338
- TSX
339
-
340
337
  ```jsx
341
338
  posthog.init(import.meta.env.VITE_POSTHOG_PROJECT_TOKEN, {
342
339
  api_host: import.meta.env.VITE_POSTHOG_HOST,
@@ -357,17 +354,9 @@ This guide walks you through setting up PostHog for React Router V7 in declarati
357
354
 
358
355
  To get the most out of PostHog, you should familiarize yourself with the following:
359
356
 
360
- - [PostHog Web SDK docs](/docs/libraries/js.md): Learn more about the PostHog Web SDK and how to use it on the client-side.
361
- - [PostHog Node SDK docs](/docs/libraries/node.md): Learn more about the PostHog Node SDK and how to use it on the server-side.
362
- - [Identify users](/docs/product-analytics/identify.md): Learn more about how to identify users in your app.
363
- - [Group analytics](/docs/product-analytics/group-analytics.md): Learn more about how to use group analytics in your app.
364
- - [PostHog AI](/docs/posthog-ai.md): After capturing events, use PostHog AI to help you understand your data and build insights.
365
- - [Feature flags and experiments](/docs/libraries/react.md#feature-flags): Feature flag and experiment setup is the same as React. You can find more details in the React integration guide.
366
-
367
- ### Still have questions?
368
-
369
- Ask PostHog AI
370
-
371
- ### Was this page useful?
372
-
373
- HelpfulCould be better
357
+ - [PostHog Web SDK docs](https://posthog.com/docs/libraries/js.md): Learn more about the PostHog Web SDK and how to use it on the client-side.
358
+ - [PostHog Node SDK docs](https://posthog.com/docs/libraries/node.md): Learn more about the PostHog Node SDK and how to use it on the server-side.
359
+ - [Identify users](https://posthog.com/docs/product-analytics/identify.md): Learn more about how to identify users in your app.
360
+ - [Group analytics](https://posthog.com/docs/product-analytics/group-analytics.md): Learn more about how to use group analytics in your app.
361
+ - [PostHog AI](https://posthog.com/docs/posthog-ai.md): After capturing events, use PostHog AI to help you understand your data and build insights.
362
+ - [Feature flags and experiments](https://posthog.com/docs/libraries/react.md#feature-flags): Feature flag and experiment setup is the same as React. You can find more details in the React integration guide.