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
対策を行います。今回は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;
}
},
});
}, [])
}