前端监控实战之 New Relic

本文涉及的产品
应用实时监控服务ARMS - 应用监控,每月50GB免费额度
简介: 前端监控实战之 New Relic

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、客套话


相关文章
|
3天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
5天前
|
缓存 监控 前端开发
前端性能监控:从Lighthouse到Real User Monitoring
**前端性能监控关乎用户体验。Lighthouse是自动化审计工具,评估网页性能、最佳实践、可访问性等,通过CLI或Chrome DevTools使用。RUM则实时监控用户与网站互动,收集性能数据。两者结合,从开发到生产环境,全面优化前端性能,包括资源加载、代码优化、网络性能和用户体验。使用Lighthouse和RUM数据,结合CI/CD,持续改进并设定性能预算,采用SSR、Service Worker、Code Splitting等高级策略,确保高性能和用户满意度。**
13 2
|
9天前
|
监控 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(2)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
28 1
|
9天前
|
负载均衡 前端开发 应用服务中间件
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽(1)
前端开发者必备:Nginx入门实战宝典,从部署到优化一网打尽
31 1
|
1天前
|
前端开发 安全 JavaScript
前端工程化实战 - 日程管理
前端工程化实战 - 日程管理
4 0
|
13天前
|
JavaScript 前端开发 Java
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
【Vue实战项目】学完前端基础后,可能你还需要掌握这些才能接手开发项目
24 0
|
1月前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
1月前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
1月前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目
|
1月前
|
前端开发 JavaScript 算法
前端色彩艺术:深入解析与实战指南
前端色彩艺术:深入解析与实战指南