{"type":"doc","content":[{"type":"heading","attrs":{"level":2},"content":[{"text":"Web","type":"text"}]},{"type":"paragraph","content":[{"text":"The Kloudfuse RUM SDK is available as a package on npm. To get started instrumenting your frontend application include the Kloudfuse ","type":"text"},{"text":"RUM SDK dependency","type":"text","marks":[{"type":"link","attrs":{"href":"https://npm.io/package/kf-browser-sdk"}}]},{"text":" in your application:","type":"text"}]},{"type":"codeBlock","content":[{"text":"npm install --save kf-browser-sdk","type":"text"}]},{"type":"paragraph","content":[{"text":"The SDK needs to be initialized before it begins gathering frontend telemetry. This initialization should occur as early as possible in your applications loading phase. Customize and include the below code snippet:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"import kfuseRumSDK from 'kf-browser-sdk';\n\nkfuseRumSDK.init({\n config: {\n applicationId: '',\n clientToken: '',\n proxy: '',\n service: '',\n env: 'production',\n version: '1.0.0',\n sessionSampleRate: 100,\n defaultPrivacyLevel: 'mask', 'mask-user-input' | 'allow'\n enableSessionRecording: true,\n enableLogCollection: true,\n },\n});","type":"text"}]},{"type":"paragraph","content":[{"text":"The permitted configuration options are documented below:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"applicationId","type":"text","marks":[{"type":"code"}]},{"text":": a UUID that uniquely identifies a specific frontend application. All RUM telemetry will be associated with it.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"clientToken","type":"text","marks":[{"type":"code"}]},{"text":": a token that identifies valid producers of RUM telemetry. You may supply the value ","type":"text"},{"text":"dummy","type":"text","marks":[{"type":"code"}]},{"text":" here if the kloudfuse installation does not have authenticated ingestion enabled. If authenticated ingestion is enable this value should match one of the configured auth tokens for RUM (see ","type":"text"},{"text":"Step 5","type":"text","marks":[{"type":"em"}]},{"text":" on the ","type":"text"},{"text":"Enable RUM on Customer’s Kloudfuse installation","type":"text","marks":[{"type":"em"}]},{"text":" page)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"proxy","type":"text","marks":[{"type":"code"}]},{"text":": the Kloudfuse ingest endpoint for RUM events. Its value would be ","type":"text"},{"text":"https:///ddrumproxy","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"service","type":"text","marks":[{"type":"code"}]},{"text":": a friendly name unique to the the frontend application being instrumented","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"env","type":"text","marks":[{"type":"code"}]},{"text":": a name identifying a logical source of RUM events (e.g. test environment or production environment)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"version","type":"text","marks":[{"type":"code"}]},{"text":": a string representing the unique frontend application build (e.g. ","type":"text"},{"text":"1.0.0","type":"text","marks":[{"type":"code"}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"sessionSampleRate","type":"text","marks":[{"type":"code"}]},{"text":": percentage of user sessions that will generate RUM telemetry (0 to 100)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"defaultPrivacyLevel","type":"text","marks":[{"type":"code"}]},{"text":": privacy level for session replays, which can be one of three values:","type":"text"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mask","type":"text","marks":[{"type":"code"}]},{"text":": masks all HTML text, user input, images, links and ","type":"text"},{"text":"data-*","type":"text","marks":[{"type":"code"}]},{"text":" attributes","type":"text","marks":[{"type":"link","attrs":{"href":"https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes"}}]},{"text":". Text on your application is replaced with ","type":"text"},{"text":"X","type":"text","marks":[{"type":"code"}]},{"text":", rendering the page into a wireframe.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"mask-user-input","type":"text","marks":[{"type":"code"}]},{"text":": Masks most form fields such as inputs, text areas, and checkbox values while recording all other text as is. Inputs are replaced with three asterisks (","type":"text"},{"text":"***","type":"text","marks":[{"type":"code"}]},{"text":") and text areas are obfuscated with space-preserving ","type":"text"},{"text":"x","type":"text","marks":[{"type":"code"}]},{"text":" characters.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"allow","type":"text","marks":[{"type":"code"}]},{"text":": Records everything unmasked.","type":"text"}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"enableSessionRecording","type":"text","marks":[{"type":"code"}]},{"text":": controls whether the users session will be recorded","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"enableLogCollection","type":"text","marks":[{"type":"code"}]},{"text":": controls whether frontend logs will be collected or not","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Associating User Information","type":"text"}]},{"type":"paragraph","content":[{"text":"As soon as your application has access to user information you may provide that information to the SDK to enrich all generated telemetry. To do this add the following code snippet:","type":"text"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"text":"kfuseRumSDK.setUser({\n id: \"joebarra\",\n email: \"joe.barra@kloudfuse.com\",\n})","type":"text"}]},{"type":"paragraph"},{"type":"heading","attrs":{"level":2},"content":[{"text":"Flutter","type":"text"}]},{"type":"paragraph","content":[{"text":"The Kloudfuse Flutter SDK is available as a Flutter plugin","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Installation","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Add the following to your ","type":"text"},{"text":"pubspec.yaml","type":"text","marks":[{"type":"code"}]},{"text":" file:","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","content":[{"text":"dependencies:\n kf_sdk:","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Fetch the SDK with ","type":"text"},{"text":"$ flutter pub get","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Initialize the SDK","type":"text"},{"type":"hardBreak"}]},{"type":"codeBlock","content":[{"text":"import 'package:kf_sdk/kf_sdk.dart';\n\nvoid main() async {\n final configuration = KfConfiguration(\n applicationId: '',\n clientToken: '',\n customEndpoint: '',\n env: '',\n sessionSamplingRate: 100,\n service: '',\n env: 'production',\n version: '1.0.0',\n );\n\n await KfSdk.runApp(configuration, KfTrackingContent.granted, () async {\n runApp(MyApp());\n });\n}","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"applicationId","type":"text","marks":[{"type":"code"}]},{"text":": a UUID that uniquely identifies a specific frontend application. All RUM telemetry will be associated with it.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"clientToken","type":"text","marks":[{"type":"code"}]},{"text":": a token that identifies valid producers of RUM telemetry. You may supply the value ","type":"text"},{"text":"dummy","type":"text","marks":[{"type":"code"}]},{"text":" here if the kloudfuse installation does not have authenticated ingestion enabled. If authenticated ingestion is enable this value should match one of the configured auth tokens for RUM (see ","type":"text"},{"text":"Step 5","type":"text","marks":[{"type":"em"}]},{"text":" on the ","type":"text"},{"text":"Enable RUM on Customer’s Kloudfuse installation","type":"text","marks":[{"type":"em"}]},{"text":" page)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"customEndpoint","type":"text","marks":[{"type":"code"}]},{"text":": the Kloudfuse ingest endpoint for RUM events. Its value would be ","type":"text"},{"text":"https:///ddrumproxy","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"service","type":"text","marks":[{"type":"code"}]},{"text":": a friendly name unique to the the frontend application being instrumented","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"env","type":"text","marks":[{"type":"code"}]},{"text":": a name identifying a logical source of RUM events (e.g. test environment or production environment)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"version","type":"text","marks":[{"type":"code"}]},{"text":": a string representing the unique frontend application build (e.g. ","type":"text"},{"text":"1.0.0","type":"text","marks":[{"type":"code"}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"sessionSamplingRate","type":"text","marks":[{"type":"code"}]},{"text":": percentage of user sessions that will generate RUM telemetry (0 to 100)","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"React Native","type":"text"}]},{"type":"paragraph","content":[{"text":"The Kloudfuse React Native SDK is available as an NPM package","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Install","type":"text"}]},{"type":"orderedList","attrs":{"order":1},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Use your favorite package manager to install the Kloudfuse React Native SDK","type":"text"}]},{"type":"codeBlock","content":[{"text":"$ npm install kf-react-native-sdk","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Install the added pod","type":"text"}]},{"type":"codeBlock","content":[{"text":"$ cd ios && pod install","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"Initialize the sdk in your App","type":"text"}]},{"type":"codeBlock","attrs":{"language":"typescript"},"content":[{"text":"import { KfProvider } from 'kf-react-native-sdk';\n\n//Wrap the content of your App component in a KfProvider component, passing it your configuration:\n\nconst config = {\n applicationId: ,\n clientToken: ,\n env: ,\n proxy: ,\n sessionSamplingRate: 100,\n serviceName: ,\n version: 1.0.0,\n};\n\nexport default function App() {\n return (\n \n \n \n );\n}","type":"text"}]}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"applicationId","type":"text","marks":[{"type":"code"}]},{"text":": a UUID that uniquely identifies a specific frontend application. All RUM telemetry will be associated with it.","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"clientToken","type":"text","marks":[{"type":"code"}]},{"text":": a token that identifies valid producers of RUM telemetry. You may supply the value ","type":"text"},{"text":"dummy","type":"text","marks":[{"type":"code"}]},{"text":" here if the kloudfuse installation does not have authenticated ingestion enabled. If authenticated ingestion is enable this value should match one of the configured auth tokens for RUM (see ","type":"text"},{"text":"Step 5","type":"text","marks":[{"type":"em"}]},{"text":" on the ","type":"text"},{"text":"Enable RUM on Customer’s Kloudfuse installation","type":"text","marks":[{"type":"em"}]},{"text":" page)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"proxy","type":"text","marks":[{"type":"code"}]},{"text":": the Kloudfuse ingest endpoint for RUM events. Its value would be ","type":"text"},{"text":"https:///ddrumproxy","type":"text","marks":[{"type":"code"}]}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"service","type":"text","marks":[{"type":"code"}]},{"text":": a friendly name unique to the the frontend application being instrumented","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"env","type":"text","marks":[{"type":"code"}]},{"text":": a name identifying a logical source of RUM events (e.g. test environment or production environment)","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"version","type":"text","marks":[{"type":"code"}]},{"text":": a string representing the unique frontend application build (e.g. ","type":"text"},{"text":"1.0.0","type":"text","marks":[{"type":"code"}]},{"text":")","type":"text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"text":"sessionSamplingRate","type":"text","marks":[{"type":"code"}]},{"text":": percentage of user sessions that will generate RUM telemetry (0 to 100)","type":"text"}]}]}]}],"version":1}

Browser not supported