前端监控实战之 Loggly

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

1、目的

  • 和前两篇类似,展示一下 loggly 如何记录 项目日志

2、部署步骤

1.先打开官网 
2.注册一个账号 
3.选择 js / 你需要的语言
4. 配置一下 
复制代码

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

  • 简单解释一下 将这个放入 header 中
<script type="text/javascript" src="https://cloudfront.loggly.com/js/loggly.tracker-2.2.4.min.js" async></script> <script> var _LTracker = _LTracker || []; _LTracker.push({ 'logglyKey': 'your-customer-token', 'sendConsoleErrors': true, 'tag': 'loggly-jslogger' }); </script>
复制代码
  • 尝试 发送数据
_LTracker.push({
        text: 'Hello World',
        aList: [9, 2, 5],
        anObject: {
          id: 1,
          value: 'foobar',
        },
      })
复制代码
  • 注意上面的 token 需要 在这里生成 并且 放入你的 入口文件才可

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

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

3、效果展示

  • 页面错误

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

  • 捕获到错误  非常nice !
    网络异常,图片无法展示
    |

4、小结

  • 去试试吧


相关实践学习
通过轻量消息队列(原MNS)主题HTTP订阅+ARMS实现自定义数据多渠道告警
本场景将自定义告警信息同时分发至多个通知渠道的需求,例如短信、电子邮件及钉钉群组等。通过采用轻量消息队列(原 MNS)的主题模型的HTTP订阅方式,并结合应用实时监控服务提供的自定义集成能力,使得您能够以简便的配置方式实现上述多渠道同步通知的功能。
相关文章
|
4月前
|
前端开发 JavaScript 索引
前端性能优化:虚拟滚动技术原理与实战
前端性能优化:虚拟滚动技术原理与实战
514 80
|
10月前
|
缓存 监控 前端开发
基于 CoffeeScript 的内网管理监控软件前端代码优化
本文探讨了基于CoffeeScript的内网管理监控软件前端代码优化方法,包括数据请求缓存、界面更新采用虚拟DOM技术以及增强错误处理机制,旨在提升软件性能、响应速度和用户体验。
107 4
|
8月前
|
安全 前端开发 开发工具
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
348 5
【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
|
10月前
|
监控 前端开发 JavaScript
OCamlScript 用于局域网电脑监控软件前端开发的探索
在数字化时代,局域网电脑监控软件广泛应用于企业管理和教育机构。OCamlScript 作为新兴技术,在此类软件的前端开发中展现出独特潜力,特别是在网络请求、界面更新及用户交互处理方面。通过合理利用其特性,可构建高效稳定的前端应用,提升用户体验,具有广阔的应用前景。
103 9
|
10月前
|
存储 前端开发 JavaScript
前端状态管理:Vuex 核心概念与实战
Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本教程将深入讲解 Vuex 的核心概念,如 State、Getter、Mutation 和 Action,并通过实战案例帮助开发者掌握在项目中有效使用 Vuex 的技巧。
|
12月前
|
前端开发 数据管理 编译器
引领前端未来:React 19的重大更新与实战指南🚀
React 19 即将发布,带来一系列革命性的新功能,旨在简化开发过程并显著提升性能。本文介绍了 React 19 的核心功能,如自动优化重新渲染的 React 编译器、加速初始加载的服务器组件、简化表单处理的 Actions、无缝集成的 Web 组件,以及文档元数据的直接管理。这些新功能通过自动化、优化和增强用户体验,帮助开发者构建更高效的 Web 应用程序。
529 1
引领前端未来:React 19的重大更新与实战指南🚀
|
11月前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
184 1
|
11月前
|
Web App开发 前端开发 JavaScript
前端性能优化实战:从代码到部署的全面指南
前端性能优化实战:从代码到部署的全面指南
218 1
|
11月前
|
缓存 前端开发 搜索推荐
前端性能优化实战:提升网页加载速度
前端性能优化实战:提升网页加载速度
223 1
|
11月前
|
前端开发 数据管理 测试技术
前端自动化测试:Jest与Cypress的实战应用与最佳实践
【10月更文挑战第27天】本文介绍了前端自动化测试中Jest和Cypress的实战应用与最佳实践。Jest适合React应用的单元测试和快照测试,Cypress则擅长端到端测试,模拟用户交互。通过结合使用这两种工具,可以有效提升代码质量和开发效率。最佳实践包括单元测试与集成测试结合、快照测试、并行执行、代码覆盖率分析、测试环境管理和测试数据管理。
374 2