docs: add tracking sections (#1068)

- adds tracking to all relevant READMEs

---------

Signed-off-by: Todd Baert <todd.baert@dynatrace.com>
This commit is contained in:
Todd Baert 2024-10-29 13:12:55 -04:00 committed by GitHub
parent 62f7668959
commit e131faffad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 69 additions and 15 deletions

View File

@ -54,6 +54,7 @@ In addition to the feature provided by the [web sdk](https://openfeature.dev/doc
- [Re-rendering with Context Changes](#re-rendering-with-context-changes) - [Re-rendering with Context Changes](#re-rendering-with-context-changes)
- [Re-rendering with Flag Configuration Changes](#re-rendering-with-flag-configuration-changes) - [Re-rendering with Flag Configuration Changes](#re-rendering-with-flag-configuration-changes)
- [Suspense Support](#suspense-support) - [Suspense Support](#suspense-support)
- [Tracking](#tracking)
- [Testing](#testing) - [Testing](#testing)
- [FAQ and troubleshooting](#faq-and-troubleshooting) - [FAQ and troubleshooting](#faq-and-troubleshooting)
- [Resources](#resources) - [Resources](#resources)
@ -132,7 +133,7 @@ function App() {
#### Evaluation hooks #### Evaluation hooks
Within the provider, you can use the various evaluation hooks to evaluate flags. Within the provider, you can use the various evaluation hooks to evaluate flags.
```tsx ```tsx
function Page() { function Page() {
@ -236,7 +237,7 @@ Note that if your provider doesn't support updates, this configuration has no im
#### Suspense Support #### Suspense Support
> [!NOTE] > [!NOTE]
> React suspense is an experimental feature and subject to change in future versions. > React suspense is an experimental feature and subject to change in future versions.
@ -274,11 +275,32 @@ function Fallback() {
// component to render before READY. // component to render before READY.
return <p>Waiting for provider to be ready...</p>; return <p>Waiting for provider to be ready...</p>;
} }
``` ```
This can be disabled in the hook options (or in the [OpenFeatureProvider](#openfeatureprovider-context-provider)). This can be disabled in the hook options (or in the [OpenFeatureProvider](#openfeatureprovider-context-provider)).
#### Tracking
The tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations.
This is essential for robust experimentation powered by feature flags.
For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](#hooks) or [provider](#providers) can be associated with telemetry reported in the client's `track` function.
The React SDK includes a hook for firing tracking events in the <OpenFeatureProvider> context in use:
```tsx
function MyComponent() {
// get a tracking function for this <OpenFeatureProvider>.
const { track } = useTrack();
// call the tracking event
// can be done in render, useEffect, or in handlers, depending on your use case
track(eventName, trackingDetails);
return <>...</>;
}
```
### Testing ### Testing
The React SDK includes a built-in context provider for testing. The React SDK includes a built-in context provider for testing.

View File

@ -64,7 +64,7 @@ npm install --save @openfeature/server-sdk
yarn add @openfeature/server-sdk @openfeature/core yarn add @openfeature/server-sdk @openfeature/core
``` ```
> [!NOTE] > [!NOTE]
> `@openfeature/core` contains common components used by all OpenFeature JavaScript implementations. > `@openfeature/core` contains common components used by all OpenFeature JavaScript implementations.
> Every SDK version has a requirement on a single, specific version of this dependency. > Every SDK version has a requirement on a single, specific version of this dependency.
> For more information, and similar implications on libraries developed with OpenFeature see [considerations when extending](#considerations). > For more information, and similar implications on libraries developed with OpenFeature see [considerations when extending](#considerations).
@ -96,15 +96,16 @@ See [here](https://open-feature.github.io/js-sdk/modules/_openfeature_server_sdk
| Status | Features | Description | | Status | Features | Description |
| ------ | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | ------ | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| ✅ | [Providers](#providers) | Integrate with a commercial, open source, or in-house feature management tool. | | ✅ | [Providers](#providers) | Integrate with a commercial, open source, or in-house feature management tool. |
| ✅ | [Targeting](#targeting) | Contextually-aware flag evaluation using [evaluation context](/docs/reference/concepts/evaluation-context). | | ✅ | [Targeting](#targeting) | Contextually-aware flag evaluation using [evaluation context](/docs/reference/concepts/evaluation-context). |
| ✅ | [Hooks](#hooks) | Add functionality to various stages of the flag evaluation life-cycle. | | ✅ | [Hooks](#hooks) | Add functionality to various stages of the flag evaluation life-cycle. |
| ✅ | [Logging](#logging) | Integrate with popular logging packages. | | ✅ | [Logging](#logging) | Integrate with popular logging packages. |
| ✅ | [Domains](#domains) | Logically bind clients with providers. | | ✅ | [Domains](#domains) | Logically bind clients with providers. |
| ✅ | [Eventing](#eventing) | React to state changes in the provider or flag management system. | | ✅ | [Eventing](#eventing) | React to state changes in the provider or flag management system. |
| ✅ | [Shutdown](#shutdown) | Gracefully clean up a provider during application shutdown. | | ✅ | [Transaction Context Propagation](#transaction-context-propagation) | Set a specific [evaluation context](/docs/reference/concepts/evaluation-context) for a transaction (e.g. an HTTP request or a thread) |
| ✅ | [Transaction Context Propagation](#transaction-context-propagation) | Set a specific [evaluation context](/docs/reference/concepts/evaluation-context) for a transaction (e.g. an HTTP request or a thread) | | ✅ | [Tracking](#tracking) | Associate user actions with feature flag evaluations, particularly for A/B testing. |
| ✅ | [Extending](#extending) | Extend OpenFeature with custom providers and hooks. | | ✅ | [Shutdown](#shutdown) | Gracefully clean up a provider during application shutdown. |
| ✅ | [Extending](#extending) | Extend OpenFeature with custom providers and hooks. |
<sub>Implemented: ✅ | In-progress: ⚠️ | Not implemented yet: ❌</sub> <sub>Implemented: ✅ | In-progress: ⚠️ | Not implemented yet: ❌</sub>
@ -289,6 +290,21 @@ app.use((req: Request, res: Response, next: NextFunction) => {
}) })
``` ```
### Tracking
The tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations.
This is essential for robust experimentation powered by feature flags.
For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](#hooks) or [provider](#providers) can be associated with telemetry reported in the client's `track` function.
```ts
// flag is evaluated
await client.getBooleanValue('new-feature', false);
// new feature is used and track function is called recording the usage
useNewFeature();
client.track('new-feature-used');
```
### Shutdown ### Shutdown
The OpenFeature API provides a close function to perform a cleanup of all registered providers. The OpenFeature API provides a close function to perform a cleanup of all registered providers.

View File

@ -64,7 +64,7 @@ npm install --save @openfeature/web-sdk
yarn add @openfeature/web-sdk @openfeature/core yarn add @openfeature/web-sdk @openfeature/core
``` ```
> [!NOTE] > [!NOTE]
> `@openfeature/core` contains common components used by all OpenFeature JavaScript implementations. > `@openfeature/core` contains common components used by all OpenFeature JavaScript implementations.
> Every SDK version has a requirement on a single, specific version of this dependency. > Every SDK version has a requirement on a single, specific version of this dependency.
> For more information, and similar implications on libraries developed with OpenFeature see [considerations when extending](#considerations). > For more information, and similar implications on libraries developed with OpenFeature see [considerations when extending](#considerations).
@ -102,6 +102,7 @@ See [here](https://open-feature.github.io/js-sdk/modules/_openfeature_web_sdk.ht
| ✅ | [Logging](#logging) | Integrate with popular logging packages. | | ✅ | [Logging](#logging) | Integrate with popular logging packages. |
| ✅ | [Domains](#domains) | Logically bind clients with providers. | | ✅ | [Domains](#domains) | Logically bind clients with providers. |
| ✅ | [Eventing](#eventing) | React to state changes in the provider or flag management system. | | ✅ | [Eventing](#eventing) | React to state changes in the provider or flag management system. |
| ✅ | [Tracking](#tracking) | Associate user actions with feature flag evaluations, particularly for A/B testing. |
| ✅ | [Shutdown](#shutdown) | Gracefully clean up a provider during application shutdown. | | ✅ | [Shutdown](#shutdown) | Gracefully clean up a provider during application shutdown. |
| ✅ | [Extending](#extending) | Extend OpenFeature with custom providers and hooks. | | ✅ | [Extending](#extending) | Extend OpenFeature with custom providers and hooks. |
@ -281,6 +282,21 @@ client.addHandler(ProviderEvents.Error, (eventDetails) => {
}); });
``` ```
### Tracking
The tracking API allows you to use OpenFeature abstractions and objects to associate user actions with feature flag evaluations.
This is essential for robust experimentation powered by feature flags.
For example, a flag enhancing the appearance of a UI component might drive user engagement to a new feature; to test this hypothesis, telemetry collected by a [hook](#hooks) or [provider](#providers) can be associated with telemetry reported in the client's `track` function.
```ts
// flag is evaluated
client.getBooleanValue('new-feature', false);
// new feature is used and track function is called recording the usage
useNewFeature();
client.track('new-feature-used');
```
### Shutdown ### Shutdown
The OpenFeature API provides a close function to perform a cleanup of all registered providers. The OpenFeature API provides a close function to perform a cleanup of all registered providers.
@ -339,7 +355,7 @@ class MyProvider implements Provider {
} }
// implement with "new OpenFeatureEventEmitter()", and use "emit()" to emit events // implement with "new OpenFeatureEventEmitter()", and use "emit()" to emit events
events?: ProviderEventEmitter<AnyProviderEvent> | undefined; events?: ProviderEventEmitter<AnyProviderEvent> | undefined;
initialize?(context?: EvaluationContext | undefined): Promise<void> { initialize?(context?: EvaluationContext | undefined): Promise<void> {
// code to initialize your provider // code to initialize your provider