当前位置: 首页 > news >正文

无法用raven-js,如何直接使用TraceKit标准化错误字符串(一次有趣的探索)

引子:网上三年前(2020)的文章介绍了一个raven-js 简单说就是把堆栈信息格式化兼容各浏览器,便于查看错误来源。

**but:**到处找了一下raven-js,已经没有官方出处了,只在Sentry的源码仓库里发现它已经被Sentry集成到@sentry/browser里面了:https://github.com/getsentry/sentry-javascript.git
sentry-javascript/docs/migration/v4-to-v5_v6.md
在这里插入图片描述
更重要的是:它的用法要在初始化时注入dsn,我们要的并不想跟着sentry服务器走呀,只想拿到堆栈信息格式化而已。

import Vue from 'vue'
import VueRaven from 'vue-raven'Vue.use(VueRaven, {dsn: 'https://<key>@sentry.io/<project>'
})

所以我们应该直接看raven-js的底层:raven-js使用TraceKit标准化错误字符串。
找这个TraceKit: https://www.npmjs.com/package/tracekit
安装方式还比较奇葩,不能和项目的pnpm兼容,所以新建个npm init -y项目去搞:
npm install bower -g
bower install tracekit

搞下来还以为是个很大的库,没想到核心就一个js文件,1000多行而已,不多。

比较麻烦的是它是umd写的:tracekit.js,省去中间:

(function(window, undefined) {
if (!window) {return;
}var TraceKit = {};
。。。// UMD export
if (typeof define === 'function' && define.amd) {define('TraceKit', [], TraceKit);
} else if (typeof module !== 'undefined' && module.exports && window.module !== module) {module.exports = TraceKit;
} else {window.TraceKit = TraceKit;
}}(typeof window !== 'undefined' ? window : global));

这个要直接在esm里面import进来源码中一起编译还是比较麻烦的(我写的是库,不能简单的把它丢html模板里直接引入,那样很简单我知道,但我要引入它和其他埋点库融合在一起) 从这篇文章得到一个线索: vite import umd,试了它说的两个插件,用@rollup/plugin-commonjs这个构建成功了:

1、新建项目,导入rollup、@rollup/plugin-node-resolve
2、rollup.config.mjs配置如下:

import cjs from "rollup-plugin-cjs-es";
export default {  input: ['src/tracekit.js'], // 你的主入口文件  output: {  dir: 'dist', // 输出目录  format: 'esm', // 输出格式,可以是 'amd', 'cjs', 'esm', 'iife', 'umd' 或 'system'  },  plugins: [  cjs({nested: true})],  
};

3、构建 npx rollup -c
4、dist下面的tracekit.js就是支持esm的了
5、把dist/tracekit.js拷贝到你项目的任何地方,导入

import { default as TraceKit } from '../libs/tracekit.js'

6、官方的例子不能用了,因为那个是劫持window.onerror等方法,并且得写个异步监听,我们要的是直接的把错误转成 标准化错误字符串 的。 这个只能拔代码了。幸运的是,我帮你拔完了,找到了这个方法可以转换:

TraceKit.computeStackTrace(error as Error)

error就是你捕获到的原生的js错误对象。

相关文章:

无法用raven-js,如何直接使用TraceKit标准化错误字符串(一次有趣的探索)

引子&#xff1a;网上三年前&#xff08;2020&#xff09;的文章介绍了一个raven-js 简单说就是把堆栈信息格式化兼容各浏览器&#xff0c;便于查看错误来源。 **but&#xff1a;**到处找了一下raven-js&#xff0c;已经没有官方出处了&#xff0c;只在Sentry的源码仓库里发现…...

Docker学习笔记(二):在Linux中部署Docker(Centos7下安装docker、环境配置,以及镜像简单使用)

一、前言 记录时间 [2024-4-6] 前置文章&#xff1a;Docker学习笔记&#xff08;一&#xff09;&#xff1a;入门篇&#xff0c;Docker概述、基本组成等&#xff0c;对Docker有一个初步的认识 在上文中&#xff0c;笔者进行了Docker概述&#xff0c;介绍其历史、优势、作用&am…...

uniapp 检查更新

概览 在uniapp中检查并更新应用&#xff0c;可以使用uni-app自带的更新机制。以下是一个简单的示例代码&#xff0c;用于在应用启动时检查更新&#xff1a; // 在App.vue或者其他合适的地方调用 onLaunch: function() {// 当uni-app初始化完成时执行// 判断平台const platfor…...

(Java)数据结构——正则表达式

前言 本博客是博主用于复习数据结构以及算法的博客&#xff0c;如果疏忽出现错误&#xff0c;还望各位指正。 正则表达式概念 正则表达式&#xff0c;又称规则表达式&#xff08;Regular Expression&#xff09;&#xff0c;是一种文本模式&#xff0c;包括普通字符&#xf…...

第6章 6.3.1 正则表达式的语法(MATLAB入门课程)

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 正则表达式可以由一般的字符、转义字符、元字符、限定符等元素组…...

RX8130CE为用户提供带复位延迟和主备电管理的解决方案

实时时钟作为设备的精确时钟来源&#xff0c;其作用如同人的心脏&#xff0c;为设备提供准确稳定的心跳.而便携式设备由于应用场景多变&#xff0c;所以对内部元器件要求也相对较高&#xff0c;这就对作为核心器件的实时时钟模块提出不少挑战。EPSON实时钟模块产品线拥有丰富的…...

JS文件导出变量

