正文

Vue & Sentry

IP云
IP云V管理员/0 阅读
12/01
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

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
  1. 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

});
  1. 使用 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");

区别
  1. @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.

  1. @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的更多相关文章
  1. Vue & Sentry & ErrorHandler

    Vue & Sentry & ErrorHandler import * as Sentry from '@sentry/browser'; import { Vue as VueIn ...

  2. Vue & Sentry sourcemaps All In One

    Vue & Sentry sourcemaps All In One vue & sentry & sourcemaps https://docs.sentry.io/plat ...

  3. vue+sentry 前端异常日志监控

    敲代码最糟心不过遇到自己和测试的环境都OK, 客户使用有各种各样还复现不了的问题,被逼无奈只能走到这一步:前端异常日志监控! vue官方文档如下推荐: 就是说, vue有错误机制处理errorHand ...

  4. Sentry项目监控工具结合vue的安装与使用（前端）

    一.官网:https://sentry.io/welcome/ 二.介绍 Sentry 是一个开源的实时错误报告工具,支持 web 前后端.移动应用以及游戏,支持 Python.OC.Java.Go. ...

  5. [转] vue前端异常监控sentry实践

    1. 监控原理 1.1 onerror 传统的前端监控原理分为异常捕获和异常上报.一般使用onerror捕获前端错误: window.onerror = (msg, url, line, col, e ...

  6. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  7. Vue.2.0.5-生产环境部署

    删除警告 为了减少文件大小,Vue 精简独立版本已经删除了所有警告,但是当你使用 Webpack 或 Browserify 等工具时,你需要一些额外的配置实现这点. Webpack 使用 Webpac ...

  8. 前端开发：如何写一手漂亮的 Vue

    前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情 ...

  9. vue 开发2017年变化回顾及2018年展望

    vue.js 变化 从 github 的发布记录我们可以看到2017年 vue.js 的第一个发布为 v2.1.9,最后一个为 v2.5.13,主要发布小版本 2.2~2.5.这些发布提升了vue 与 ...

随机推荐
  1. centos&linux

    who am i 查看是哪一个用户 init 0关机 ifconfig用于配置网络或显示当前网络接口的状态 eth0是网卡的名字 第一行:flags后面的up指的是网卡处于运行状态,running连接 ...

  2. Java 如何给Word文档添加多行文字水印

    前言 我在以往的文章中曾介绍过如何给Word文档添加文本水印和图片水印,及怎样删除文档中的水印.关于文本水印,之前那篇教程里主要指的是单行字体的水印,而在操作Word文档时,有时也会碰到需要添加多行文 ...

  3. JVM(二)类加载的时机及其过程

    类从被加载到虚拟机内存中开始,到卸载出内存为止,它的的整个生命周期包括: 加载(Loading),验证(Verification),准备(Preparation),解析(Resolution),初始化 ...

  4. 一文告诉你Java日期时间API到底有多烂

    前言 你好,我是A哥(YourBatman). 好看的代码,千篇一律!难看的代码,卧槽卧槽~其实没有什么代码是"史上最烂"的,要有也只有"史上更烂". 日期是商 ...

  5. chain issues incorrect order,EXtra certs,Contains anchor

    背景: 下载颁发下来的ssl证书安装好之后网站正常显示安全,但是通过ssl证书网站去检测报错误:chain issues incorrect order,EXtra certs,Contains an ...

  6. ubuntu 14.04下安装 mysql-workbench

    直接在命令行下运行下面命令: sudo apt-get install mysql-workbench 安装完,都可以在Dash中找到 "mysql" 就点击应用打开. 在data ...

  7. （013）每日SQL学习：日期的各种计算

    1.确定两个日期之间的工作日天数 --确定两个日期之间的工作日天数with x0 as (select to_date('2018-01-01','yyyy-mm-dd') as 日期 from du ...

  8. RMI笔记

    这是<java核心技术> 第11章 分布式对象的笔记. RMI基本原理 我们使用远程方法调用是希望达到这样的目的: 可以像调用本地方法一样去调用一个远程方法. 实现远程调用的方式是 为客户 ...

  9. scala/java等其他语言从CSV文件中读取数据，使用逗号','分割可能会出现的问题

    众所周知,csv文件默认以逗号","分割数据,那么在scala命令行里查询的数据: 可以看见,字段里就包含了逗号",",那接下来切割的时候,这本应该作为一个整体 ...

  10. 成功解决Git：fatal: refusing to merge unrelated histories

    Get 报错 如果合并了两个不同的开始提交的仓库,在新的 git 会发现这两个仓库可能不是同一个,为了防止开发者上传错误,于是就给下面的提示 fatal: refusing to merge unre ...

相关阅读

目录[+]