前端监控实战之 New Relic

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

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


相关实践学习
通过轻量消息队列(原MNS)主题HTTP订阅+ARMS实现自定义数据多渠道告警
本场景将自定义告警信息同时分发至多个通知渠道的需求,例如短信、电子邮件及钉钉群组等。通过采用轻量消息队列(原 MNS)的主题模型的HTTP订阅方式,并结合应用实时监控服务提供的自定义集成能力,使得您能够以简便的配置方式实现上述多渠道同步通知的功能。
相关文章
|
6月前
|
数据采集 存储 监控
Python 原生爬虫教程:网络爬虫的基本概念和认知
网络爬虫是一种自动抓取互联网信息的程序,广泛应用于搜索引擎、数据采集、新闻聚合和价格监控等领域。其工作流程包括 URL 调度、HTTP 请求、页面下载、解析、数据存储及新 URL 发现。Python 因其丰富的库(如 requests、BeautifulSoup、Scrapy)和简洁语法成为爬虫开发的首选语言。然而,在使用爬虫时需注意法律与道德问题,例如遵守 robots.txt 规则、控制请求频率以及合法使用数据,以确保爬虫技术健康有序发展。
792 31
|
JavaScript 搜索推荐 前端开发
从零搭建到部署:Angular与Angular Universal手把手教你实现服务器端渲染(SSR),全面解析及实战指南助你提升Web应用性能与SEO优化效果
【8月更文挑战第31天】服务器端渲染(SSR)是现代Web开发的关键技术,能显著提升SEO效果及首屏加载速度,改善用户体验。Angular Universal作为官方SSR解决方案,允许在服务器端生成静态HTML文件。本文通过具体示例详细介绍如何使用Angular Universal实现SSR,并分享最佳实践。首先需安装Node.js和npm。
472 1
|
运维 监控 Ubuntu
一键启动日志魔法:揭秘ELK自动安装脚本的神秘面纱!
【8月更文挑战第9天】在数据驱动时代,高效处理日志至关重要。ELK Stack(Elasticsearch、Logstash、Kibana)是强大的日志分析工具,但其复杂的安装配置常让初学者望而却步。本文介绍如何编写ELK自动安装脚本,简化部署流程。脚本适用于Ubuntu系统,自动完成ELK下载、安装及基本配置,包括依赖项安装、服务启动及自启设置,极大降低了使用门槛,助力运维人员和开发者轻松构建日志分析平台。
376 6
|
12月前
|
前端开发 数据可视化 JavaScript
🚀打造卓越 UI:2024 年不容错过的 9 个 React UI 组件库✨
本文介绍了2024年最受欢迎的9个React UI组件库,每一个都在设计、功能和定制化上有独特的优势,包括Material UI、Ant Design、Chakra UI等。这些组件库为开发者提供了强大、灵活的工具,可以帮助构建现代化、无障碍且高效的Web应用程序。文章详细分析了每个库的特点、适用场景以及关键功能,帮助开发者在项目中做出最合适的选择,无论是打造企业级仪表板还是时尚的用户界面。
1365 6
🚀打造卓越 UI:2024 年不容错过的 9 个 React UI 组件库✨
|
Prometheus 监控 Kubernetes
prometheus学习笔记之简介与安装
prometheus学习笔记之简介与安装
prometheus学习笔记之简介与安装
|
负载均衡 监控 前端开发
在Linux中,如何配置负载均衡器以分配网络流量?
在Linux中,如何配置负载均衡器以分配网络流量?
|
监控 JavaScript 前端开发
前端监控实战之 New Relic
前端监控实战之 New Relic
517 0
|
前端开发 JavaScript 数据安全/隐私保护
idea代码review工具Code Review Helper使用介绍
CodeReview IDEA 插件是一款用于代码审查的工具,旨在解决在GitLab中查看整体业务逻辑的不便。该插件提供快速添加注释、行号旁的评审意见标记、双击跳转到代码、意见删除和修改、内容导出为Excel以及导入等功能。特别地,它支持离线和在线模式,离线模式下,审核者和开发者通过Excel文件交换评审意见;在线模式则通过服务端实现评审内容的上传和下载,简化文件传输。此外,该插件允许定制评审字段,并能与团队协作工具集成。通过这些特性,CodeReview IDEA 提高了代码审查的效率和便捷性。
1493 2
|
人工智能 搜索推荐 Go
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions(上)
一定要知道ChatGPT最新功能:自定义指令 Custom Instructions
|
存储 弹性计算 数据库
阿里云云计算工程师ACA认证(Alibaba Cloud Certified Associate - Cloud Computing)考试大纲
介绍阿里云云计算工程师ACA认证(Alibaba Cloud Certified Associate - Cloud Computing)所需具备的知识及学习方法等。
2607 1