如果 config.js 文件中有多个变量要导出&#xff0c;你可以按照以下步骤进行&#xff1a; 1. 在 config.js 文件中定义多个变量&#xff0c;并使用 export 导出它们。 // config.js const baseUrl "http://localhost:8081"; const apiKey "your_api_key&quo…...

已知私钥和密文,如何用python进行RSA解密

要使用Python进行RSA解密,你可以使用pycryptodome库。下面是一个简单的示例,展示了如何使用已知的私钥和密文进行RSA解密: 首先,确保你已经安装了pycryptodome库。如果没有安装,你可以通过运行pip install pycryptodome来安装它。 然后,你可以使用以下代码进行RSA解密:…...

vue2-vue3面试

v-text/v-html/v-once/v-show/v-if/v-for/v-bind/v-on beforeCreate() 已有DOM节点&#xff1a;可以data选项&#xff1a;不可以虚拟DOM节点&#xff1a;不可以 created():掌握 已有DOM节点&#xff1a;可以data选项&#xff1a;可以虚拟DOM节点&#xff1a;不可以 beforeMount…...

jmeter生成随机数的详细步骤及使用方式

Apache JMeter 是一个用于测试性能的开源工具&#xff0c;它可以模拟多种类型的负载并测量应用程序的性能。在 JMeter 中生成随机数可以通过使用预定义的函数来实现。以下是生成随机数的详细步骤及使用方式&#xff1a; 安装 JMeter&#xff1a; 首先&#xff0c;你需要在你的计…...

速盾:为什么会出现高防cdn?它适合哪些行业?

随着互联网的不断发展和普及&#xff0c;网络安全问题也变得日益突出。由于互联网的特性&#xff0c;许多企业和组织的在线业务往往面临来自网络攻击的威胁&#xff0c;如DDoS攻击、恶意爬虫等。为了保护在线业务的正常运行和用户数据的安全&#xff0c;高防CDN应运而生。 高防…...

GB∕T 25058-2019 信息安全技术 网络安全等级保护实施指南

GB∕T 25058-2019 信息安全技术 网络安全等级保护实施指南...

使用Nodejs + express连接数据库mongoose

文章目录 先创建一个js文档安装 MongoDB 驱动程序&#xff1a;引入 MongoDB 模块&#xff1a;设置数据库连接&#xff1a;新建一个表试试执行数据库操作&#xff1a;关闭数据库连接&#xff1a; 前面需要准备的内容可看前面的文章&#xff1a; Express框架搭建项目 node.js 简单…...

朗致集团面试-Java架构师

总结 三轮面试&#xff0c;第一轮是逻辑测试性格测试&#xff0c;第二轮是技术面试&#xff08;面试官-刘老师&#xff09;&#xff0c;第三轮是CTO面试&#xff08;面试官-屠老师&#xff09;。如果第三轮面试通过&#xff0c;考官会问你薪资意向&#xff0c;如果满意的话HR就…...

Ubuntu 23.10 搜狗拼音输入法闪屏解决

问题与解决 Ubuntu 23.10下安装搜狗拼音输入法并且使用搜狗输入法时&#xff0c;会闪屏。站内有人说可以换使用Xorg作为桌面服务&#xff0c;然后使用基于X11的桌面&#xff0c;其实可以不用那么麻烦&#xff0c;只需要设置QT的环境变量QT_QPA_PLATFORMxcb&#xff0c;然后重新…...

备战蓝桥杯---刷杂题2

显然我们直接看前一半&#xff0c;然后我们按照斜行看&#xff0c;我们发现斜行是递增的&#xff0c;而同一行从左向右也是递增的&#xff0c;因此我们可以直接二分&#xff0c;同时我们发现对称轴的数为Ck,2k. 我们从16斜行枚举即可 #include<bits/stdc.h> using name…...

.[[backup@waifu.club]].svh勒索病毒数据怎么处理|数据解密恢复

尊敬的读者&#xff1a; 近年来&#xff0c;随着信息技术的迅猛发展&#xff0c;网络安全问题日益凸显&#xff0c;其中勒索病毒成为了一大威胁。.[[backupwaifu.club]].svh、.[[MyFilewaifu.club]].svh勒索病毒就是其中之一&#xff0c;它以其独特的传播方式和恶劣的加密手段…...

SpringFramework实战指南(八)

SpringFramework实战指南(八) 5.1 场景设定和问题复现5.2 解决技术代理模式5.1 场景设定和问题复现 准备AOP项目 项目名:spring-aop-annotation pom.xml <dependencies><!--spring context依赖--><!--当你引入Spring Context依赖之后,表示将Spring的基础依赖…...

Ceph学习 -4.Ceph组件介绍

文章目录 1.Ceph组件介绍1.1 组件介绍1.2 流程解读1.2.1 综合效果图1.2.2 数据存储逻辑 1.3 小结 1.Ceph组件介绍 学习目标&#xff1a;这一节&#xff0c;我们从组件介绍、流程解读、小结三个方面来学习。 1.1 组件介绍 无论是想向云平台提供 Ceph 对象存储和 Ceph 块设备服务…...

Python100个库分享第13个—awesome-slugify(处理Unicode)

目录 专栏导读库的介绍库的安装基础用法1&#xff1a;用‘-’连接基础用法1&#xff1a;汉字转拼音用‘-’连接有个类似的库 —python-slugify安装总结 专栏导读 &#x1f338; 欢迎来到Python办公自动化专栏—Python处理办公问题&#xff0c;解放您的双手 &#x1f3f3;️‍…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...