Next.jsアプリにLogRocketを追加する。そしてSentry連携も

LogRocketを使うことで、「どういう操作でバグが発生したのか」を画面録画でチェックできるようになります。 これをNext.jsのアプリに組み込んだ時の覚書です。 必要なもの LogRocketのApp ID (xx […]

広告ここから
広告ここまで

目次

    LogRocketを使うことで、「どういう操作でバグが発生したのか」を画面録画でチェックできるようになります。

    これをNext.jsのアプリに組み込んだ時の覚書です。

    必要なもの

    LogRocketのApp ID (xxxx/exampleのようなもの)が必要です。LogRocketでアカウントとアプリを作成して取得しましょう。

    ライブラリのインストール

    ライブラリをいくつか追加します。

    $ yarn add logrocket logrocket-react
    $ yarn add -D babel-plugin-add-react-displayname

    .babelrcを作成する

    LogRocket Reactプラグイン用にBabelの設定を更新します。 add-react-displaynameプラグインをセットしましょう。

    {
        "presets": ["next/babel"],
        "plugins": ["add-react-displayname"]
      }

    LogRocket用フックを作成する

    Next.jsなどのSSR / SSG機能を持つアプリでは定番ですが、window対策を行います。今回はuseEffectwindowがundefinedの場合LogRocketを動かさないようにしています。

    import LogRocket from 'logrocket';
    import { useEffect } from 'react';
    import setupLogRocketReact from 'logrocket-react';
    
    export const useLogRocket = () => {
        useEffect(() => {
            if (!window || !window.document) return
            LogRocket.init('xxxx/examplecom');
            setupLogRocketReact(LogRocket);
        }, [])
    }

    動作確認

    最後にnext devまたはnext build && next export && npx serve buildなどで問題なく動作しているかチェックしておきましょう。

    Sentry連携

    Sentryも使っている場合、beforeSendLogRocket.sessionURLevent.extraにセットしてやりましょう。これでSentryからLogRocketの録画URLを参照できるようになります。

    import LogRocket from 'logrocket';
    ...
            Sentry.init({
                ...
                tracesSampleRate: 1.0,
                beforeSend(event) {
                    const logRocketSession = LogRocket.sessionURL;
                    if (logRocketSession !== null) {
                    event.extra["LogRocket"] = logRocketSession;
                    return event;
                    } else {
                    return event;
                    }
                },
            });
        }, [])
    }

    参考

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark