Skip to content

Add flush policy docs #4480

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Mar 28, 2023
Merged
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
fe9642c
add flush policy docs
Mar 27, 2023
19b4360
add flush policy docs
Mar 27, 2023
2c2990e
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
55fca08
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
6182564
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
efe48cc
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
20bac16
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
0f70343
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
891785d
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
ccf6deb
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
a47916f
Update src/connections/sources/catalog/libraries/mobile/react-native/…
niallzato Mar 28, 2023
14b8d42
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
51984c2
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
464a5f6
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
f559e23
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
df231b1
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
44db5bb
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
38aff64
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
b070abd
Update src/connections/sources/catalog/libraries/mobile/react-native/…
rchinn1 Mar 28, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,76 @@ If you don't do this, the old client instance would still exist and retain the t

Ideally, you shouldn't have to use this method, and the Segment client should be initialized only once in the application lifecycle.

## Control upload with Flush Policies
To granularly control when Segment uploads events you can use `FlushPolicies`.
A Flush Policy defines the strategy for deciding when to flush. This can be on an interval, time of day, after receiving a certain number of events, or after receiving a particular event. This gives you more flexibility on when to send event to Segment.
Set Flush Policies in the configuration of the client:
```ts
const client = createClient({
// ...
flushPolicies: [
new CountFlushPolicy(5),
new TimerFlushPolicy(500),
new StartupFlushPolicy(),
],
});
```
You can set several policies at a time. When a flush occurs, it triggers an upload of the events, then resets the logic after every flush.
As a result, only the first policy to reach `shouldFlush` will trigger a flush. In the example above either the event count reaches 5 or the timer reaches 500ms, whatever comes first will trigger a flush.
Segment has several standard Flush Policies:
- `CountFlushPolicy` triggers when you reach a certain number of events
- `TimerFlushPolicy` triggers on an interval of milliseconds
- `StartupFlushPolicy` triggers on client startup only

### Adding or removing policies
One of the main advantages of Flush Policies is that you can add and remove policies on the fly. This is very powerful when you want to reduce or increase the amount of flushes.
For example you might want to disable flushes if you detect the user has no network:
```ts
import NetInfo from "@react-native-community/netinfo";
const policiesIfNetworkIsUp = [
new CountFlushPolicy(5),
new TimerFlushPolicy(500),
];
// Create our client with our policies by default
const client = createClient({
// ...
flushPolicies: policies,
});
// If Segment detects the user disconnect from the network, Segment removes all flush policies.
// That way the Segment client won't keep attempting to send events to Segment but will still
// store them for future upload.
// If the network comes back up, the Segment client adds the policies back.
const unsubscribe = NetInfo.addEventListener((state) => {
if (state.isConnected) {
client.addFlushPolicy(...policiesIfNetworkIsUp);
} else {
client.removeFlushPolicy(...policiesIfNetworkIsUp)
}
});
```
### Creating your own flush policies
You can create a custom Flush Policy special for your application needs by implementing the `FlushPolicy` interface. You can also extend the `FlushPolicyBase` class that already creates and handles the `shouldFlush` value reset.
A `FlushPolicy` only needs to implement two methods:
- `start()`: Executed when the flush policy is enabled and added to the client. This is a good place to start background operations, make async calls, configure things before execution
- `onEvent(event: SegmentEvent)`: Called on every event tracked by your client
- `reset()`: Called after a flush is triggered (either by your policy, by another policy, or manually)
Your policies also have a `shouldFlush` observable boolean value. When this is set to true the client attempts to upload events. Each policy should reset this value to `false` according to its own logic, although it's common to do it inside the `reset` method.
```ts
export class FlushOnScreenEventsPolicy extends FlushPolicyBase {
onEvent(event: SegmentEvent): void {
// Only flush when a screen even happens
if (event.type === EventType.ScreenEvent) {
this.shouldFlush.value = true;
}
}
reset(): void {
// Superclass will reset the shouldFlush value so that the next screen event triggers a flush again
// But you can also reset the value whenever, say another event comes in or after a timeout
super.reset();
}
}
```

## Automatic screen tracking
As sending a screen() event with each navigation action can get tiresome, it's best to track navigation globally. The implementation is different depending on which library you use for navigation. The two main navigation libraries for React Native are [React Navigation](https://reactnavigation.org/){:target="_blank"} and [React Native Navigation](https://wix.github.io/react-native-navigation/docs/before-you-start/){:target="_blank"}.

Expand Down