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

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対策を行います。今回はuseEffectでwindowが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も使っている場合、beforeSendでLogRocket.sessionURLをevent.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;
                }
            },
        });
    }, [])
}

参考

• https://docs.logrocket.com/docs/sentry
• https://docs.logrocket.com/docs/using-logrocket-with-server-side-rendering
• https://docs.logrocket.com/docs/react-plugin
• https://nextjs.org/docs/advanced-features/customizing-babel-config