docs(perf): Add docs for ky intergration & full example

Author: jack828

docs/perf/axios-integration.md

@@ -1,6 +1,7 @@
 ---
 title: Performance Monitoring with Axios
 description: Monitor HTTP request performance with Firebase Performance Monitoring and Axios.
+next: /perf/ky-integration
 previous: /perf/usage
 ---
 

docs/perf/ky-integration.md

@@ -0,0 +1,133 @@
+---
+title: Performance Monitoring with KY
+description: Monitor HTTP request performance with Firebase Performance Monitoring and KY.
+previous: /perf/axios-integration
+---
+
+# KY
+
+The [KY library](https://github.com/sindresorhus/ky) is a tiny wrapper over fetch providing a simpler API and some useful shortcuts.
+KY provides functionality allowing all requests & responses to be intercepted, exposing
+metadata which can be passed onto the Performance Monitoring library.
+
+## Before Request Hook
+
+Before HTTP requests are sent out of the React Native environment, a number of functions can be called to modify or do things based on the current request.
+We can use this `beforeRequest` hook to create our HTTP metric.
+
+```js
+import perf from '@react-native-firebase/perf';
+import ky from 'ky';
+
+const getContentLength = headers => {
+  const length = getHeader('Content-Length', headers);
+  return length ? Number(length) : null;
+};
+
+const getHeader = (header, headers) => headers.get(header) || headers.get(header.toLowerCase());
+
+const api = ky.create({
+  hooks: {
+    beforeRequest: [
+      async (request, options) => {
+        const { url, method } = request;
+        options.metric = await perf().newHttpMetric(url, method);
+
+        // add any extra metric attributes, if required
+        // options.metric.putAttribute('userId', '12345678');
+        // options.metric.setRequestPayloadSize(1234)
+
+        await options.metric.start();
+      },
+    ],
+  },
+});
+
+export default api;
+```
+
+This callback attaches the HTTP metric returned onto the request metadata, which can later be used on an
+incoming response.
+
+## After Request Hook
+
+Similar to the before request hook, we can also hook into all responses from HTTP calls.
+
+```js
+import ky from 'ky';
+
+const getContentLength = headers => {
+  const length = getHeader('Content-Length', headers);
+  return length ? Number(length) : null;
+};
+
+const getHeader = (header, headers) => headers.get(header) || headers.get(header.toLowerCase());
+
+const api = ky.create({
+  hooks: {
+    afterResponse: [
+      async (request, options, response) => {
+        const { status, headers } = response;
+        const { metric } = options;
+        metric.setHttpResponseCode(status);
+        metric.setResponseContentType(getHeader('Content-Type', headers));
+        metric.setResponsePayloadSize(getContentLength(headers));
+        await metric.stop();
+      },
+    ],
+  },
+});
+
+export default api;
+```
+
+All outbound requests sent from KY will appear in your Firebase console, detailing information such as
+how long the request took, response codes & more. Such data can give you greater insight into the performance of your application via any external APIs you may be using.
+
+## Full Example
+
+A working example is provided below. Please adjust and extend according to your use case.
+
+```js
+import perf from '@react-native-firebase/perf';
+import ky from 'ky';
+
+const getContentLength = headers => {
+  const length = getHeader('Content-Length', headers);
+  return length ? Number(length) : null;
+};
+
+const getHeader = (header, headers) => headers.get(header) || headers.get(header.toLowerCase());
+
+const api = ky.create({
+  // prevent circular dependency warning
+  fetch: fetch,
+  hooks: {
+    beforeRequest: [
+      async (request, options) => {
+        const { url, method } = request;
+        options.metric = await perf().newHttpMetric(url, method);
+
+        // add any extra metric attributes, if required
+        // options.metric.putAttribute('userId', '12345678');
+        // options.metric.setRequestPayloadSize(1234)
+
+        await options.metric.start();
+      },
+    ],
+
+    afterResponse: [
+      async (request, options, response) => {
+        const { status, headers } = response;
+        const { metric } = options;
+        metric.setHttpResponseCode(status);
+        metric.setResponseContentType(getHeader('Content-Type', headers));
+        metric.setResponsePayloadSize(getContentLength(headers));
+        await metric.stop();
+      },
+    ],
+  },
+});
+
+export default api;
+```

docs/sidebar.yaml

@@ -118,4 +118,6 @@
       - '/perf/usage'
     - - Axios Integration
       - '/perf/axios-integration'
+    - - KY Integration
+      - '/perf/ky-integration'
   - '//static.invertase.io/assets/firebase/performance-monitoring.svg'

packages/perf/README.md

@@ -41,6 +41,7 @@ yarn add @react-native-firebase/perf
 ### Additional Topics
 
 - [Axios Integration](https://rnfirebase.io/perf/axios-integration)
+- [KY Integration](https://rnfirebase.io/perf/ky-integration)
 
 ## License