专栏首页黑客下午茶快速使用 Docker 上手 Sentry-CLI - 玩转 Source Maps 使用 (create-react-app)

快速使用 Docker 上手 Sentry-CLI - 玩转 Source Maps 使用 (create-react-app)

系列

  1. 快速使用 Docker 上手 Sentry-CLI - 创建版本

入门

使用 sentry-cli 上传 source maps 时,您需要设置构建系统以创建版本(release)并上传与该版本对应的各种源文件。要让 Sentry 对您的堆栈跟踪进行解码,请同时提供:

  • 要部署的文件(换句话说,您的编译/压缩/打包(transpilation/minification/bundling) 过程的结果;例如,app.min.js
  • 对应的 source maps

如果 source map 文件不包含您的原始源代码 (sourcesContent),您还必须提供原始源文件。如果源文件丢失,Sentry CLI 将尝试自动将源嵌入到您的 source maps 中。

Sentry 使用 releases 将正确的 source maps 与您的事件相匹配。要创建新版本,请运行以下命令(例如,在发布期间):

sentry-cli releases new <release_name>

release 名称在您的组织中必须是唯一的,并且与您的 SDK 初始化代码中的 release 选项相匹配。然后,使用 upload-sourcemaps 命令扫描文件夹中的 source maps,处理它们,并将它们上传到 Sentry

sentry-cli releases files <release_name> upload-sourcemaps /path/to/files

您可以通过导航到 [Project] > Project Settings > Source Maps 找到上传到 Sentry 的工件。

此命令会将所有以 .js.map 结尾的文件上传到指定的版本(release)。如果你想改变这些扩展 — 例如,上传 typescript 源文件 — 使用 --ext 选项:

sentry-cli releases files <release_name> upload-sourcemaps --ext ts --ext map /path/to/files

到目前为止,该版本处于草稿状态(“unreleased”)。上传所有 source maps 后,您的应用程序已成功发布,使用以下命令完成 release

sentry-cli releases finalize <release_name>

实战

Create React App 快速创建一个 Demo

新建一个 typescript app 模板项目:

npx create-react-app my-app --template typescript

加入 @sentry/react@sentry/tracing 包:

yarn add @sentry/react @sentry/tracing

修改项目代码

进入 src/index.tsx,进行如下调整:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "https://token@your.sentry.com/2", // 你的 Sentry 项目 DSN
  release: "1.0.0",
  integrations: [new Integrations.BrowserTracing()]
});

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

进入 src/App.tsx,进行如下调整:

import React from 'react';
import logo from './logo.svg';
import './App.css';

const onError = () => {
  // 这里故意抛出一个错误,让 sentry 捕获
  throw new Error("Break the world")
}

const btnStyles = {width: "200px", height: "50px", cursor: "pointer", fontSize: "22px"}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <button style={btnStyles} onClick={onError}>Break the world</button>
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

加入 .sentryclirc 文件,详情可看上篇 -> 快速使用 Docker 上手 Sentry-CLI - 创建一个版本

[auth]
token=your-auth-token

[defaults]
org=sentry
project=create-react-app-sentry
url=https://x.xxx.com

编译项目

yarn build

最终项目结构

上传 Source Maps

在项目根目录中,进入 sentry-cli docker 容器 shell 环境:

docker run --rm -it -v $(pwd):/work getsentry/sentry-cli /bin/sh

设置变量:

VERSION="1.0.0" # 版本号
SOURCEMAPS_PATH="./build/static/js" # 构建的 Source Maps
URL_PREFIX="~/static/js/" # 说明你的 js 相关文件被托管在 http://example.com/static/js/ 下

执行如下命令:

sentry-cli releases new "$VERSION"
# Created release 1.0.0.

sentry-cli releases files "$VERSION" upload-sourcemaps "$SOURCEMAPS_PATH" --url-prefix "$URL_PREFIX"
# > Found 8 release files
# > Analyzing 8 sources
# > Analyzing completed in 0.101s
# > Rewriting sources
# > Rewriting completed in 0.034s
# > Adding source map references
# > Bundling files for upload... 
# > Bundling completed in 0.064s
# > Optimizing completed in 0.002s
# > Uploading completed in 2.144s
# > Uploaded release files to Sentry
# > Processing completed in 0.077s
# > File upload complete (processing pending on server)

# Source Map Upload Report
#   Minified Scripts
#     ~/static/js/2.42a26a34.chunk.js (sourcemap at 2.42a26a34.chunk.js.map)
#     ~/static/js/3.edf82367.chunk.js (sourcemap at 3.edf82367.chunk.js.map)
#     ~/static/js/main.d1a3df88.chunk.js (sourcemap at main.d1a3df88.chunk.js.map)
#     ~/static/js/runtime-main.b608d38a.js (sourcemap at runtime-main.b608d38a.js.map)
#   Source Maps
#     ~/static/js/2.42a26a34.chunk.js.map
#     ~/static/js/3.edf82367.chunk.js.map
#     ~/static/js/main.d1a3df88.chunk.js.map
#     ~/static/js/runtime-main.b608d38a.js.map

