Vue & Sentry
Vue & Sentry
config.errorHandler
https://cn.vuejs.org/v2/api/#errorHandler
Vue.config.errorHandler = function (err, vm, info) {
// handle error
// `info` 是 Vue 特定的错误信息,比如错误所在的生命周期钩子
// 只在 2.2.0+ 可用
}
demo
https://sentry.xgqfrms.xyz/sentry/vue-web-app/getting-started/javascript-vue/
https://sentry.xgqfrms.xyz/settings/sentry/projects/vue-web-app/keys/
To use Sentry with your Vue application, you will need to use Sentry’s browser JavaScript SDK: @sentry/browser.
Using yarn
$ yarn add @sentry/browser
Using npm
$ npm install @sentry/browser
sentry vue
https://docs.sentry.io/platforms/javascript/guides/vue/
$ yarn add @sentry/vue
- sentry 只上报 js 错误,不处理 vue 本身的错误!
On its own, @sentry/vue will report any uncaught exceptions triggered by your application.
import Vue from "vue";
import * as Sentry from '@sentry/vue';
Sentry.init({
Vue: Vue,
dsn: '__PUBLIC_DSN__',// keys
});
- 使用 Vue’s config.errorHandler hook,处理 vue 本身的错误!
Additionally, the SDK will capture the name and props state of the active component where the error was thrown. This is reported via Vue’s config.errorHandler hook.
import Vue from "vue";
import App from "./App.vue";
import { ErrorService } from "./Services/ErrorService";
import store from "./store";
Vue.config.productionTip = false;
// Handle all Vue errors
Vue.config.errorHandler = (error) => ErrorService.onError(error);
new Vue({
store,
render: (h) => h(App),
}).$mount("#app");
区别
- @sentry/vue
On its own, @sentry/vue will report any uncaught exceptions triggered by your application.
Additionally, the SDK will capture the name and props state of the active component where the error was thrown.
This is reported via Vue’s config.errorHandler hook.
- @sentry/browser & @sentry/integrations
On its own, @sentry/browser will report any uncaught exceptions triggered by your application.
Additionally, the Vue integration will capture the name and props state of the active component where the error was thrown.
This is reported via Vue’s config.errorHandler hook.
Starting with version 5.x our Vue integration lives in its own package @sentry/integrations.
refs
https://blog.logrocket.com/error-handling-debugging-and-tracing-in-vue-js/
https://juejin.cn/post/6844903860121632782
https://segmentfault.com/a/1190000018606181
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
Vue & Sentry的更多相关文章
- Vue & Sentry & ErrorHandler
Vue & Sentry & ErrorHandler import * as Sentry from '@sentry/browser'; import { Vue as VueIn ...
- Vue & Sentry sourcemaps All In One
Vue & Sentry sourcemaps All In One vue & sentry & sourcemaps https://docs.sentry.io/plat ...
- vue+sentry 前端异常日志监控
敲代码最糟心不过遇到自己和测试的环境都OK, 客户使用有各种各样还复现不了的问题,被逼无奈只能走到这一步:前端异常日志监控! vue官方文档如下推荐: 就是说, vue有错误机制处理errorHand ...
- Sentry项目监控工具结合vue的安装与使用(前端)
一.官网:https://sentry.io/welcome/ 二.介绍 Sentry 是一个开源的实时错误报告工具,支持 web 前后端.移动应用以及游戏,支持 Python.OC.Java.Go. ...
- [转] vue前端异常监控sentry实践
1. 监控原理 1.1 onerror 传统的前端监控原理分为异常捕获和异常上报.一般使用onerror捕获前端错误: window.onerror = (msg, url, line, col, e ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- Vue.2.0.5-生产环境部署
删除警告 为了减少文件大小,Vue 精简独立版本已经删除了所有警告,但是当你使用 Webpack 或 Browserify 等工具时,你需要一些额外的配置实现这点. Webpack 使用 Webpac ...
- 前端开发:如何写一手漂亮的 Vue
前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情 ...
- vue 开发2017年变化回顾及2018年展望
vue.js 变化 从 github 的发布记录我们可以看到2017年 vue.js 的第一个发布为 v2.1.9,最后一个为 v2.5.13,主要发布小版本 2.2~2.5.这些发布提升了vue 与 ...
随机推荐
- 在原生开发中控制HTML5视频!
在原生开发中控制HTML5视频! PC端 视频如何自动播放! 在video标签中添加 autoplay + muted(静音属性!) 温馨提醒: video是一个块级元素! 但是唯一的缺陷就是视频没有 ...
- 【Windows】Win10家庭版启用组策略gpedit.msc
[前言] 大家都认为,Windows 10家庭版中并不包含组策略,其实不然,它是有相关文件的,只是不让你使用而已.那么我们让系统允许你使用就好了. [操作步骤] 1.首先你需要在桌面上新建一个txt文 ...
- 向同一个模型的外键反向关联名称产生了冲突 Django迁移
向同一个模型的外键反向关联名称产生了冲突 一个模型中有两个外键指向同一张表时,创建迁移模型时报错:" HINT: Add or change a related_name argument ...
- Google performance Tools (gperftools) 使用心得
Google performance Tools (gperftools) 使用心得 gperftools是google开发的一款非常实用的工具集,主要包括:性能优异的malloc free内存分配器 ...
- 成为一名优秀的Java程序员9+难以置信的公式
成为一名优秀的Java程序员 成为一名优秀的Java程序员并不重要,但是首先您应该了解基本的编程语言. 好吧,你知道那太好了.我们应该一步一步地精通Java编程,并应遵循所有说明,改进Java的编程逻 ...
- springboot配置rabbitmq
一.消息生成者 1.1消息生成者配置 1.2 消息发送端代码 1.3 创建交换机,队列,并建立关系 二.消费者 2.1消费者 三.限流配置 3.1配置文件 #在单个请求中处理的消息个数,他应该大于等于 ...
- Vue技术点整理-指令
我们通常给一个元素添加 v-if / v-show 来做权限管理,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余. 针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建 ...
- K8s 一、(1、容器基本概念 2、k8s基本概念 )
1.容器基本概念 容器其实就是一种特殊的进程,容器是一个 '单进程'模型. Namespace :隔离 Namespace 技术实际上修改了应用进程看待整个计算机"视图",即它的& ...
- 一篇文章图文并茂地带你轻松学完 JavaScript 继承
JavaScript 继承 在阅读本文章之前,已经默认你了解了基础的 JavaScript 语法知识,基础的 ES6 语法知识 . 继承种类 简单的继承种类可以分为 构造函数继承 原型链继承 clas ...
- HarmonyOS单模块编译与源码导读
我这里以3518的开发板为例进行讲解,3516的也是通用的. 下面是之前全量编译的脚本 python build.py ipcamera_hi3518ev300 -b debug HarmonyOS最 ...