React Native のログを Cloud Watch Logs に送信する方法

私が実装するうえで大変苦労した React Native アプリのログを Cloud Watch Logs に直接送信する方法をご紹介します。
とは言っても、 React Native アプリから直接ログを送信したい場合は稀かもしれませんが...

前提

この記事では以下の環境で実装を行なっております。

• OS：MacOS Monterey 12.6.1の M1チップ
• Android Studio：Chipmunk 2021.2.1
• Node.js：16.16.0
• DB：Firestore

苦労した理由

1. React Native のライブラリで Cloud Watch Logsと連携するものが少ない
2. ライブラリがあったとしても、ログを送信するものではなくログを取得するもの
3. Firestore へ書き込み、読み込み、削除したときのデータと Cloud Watch Logs に送信されたデータの順番や値が合わない
4. そもそも技術力が不足している

3について、データは送信した順番で受信されるとは限らないことが勉強となりました。

使用したライブラリ

AWS CloudWatchLogs と Reacr Native の架け橋となるライブラリを使用します。

ライブラリに変更を加えた箇所

• 「addLogsToStreamメソッド」のエクスポート
  • ファイルのパス
    /~プロジェクトへのパス~/node_modules/aws-cloudwatch-log-browser/index.js
  • 追加したコード
    addLogsToStreamメソッドのエクスポート

    module.exports = {
        addLogsToStream, // ←この1行を追加
    }
    

「addLogsToStreamメソッド」をエクスポートすることで、実装の際にログストリームへログを追加することができます！

実装手順

1. AWSに関しての設定

以下の手順でAWSのアカウントを作成します。

1. AWS アカウント作成の流れ を参照し、AWS のアカウントを作成
2. AWS アカウントでの IAM ユーザーの作成 を参照し、 IAM ユーザーを作成
3. IAM ユーザーのアクセスキーの作成 を参照し、 アクセスキーを作成

2. ライブラリのインストールと依存関係を設定

$ npm install aws-cloudwatch-log-browser --save
$ npx react-native link aws-cloudwatch-log-browser      

※私の環境の場合「npx」を付けておりますが、環境によっては付けなくても実行できます。

3. 「ログストリームの作成」を実装

import {createLogStream, addLogsToStream} from 'aws-cloudwatch-log-browser';

const config = { 
	logGroupName: 'ロググループの名前', 
	region: 'ap-northeast-1', 
	accessKeyId: 'アクセスキーID', 
	secretAccessKey: 'シークレットアクセスキー', 
}

createCloudWatchLogsStream = () => {
    createLogStream('ログストリームの名前', config)
      .then(data => console.log('ログストリームの作成に成功しました。', data))
      .catch(err => console.log('ログストリームの作成に失敗しました。', err));
};

configのパラメータは適宜変更してください。

4. 「ログストリームへのログ追加」を実装

import {createLogStream, addLogsToStream} from 'aws-cloudwatch-log-browser';

addLogsToLogStream = () => {
    const entry = 'ログ';
    const logGroupName = 'ロググループの名前';
    const logStreamName = 'ログストリームの名前';
    const region = 'ap-northeast-1';
    const keys = {
      accessKeyId: 'アクセスキーID',
      secretAccessKey: 'シークレットアクセスキー',
    };

    addLogsToStream(entry, logGroupName, logStreamName, region, keys);
};

addLogsToStreamの変数の値は適宜変更してください。

まとめ

今回は React Native アプリのログを Cloud Watch Logs に送信する方法を紹介いたしました。
ライブラリに変更を加える箇所があったりと一筋縄では実装ができず、実装に時間を要しました。
この記事が同じ実装を行う方の手助けになれば幸いです。