前端监控实战之 New Relic

本文涉及的产品
应用实时监控服务-应用监控,每月50GB免费额度
应用实时监控服务-用户体验监控,每月100OCU免费额度
简介: 前端监控实战之 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、客套话


相关实践学习
通过云拨测对指定服务器进行Ping/DNS监测
本实验将通过云拨测对指定服务器进行Ping/DNS监测,评估网站服务质量和用户体验。
相关文章
|
23天前
|
缓存 监控 前端开发
基于 CoffeeScript 的内网管理监控软件前端代码优化
本文探讨了基于CoffeeScript的内网管理监控软件前端代码优化方法,包括数据请求缓存、界面更新采用虚拟DOM技术以及增强错误处理机制,旨在提升软件性能、响应速度和用户体验。
34 4
|
22天前
|
监控 前端开发 JavaScript
OCamlScript 用于局域网电脑监控软件前端开发的探索
在数字化时代,局域网电脑监控软件广泛应用于企业管理和教育机构。OCamlScript 作为新兴技术,在此类软件的前端开发中展现出独特潜力,特别是在网络请求、界面更新及用户交互处理方面。通过合理利用其特性,可构建高效稳定的前端应用,提升用户体验,具有广阔的应用前景。
34 9
|
25天前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
29天前
|
存储 前端开发 JavaScript
前端:new关键字的作用
在JavaScript中,`new`关键字用于创建构造函数或类的新实例。使用`new`时,会自动创建一个空对象,并将其绑定到函数内的`this`,执行构造函数中的代码后返回该对象。这使得对象可以继承构造函数的属性和方法。
|
1月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
32 1
|
1月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
36 1
|
1月前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
|
1月前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
68 2
|
1月前
|
前端开发 JavaScript 数据可视化
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第26天】前端自动化测试在现代软件开发中至关重要,Jest和Cypress分别是单元测试和端到端测试的流行工具。本文通过解答一系列问题,介绍Jest与Cypress的实战应用与最佳实践,帮助开发者提高测试效率和代码质量。
50 2
|
2月前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。