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");
});
Last updated
