概要
- @newrelic/browser-agentを使っていましたが、たまたまNewRelicの設定画面を確認すると、バージョンアップするとBrowserでもログ収集するぞ。って文言を確認してなんと！ってなった
- 過去チャレンジしたんだけどできなくてなんで？？？ってまま放置してたけど、これがバージョンアップで簡単になるっぽい
- https://docs.newrelic.com/jp/docs/browser/browser-monitoring/browser-pro-features/browser-logs/get-started/#automatic-log
- あんまり覚えていないんだけど、
newrelic.logみたいなやつを使う必要があって、console.log全部置き換えるのだるいなーとか思ってたはず
- Nuxt3を使ってて、検証サーバではできたけど、ローカルでうまくできなかったので試行錯誤をメモする
やったこと
環境変数を用意する
nuxt.config.tsに環境変数を突き合わせて用意した
nuxt.config.ts
// ...
runtimeConfig: {
public: {
// ...
newRelicAccountId: process.env.NUXT_NEW_RELIC_ACCOUNT_ID,
newRelicTrustKey: process.env.NUXT_NEW_RELIC_TRUST_KEY,
newRelicAgentId: process.env.NUXT_NEW_RELIC_AGENT_ID,
newRelicLicenseKey: process.env.NUXT_NEW_RELIC_LICENSE_KEY,
newRelicApplicationId: process.env.NUXT_NEW_RELIC_APPLICATION_ID
}
},
// ...
それぞれの環境変数の意味とどっから取ればいいの？ってところはNewRelicのドキュメントを確認してください
検証環境へデプロイ
- 無事
console.logでも連携できた! - TRACE, DEBUG, INFO, WARN, ERRORが連携できる
-
console.logはINFOで共有される
毎回検証環境へデプロイして動作確認するのめんどくさい
ローカルでできないかなって試してみた
共有されない
- ガチャガチャしたけど、全然共有されない。困った
- 明らかに違ったのは検証環境だと
https://bam.nr-data.net/browser/logs?browser_monitoring_key=....みたいなネットワーク通信が発生するが、ローカルでは発生しない。なぜ？？？？
HTTPSでした
そういえば検証環境はHTTPSだったなと思い、ローカルはHTTPだったのでこれでは？ってなった
さっそく、NUXTでSSLをやってみる
まずは自己証明書を作成する
$ brew install mkcert
$ mkcert -install
$ mkcert localhost 127.0.0.1
$ mkdir cert
$ mv localhost+1* cert
次は、Nuxtに設定する。devServerにhttpsがあるので、自己証明書を渡すだけ
nuxt.config.ts
import fs from 'fs'
import path from 'path'
// ...
// HTTPS証明書の設定
const certKeyPath = path.join(__dirname, 'cert/localhost+1-key.pem')
const certPath = path.join(__dirname, 'cert/localhost+1.pem')
const certExists = fs.existsSync(certKeyPath) && fs.existsSync(certPath)
const devServerHttps = certExists
? {
key: certKeyPath,
cert: certPath
}
: true
// ...
export default defineNuxtConfig({
// ...
devServer: {
https: devServerHttps,
},
// ...
})
これで、Nuxtの起動ログにhttps...と表示されていればおｋ
立ち上げてみたところできました！（ここまでも結構時間かかったけど）
謎
データ量が多いと送られない
適当にこういうものを用意して連携してみると、10件はいけるけど、100件は無理そうでした
<script setup lang="ts">
const generateHugeList = (count: number) => {
return Array.from({ length: count }, (_, index) => ({
id: index + 1,
name: `User_${index}`,
email: `user${index}@example.com`,
isActive: index % 2 === 0,
metadata: {
loginCount: Math.floor(Math.random() * 100),
lastSeen: new Date().toISOString()
}
}));
};
console.info({ key: 'hoge', ...generateHugeList(100)});
</script>
console.logにobjectを渡すとLogのDetailにkey - valueで値が入るが、量が多いと駄目っぽい。それはそうかも
文字列, object | などで送ると文字列だけしか表示されない
console.log('エラー', e)
こういうのとかやっていないですか？ ぼくのところには結構ありますが、これだとNewRelic側では
エラー
とだけしか表示されないです。おそらく文字列結合？しているのかなと想像しますが、objectなのでうまく変換されず情報が落ちているのかなと予想します。ブラウザの場合は、いい感じにconsoleが表示してくれるのでこのように使っていましたがNewRelicはアカンっぽいです
また、そもそもですが、配列やobjectをネストすると、NewRelic側で表示できないので、フラットなObject且つ、valueに配列やobjectを入れないようにしましょう
console.log({ message: 'エラー', error: e }) // NG
console.log({ message: 'エラー', error: e.toString() }) // OK(エラーメッセージがerrorで検索できる)
雑感
使っていたけどより使っていくぞ