@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

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.