Add survey support for React Native #333
Conversation
|
@ian-craig thanks a lot. |
|
@marandaneto any chance you've had some time to take a look at this? Thanks! |
hello, yes, I started looking into it already, expect a thoughtful review today or Monday latest =) sorry the delay! |
| * @todo Where should this go, and should the result be cached? | ||
| * I can't find a public method in PostHog which does an authenticated fetch, | ||
| * so for now I've included the fetch here so it can access the api key. | ||
| */ |
There was a problem hiding this comment.
https://github.com/PostHog/posthog-js/blob/8d70a9ba4383b453ade94b71d7f45df4af2c892c/src/posthog-core.ts#L1294C25-L1321
i think those methods can be in the core package, here and reuse the fetch infrastructure from there, example here.
| const response = await this.fetch( | ||
| // PostHog Dashboard complains I'm using an old SDK version, I think because the ver query param isn't provided. | ||
| // TODO I've pulled a recent version from posthog-js, but this should be updated. | ||
| `${this.host}/api/surveys/?token=${this.apiKey}&ver=1.200.0`, |
There was a problem hiding this comment.
we can remove the version for now since the user-agent also has it
posthog-js-lite/posthog-core/src/index.ts
Line 563 in a36099a
There was a problem hiding this comment.
by doing this, the user agent is automatically added
| ) | ||
|
|
||
| if (response.status > 300) { | ||
| // TODO Best practice for handling this? |
There was a problem hiding this comment.
by doing this, error handling is builtin
| flex: 1, | ||
| alignItems: 'center', | ||
| justifyContent: 'flex-end', | ||
| marginVertical: 40, // TODO Plus safe area? |
|
|
||
| export function useActivatedSurveys(posthog: PostHog, surveys: Survey[]): ReadonlySet<string> { | ||
| const [activatedSurveys, setActivatedSurveys] = useState<ReadonlySet<string>>(new Set()) | ||
| //TODO Support Action activation |
There was a problem hiding this comment.
not planned for now, the goal is the basic features first.
| // Load surveys once | ||
| useEffect(() => { | ||
| posthog | ||
| .fetchSurveys() | ||
| .then(setSurveys) | ||
| .catch((error: unknown) => { | ||
| posthog.capture('PostHogSurveyProvider failed to fetch surveys', { error }) | ||
| }) | ||
| }, [posthog]) |
There was a problem hiding this comment.
This will likely change since we are adding a remote config API (WIP), and we'll only load surveys if there are surveys to be loaded.
That means we'll be calling another API when the SDK starts.
Problem
#110 posthog-react-native doesn't have built in support for surveys
Changes
This PR ports most of the survey logic from posthog-js into react native.
I've re-implemented most of the state handling and persistence to make it more appropriate for React Native and built on top of posthog-react-native.
See surveys/Readme.md for details on the hooks and config options I've added. I was originally going to post this as a separate library to start which is why I've split out
<PostHogSurveyProvider>etc., but we can probably merge some of that in to the main provider.Release info Sub-libraries affected
Bump level
Should all be backwards compatible, with the possible exception of adding a peer dependency for SVGs. We can look into what the best approach for this is.
Libraries affected
Changelog notes