前端监控实战之 New Relic

本文涉及的产品
应用实时监控服务-应用监控,每月50GB免费额度
应用实时监控服务-用户体验监控,每月100OCU免费额度
简介: 前端监控实战系列

1、目的

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

2、部署步骤

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

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 邮箱验证   请查看自己的邮箱
  • 安装环境

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 代码
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
复制代码
  • 贴到命令行 开始 安装

网络异常,图片无法展示
|

网络异常,图片无法展示
|

  • 这个 代码(上面生成的) 放入 你的 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 能不能收集到

网络异常,图片无法展示
|

  • new relic

网络异常,图片无法展示
|

  • 非常nice  这样 说明 我们可以 监控到自己的项目了
  • 什么 你还不放心 ? 再来一个

网络异常,图片无法展示
|

  • 效果 展示

网络异常,图片无法展示
|

  • 鼓掌 !

4、小结

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

网络异常,图片无法展示
|

  • 接口 响应时间

网络异常,图片无法展示
|

5、客套话


相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
相关文章
|
6月前
|
运维 监控 前端开发
前端监控究竟有多重要
前端监控究竟有多重要
240 0
|
Web App开发 监控 前端开发
10分钟彻底搞懂前端页面性能监控
前端页面性能是一个非常核心的用户体验指标。本文介绍阿里UC 岳鹰全景监控平台 如何设计一个通用、低侵入性、自动上报的页面性能监控方案。主要采用的是Navigation Timing API以及sendBeacon等方法。
3275 0
10分钟彻底搞懂前端页面性能监控
|
监控 JavaScript 前端开发
前端监控实战之 New Relic
前端监控实战之 New Relic
251 0
|
人工智能 监控 前端开发
大型网站重构指南 第1.3部分:前端监控和小程序监控 Sentry
大型网站重构指南 第1.3部分:前端监控和小程序监控 Sentry
1028 0
|
Web App开发 存储 监控
如何搭建前端异常监控系统 #102
如何搭建前端异常监控系统 #102
136 0
|
监控 前端开发
前端监控实战之 sentry
前端监控实战之 sentry
488 0
|
Web App开发 安全 前端开发
前端SameSiteCookie问题排查分享
近期排查客户上报的问题时,遇到了一个比较费解的问题,在这边梳理一下排查的流程、遇到的难点、找到的一些相关资料,来对整一个问题进行一个总结,也借此机会做一个分享SameSiteCookie相关的疑难问题处理
393 0
前端SameSiteCookie问题排查分享
|
监控 机器人
让你的服务器和应用不再担惊受怕-阿里云监控配置实战
让你的服务器和应用不再担惊受怕-阿里云监控配置实战
266 0
让你的服务器和应用不再担惊受怕-阿里云监控配置实战
|
监控 前端开发 JavaScript
前端监控合集|学习笔记
快速学习前端监控合集
303 0
|
监控 JavaScript 前端开发
前端监控实战之 Loggly
前端监控实战系列
662 0
下一篇
无影云桌面