Amplifyでコンソールログの出力を管理する

開発中に少し役立ったので記事にします。

やりたいこと

ローカルの開発環境ではDEBUGレベルのログを出力し、WEB環境ではWARNレベル以上のログを出力するようにする。

環境変数を指定して、上記を実現します。

環境

Amplify version 6

Console Loggerのドキュメント

V6以前のバージョンだとConsoleLoggerではなく、Loggerは利用していたようですが、もう使えません。

コード

ボタンをクリックすると、カウントが１追加され、コンソールログにDEBUGが表示され、10回目でWARNが表示されます。

WEB環境では、10回目のWARNのみが表示されます。

import React, { useState } from 'react';
import { Amplify } from 'aws-amplify';
import { ConsoleLogger } from 'aws-amplify/utils';

// AWS Amplifyの設定を初期化
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

// ログ関連の設定
const isLocalDevelopment = process.env.NODE_ENV !== 'production';
const logLevel = isLocalDevelopment ? 'DEBUG' : 'WARN';
const logger = new ConsoleLogger('ClickCounter', logLevel);

const ClickCounter = () => {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        const newCount = count + 1;
        setCount(newCount);
        logger.debug(`Button clicked. Count: ${newCount}`);

        if (newCount % 10 === 0) {
            logger.warn(`Count reached a multiple of 10. Count: ${newCount}`);
        }
    };

    return (
        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
            <div className="bg-white p-8 rounded-lg shadow-md text-center">
                <h1 className="text-4xl font-bold mb-4 text-blue-600">Click Counter</h1>
                <p className="text-2xl mb-8 text-gray-600">Count: {count}</p>
                <button
                    onClick={handleClick}
                    className="px-6 py-3 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50"
                >
                    Click me
                </button>
            </div>
        </div>
    );
};

export default ClickCounter;