@tiket/react-common-eagle-eye

> This library will be baked into
> @tiket/react-common-fetch and (in Next.js projects) lib/fetch.
> So you likely don’t need/want to implement manually in your project.

Library that interfaces with JSI (exposed by native app to WebView) to log the performance and other metrics of fetch requests.

Currently only supports WebView (window.native.logWebApi to be specific).

Usage

``ts
import EagleEye from '@tiket/react-common-eagle-eye';

const exampleFetch = async () => {
const url = 'https://tiket.com/api/something?param=hello';
const method = 'POST';
const headers = {
exampleKey: 'exampleValue',
};
// no body in case of GET
const body = {
name: 'hello',
};

const eagleEye = EagleEye({
url,
method,
headers,
body,
gql: true, // in case of Apollo Client (see GraphQL section below)
});
eagleEye.start();

try {
const res = await fetch(url, {
method,
headers,
body: JSON.stringify(body),
});

// capture the successful fetch
eagleEye.onFetchSuccess(res);

// and return the response as is
return res;
} catch (e) {
// capture the failed fetch
let errorMessage = '';

if (e instanceof Error) {
errorMessage = e.message;
}

eagleEye.onFetchException(errorMessage);

// and throw the error as is
throw e;
}
};
`

GraphQL

> Only supports Apollo Client for now, if you use other clients such as urql, please let core team know.

In case of GraphQL, the url doesn’t provide much value, hence this library needs to
extract information out of the request body.

Passing gql: true will make this library extract operationName` out of the request body.