无法用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错误对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/537563.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

林江院长赴长沙见证爱尔眼科巩膜镜技术诊疗门诊启动仪式

近日&#xff0c;爱尔眼科“巩膜镜技术诊疗门诊、视觉康复及训练门诊”启动会在湖南长沙顺利举行。旨在通过成立爱尔眼科巩膜镜技术诊疗门诊、视觉康复及训练门诊&#xff0c;为有需要的疑难屈光不正患者提供全新的诊疗途径&#xff0c;为各年龄阶段人群视觉问题提供更全面的个…

[数据结构初阶]二叉树

我们在前两篇博客中主要介绍了堆及其应用&#xff0c;针对的对象堆是完全二叉树&#xff0c;存储方式采用顺序结构存储的方式。 那么好的&#xff0c;这篇博客我们浅谈二叉树的链式存储&#xff0c;针对的对象是二叉树&#xff0c;并不局限于完全二叉树了&#xff01; 我们先来…

PlayerSettings.WebGL.emscriptenArgs设置无效的问题

1&#xff09;PlayerSettings.WebGL.emscriptenArgs设置无效的问题 2&#xff09;多个小资源包合并为大资源包的疑问 3&#xff09;AssetBundle在移动设备上丢失 4&#xff09;Unity云渲染插件RenderStreaming&#xff0c;如何实现多用户分别有独立的操作 这是第381篇UWA技术知…

MySOL之旅--------MySQL数据库基础( 3 )

本篇碎碎念:要相信啊,胜利就在前方,要是因为一点小事就停滞不前,可能你也不适合获取胜利,成功的路上会伴有泥石,但是走到最后,你会发现身上的泥泞皆是荣耀的勋章! 今日份励志文案: 凡是发生皆有利于我 目录 查询(select) 1.全列查询 2.指定列查询 3.查询字段为表达式 ​编…

PVE系统的安装

一.PVE系统的安装 前置准备环境:windows电脑已安装Oracle VM VirtualBox,电脑支持虚拟化,且已经开启,按住ctrl+shift+ESC打开任务管理器查看是否开启,如果被禁用,可进入BIOS开启虚拟化,重启电脑后再进行后续操作。本步骤选用windows10安装VirtualBox,版本为7.0.8。 …

被拒绝的职场空窗期,到底该怎么办?

打工人的心头刺 最近&#xff0c;一则新闻在网上炸开了锅&#xff1a;一位求职者因职场空窗期超过三个月&#xff0c;竟被无情拒绝应聘。消息一出&#xff0c;瞬间引起了广大职场人的共鸣。在这个快节奏的时代&#xff0c;我们似乎被一种无形的力量推着&#xff0c;不敢休息&am…

高性能代码如何编写?

引言&#xff1a; 性能优化一直是一个至关重要的议题。随着应用程序规模的不断增长和用户对性能的不断提升的要求&#xff0c;开发人员需要更加关注如何编写高性能的代码&#xff0c;以确保应用程序能够在各种情况下都能保持稳定和高效。编写高性能代码需要从多个方面入手&…

编译Nginx配置QUIC/HTTP3.0

1. 安装BoringSSL sudo apt update sudo apt install -y build-essential ca-certificates zlib1g-dev libpcre3 \ libpcre3-dev tar unzip libssl-dev wget curl git cmake ninja-build mercurial \ libunwind-dev pkg-configgit clone --depth1 https://github.com/google/b…

耐受强酸碱PFA试剂瓶高纯实验级进口聚四氟乙烯材质取样瓶

PFA取样瓶作为实验室中常备器皿耗材之一&#xff0c;主要用来盛放、储存和运输样品&#xff0c;根据使用条件不同&#xff0c;也可叫特氟龙试剂瓶、样品瓶、储样瓶、广口瓶、进样瓶等。广泛应用于半导体、新材料、多晶硅、硅材、微电子等行业。近年来随着新兴行业的快速发展&am…

软考 — 系统架构设计师 - 嵌入式真题

问题1&#xff1a; 可靠度表示系统在规定条件下&#xff0c;规定的时间内不发生失效的概率。 失效率表示系统运行到此时从未出现失效的情况下&#xff0c;单位时间内系统出现失效的概率 问题 2&#xff1a; 动态冗余又称为主动冗余&#xff0c;通过故障检测&#xff0c;故障定…

麒麟系统(kylin)安装ssh后,无法上传文件

