React Native Libraryの設定

IMQABridgeの追加方法は、React Nativeを利用して開発されるケースによって異なる場合があります。

1. 各ComponentのIMQAの設定

関数型コンポーネントの設定

React Nativeアプリの性能データを収集するためにComponentの各画面にIMQAの収集コードを挿入する必要があります。当該収集コードは関数型コンポーネントで作成されており、親コンポーネント/子コンポーネントによって設定が異なります。一番優先的にrenderingが行われる上位コンポーネント(親コンポーネント)に該当するコンポーネントからimportして使われるコンポーネント(子コンポーネント)を区別して下記の設定を正しく適用する必要があります。

• (親コンポーネント)

../components/MyComponent.tsx (親コンポーネント)

// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

const MyComponent = () => {

.. 
useLayoutEffect(() => { 
  // 当該設定は、画面のrenderingが行われる前に呼び出さなければならない関数なので、
  // 必ずuseLayoutEffect Hookにおいて適用してください。
  MpmAgent?.setBehaviorData("MyComponent"); 
}, []);

useEffect(() => {
  // useEffect関数の最上段に位置する必要があります。
  MpmAgent?.startReactNativeRender("MyComponent",true); 
  ..

  // useEffect関数の最下段に位置する必要があります。
  MpmAgent?.endReactNativeRender("MyComponent",true);
}, []);
..
} 

• (子コンポーネント)

../components/MyChildComponent.tsx (子コンポーネント)

// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..
const MyChildComponent = () =>

useEffect(() => {
  // useEffect関数の最上段に位置する必要があります。
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 

  ..

  // useEffect関数の最下段に位置する必要があります。
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
}, []);

クラス型コンポーネントの設定

React Nativeアプリの性能データを収集するためにComponentの各画面にIMQAの収集コードを挿入する必要があります。当該収集コードはクラス型コンポーネントで作成されており、親コンポーネント/子コンポーネントによって設定が異なります。一番優先的にrenderingが行われる上位コンポーネント(親コンポーネント)に該当するコンポーネントからimportして使われるコンポーネント(子コンポーネント)を区別して下記の設定を正しく適用する必要があります。

• (親コンポーネント)

../components/MyComponent.tsx (親コンポーネント)

// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyComponent extends React.Component {

..
 
 componentDidMount() {
  // componentDidMount関数の最上段に位置する必要があります。
    MpmAgent?.setBehaviorData("MyComponent"); 
    MpmAgent?.startReactNativeRender("MyComponent", true); 
    
    ..

  // componentDidMount関数の最下段に位置する必要があります。
    MpmAgent?.endReactNativeRender("MyComponent", true);
 }
..
} 

• (子コンポーネント)

../components/MyChildComponent.tsx (子コンポーネント)

// MpmAgent import
import MpmAgent from ‘imqa-react-native-agent’; 

..

class MyChildComponent extends React.Component {

..

 componentDidMount() {
  // componentDidMount関数の最上段に位置する必要があります。
  MpmAgent?.startReactNativeRender("MyChildComponent", false); 
  ..

  // componentDidMount関数の最下段に位置する必要があります。
  MpmAgent?.endReactNativeRender("MyChildComponent", false);
 }

..
}

2. Networkの通信設定

Axiosを利用したNetworkの通信の場合

Axiosライブラリを使用してNetwork通信を行う場合、interceptorを実装し、ネットワーク通信の際にIMQAの収集コードが動作するようにコードの挿入を行う必要があります。

const axiosInstance = axios.create({
      baseURL:"http://sample-api"
    });
    axiosInstance.interceptors.request.use(
      (config) => {
        Try{
         // network通信の収集コード
          MpmAgent?.startReactNativeNetwork( 
            config.baseURL?.toString(),
            config.url?.toString(),
            config.method?.toString(),
            config.baseURL?.split('://')[0]
          );
        }catch(e){
          console.error(e);
        }
        return config;
      },
      error => {
       // network通信のときにエラーが発生した場合、以下のような形でstatus codeを挿入する必要があります。
        MpmAgent?.endReactNativeNetwork("500");
      }
    );
    axiosInstance.interceptors.response.use( response => {
      // network通信が完了したときに、status codeを挿入する必要があります。
      MpmAgent?.endReactNativeNetwork(response.status.toString());
      return response;
    });

Fetchを利用したNetwork通信の場合

Fetchを利用してNetwork通信を行う場合、ネットワーク通信のときにIMQAの収集コードが動作するように以下の形でコードの挿入を行う必要があります。

let url = "http://sample-api";

// network通信の開始前、該当するコードが適用されている必要があります。
  MpmAgent?.startReactNativeNetwork( 
      url,
     "/sample",
     "post",
     url?.split('://')[0]);

fetch(url)
  .then(response => {
    MpmAgent?.endReactNativeNetwork(response.status.toString());  
    return response;
  })
  .catch(error => {
    MpmAgent?.endReactNativeNetwork("500");  
  });