sentry-cli releases finalize "$VERSION"
# Finalized release 1.0.0.

exit
# 退出容器

Sentry 后台,你应该看到如下图:

本地测试

如果你是 Mac 本地开发环境,可直接执行如下命令:

pushd build; python -m SimpleHTTPServer; popd

点击 Break the world 按钮:

正常情况下,错误已被上传到 Sentry,然后在错误详情中应看到如下图:

本文分享自微信公众号 - 黑客下午茶(hi-weishao),作者:为少

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-09-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sentry-CLI 使用详解(2021 Sentry v21.8.x)

    内容源于:https://docs.sentry.io/platforms/javascript/guides/vue/

    为少
  • Sentry(v20.12.1) K8S 云原生架构探索,SENTRY FOR JAVASCRIPT Source Maps详解

    Sentry 支持通过 source maps(源代码映射)对 JavaScript 进行 un-minifying,这允许您以原始的未转换形式查看从堆栈跟踪中...

    为少
  • 1 分钟快速使用 Docker 上手最新版 Sentry-CLI - 创建一个版本

    我们可以使用官方 sentry-cli 工具操作 Sentry API,从而来为你的项目管理一些数据。它主要用于管理 iOS、Android 的调试信息文件,以...

    为少
  • Sentry Web 性能监控 - Trends

    在 Performance 主页上,您可以通过切换 Performance 主页右上角的选项卡来找到 Trends View。此页面显示随着时间的推移其性能发生...

    为少
  • Sentry(v20.12.1) K8S 云原生架构探索,1分钟上手 JavaScript 性能监控

    通过性能监视,Sentry 可以跟踪您的软件性能,测量吞吐量和延迟等指标,并显示多个系统之间的错误影响。

    为少
  • Sentry Web 性能监控 - Web Vitals

    Web Vitals 是谷歌定义的一组度量指标,用于度量渲染时间(render time)、响应时间(response time)和布局偏移(layout sh...

    为少
  • 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(开发基础篇)

    所以您想要开发一个 SDK ?在你开始之前,这里有一些基本的东西是值得遵循的,以获得更好的体验。

    为少
  • Sentry-JS-SDK-Browser 官方示例最佳实践

    为少
  • Sentry Web 性能监控 - Metrics

    Apdex 是一种行业标准指标,用于根据您的应用程序响应时间(response time)跟踪和衡量用户满意度(satisfaction)。Apdex 分数提供...

    为少
  • 带你了解一些package.json的骚操作

    “ 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货!

    前端老道
  • 常用的package.json,还有这么多你不知道的骚技巧

    在每个项目的根目录下面,一般都会有一个 package.json 文件,其定义了运行项目所需要的各种依赖和项目的配置信息(如名称、版本、许可证等元数据)。

    刘小夕
  • 顶级开源项目 Sentry 20.x JS-SDK 设计艺术(理念与设计原则篇)

    本文档为 Sentry 上的 SDK 开发设置了一些常规指南。它应该帮助内部和外部开发人员了解 SDK 的设计动机以及为什么我们以某些方式做出决定。

    为少
  • 从零构建Sentry v10 进行异常上报

    Sentry 是一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。

    w候人兮猗
  • 从零构建Sentry v10 进行异常上报

    Sentry 是一个开源的实时错误追踪系统,可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。

    w候人兮猗
  • Angular 工具篇之npx及angular-cli-ghpages

    今天本文的两个主角是 npx 及 angular-cli-ghpages,npx 是 npm 5.2 引入了的新的工具, 用于帮助我们执行 npm 二进制任务和...

    阿宝哥
  • Sentry(v20.12.1) K8S 云原生架构探索,JavaScript 性能监控之采样 Transactions

    如果您希望 transactions 的 cross-section 均匀,无论您在应用程序中的何处或在什么情况下发生,并且对下文所述的默认继承和优先级行为感到...

    为少
  • Sentry(v20.12.1) K8S 云原生架构探索,JavaScript Enriching Events(丰富事件信息)

    自定义上下文允许您将任意数据附加到事件。通常,此上下文在其生命周期中捕获的任何 issue 之间都是共享的。您无法搜索这些,但可以在 issue 页面上查看它们...

    为少
  • [译] 面向 React 和 Nginx 的 Docker 多阶段构建

    原文:http://progressivecoder.com/docker-multi-stage-build-for-running-react-applic...

    江米小枣
  • Sentry(v20.12.1) K8S 云原生架构探索,JavaScript 性能监控之管理 Transactions

    @sentry/tracing 包提供了一个 BrowserTracing 集成,以添加 automatic instrumentation 来监视浏览器应用程...

    为少

扫码关注云+社区

领取腾讯云代金券