1.赋予文件夹权限 chmod 777 filename 2.修改ssh配置文件 vi /etc/ssh/sshd_config 将Subsystem sftp /xxxxx 改为Subsystem sftp internal-sftp 重启服务 sudo service sshd restart 断开ssh连接&#xff0c;重新连接&#xff0c;即可正常上传文件

2012年认证杯SPSSPRO杯数学建模D题(第二阶段)人机游戏中的数学模型全过程文档及程序

2012年认证杯SPSSPRO杯数学建模 D题 人机游戏中的数学模型 原题再现&#xff1a; 计算机游戏在社会和生活中享有特殊地位。游戏设计者主要考虑易学性、趣味性和界面友好性。趣味性是本质吸引力&#xff0c;使玩游戏者百玩不厌。网络游戏一般考虑如何搭建安全可靠、丰富多彩的…

MindOpt APL向量化建模语法的介绍与应用(2)

前言 在数据科学、工程优化和其他科学计算领域中&#xff0c;向量和矩阵的运算是核心组成部分。MAPL作为一种数学规划语言&#xff0c;为这些领域的专业人员提供了强大的工具&#xff0c;通过向量式和矩阵式变量声明以及丰富的内置数学运算支持&#xff0c;大大简化了数学建模…

数学建模-Matlab中randperm函数及其双重进阶版

1.randperm函数的用法 &#xff08;1&#xff09;这种用法就是参数只有一个数字&#xff0c;代表的含义就是随机排列之后打印输出&#xff1b; 我们举例的数字是4&#xff0c;就会把1到4这4个数字随机打乱之后随机输出&#xff0c;每次运行结果都不一样 所有可能的情况是n的…

第十三章 OpenGL ES-RGB、HSV、HSL模型介绍

第十三章 OpenGL ES-RGB、HSV、HSL模型详细介绍 第一章 OpenGL ES 基础-屏幕、纹理、顶点坐标 第二章 OpenGL ES 基础-GLSL语法简单总结 第三章 OpenGL ES 基础-GLSL渲染纹理 第四章 OpenGL ES 基础-位移、缩放、旋转原理 第五章 OpenGL ES 基础-透视投影矩阵与正交投影矩阵…

面试:如何设计一个注册中心?

大家好&#xff0c;我是田哥 上周&#xff0c;一位群里的朋友反馈面试情况&#xff1a; 今天&#xff0c;给大家分享如何设计一个注册中心。其实这个问题&#xff0c;我之前在知识星球里分享过&#xff0c;可能是因为时间比较久了&#xff0c;加上这位朋友加入不久&#xff0c;…

五步搭建:用HelpLook零代码创建企业专属知识库

随着企业的不断发展&#xff0c;拥有一个强大的企业知识库不仅能促进内部沟通&#xff0c;还能展示企业专业形象。HelpLook作为一款简单好用AI知识库搭建系统&#xff0c;只需5步&#xff0c;即可能够零代码帮助企业建立专属知识库。 一、如何从0到1搭建企业知识库&#xff1f;…

ARL资产侦察灯塔系统

1、资产侦察灯塔系统搭建 1.1、系统要求 目前暂不支持 Windows&#xff0c;Linux 和 MAC 建议采用 Docker 运行&#xff0c;系统配置最低 2 核 4G。 由于自动资产发现过程中会有大量的的发包&#xff0c;建议采用云服务器可以带来更好的体验 实验环境&#xff1a; 系统&…

数据结构复习指导之顺序表上基本操作的实现(插入、删除、查找)

文章目录 顺序表基本操作实现 知识总览 1.顺序表的初始化 1.1静态分配顺序表的初始化 1.2动态分配顺序表的初始化 2.插入操作 2.1插入操作流程 2.2插入操作时间复杂度 3.删除操作 3.1删除操作流程 3.2删除操作时间复杂度 4.查找操作 4.1按位查找 4.2按位查找时间…

NetBox4 安装指南-为网络工程师打造的基础设施管理(全面汉化)

介绍 NetBox 是用于建模和记录现代网络的领先解决方案。由 结合 IP 地址管理 &#xff08;IPAM&#xff09; 的传统应用和 具有强大 API 和扩展的数据中心基础架构管理 &#xff08;DCIM&#xff09;&#xff0c; NetBox 为推动网络自动化提供了理想的“事实来源”。 NetBox 在…