前端监控实战之 New Relic

1,955 阅读1分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

1、目的

  • 有小伙伴说能不能出个简单教程使用 New Relic, 所以它来了,还是类似于上一篇 Sentry, 它们搭建不困难,困难在于如何展示和分析,让你的数据有效才是关键

2、部署步骤

1.官网 打开 
2. 找到注册账号的位置 注册
3. 完成后 邮箱验证后打开
4. 安装环境 

image.png

image.png

  • 邮箱验证 请查看自己的邮箱

  • 安装环境

image.png

image.png

  • 代码
curl -Ls https://download.newrelic.com/install/newrelic-cli/scripts/install.sh | bash && sudo NEW_RELIC_API_KEY=NRAK-UGJWE6SOJG5F6TUKS0WB8HE0VFZ NEW_RELIC_ACCOUNT_ID=3619587 /usr/local/bin/newrelic install
  • 贴到命令行 开始 安装

image.png

image.png

  • 这个 代码(上面生成的) 放入 你的 vue 项目中 index.html
<script type="text/javascript">
      window.NREUM || (NREUM = {})
      NREUM.init = {
        distributed_tracing: { enabled: true },
        privacy: { cookies_enabled: true },
        ajax: { deny_list: ['bam.nr-data.net'] },
      }

      NREUM.loader_config = {
        accountID: 'xxxx',
        trustKey: 'xxx',
        agentID: 'xxxx',
        licenseKey: 'NRJS-xxxx',
        applicationID: 'xxxxx',
      }
      
      ....... 代码太长了 此处 不粘贴了 

3、效果

  • 当我 使得项目中 js 报错 时, 看看 new relic 能不能收集到

image.png

  • new relic

image.png

  • 非常nice 这样 说明 我们可以 监控到自己的项目了

  • 什么 你还不放心 ? 再来一个

image.png

  • 效果 展示

image.png

  • 鼓掌 !

4、小结

  • new relic 监控还有很多功能 可以用 可以配置,比如 ip、browser、api error report、logs 等等,项目需要 按照我的方式 接入,然后再加入你想要的内容

  • 比如 可以收集浏览器 信息

image.png

  • 接口 响应时间

image.png

5、客套话