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

為少發表於2021-09-01
DockerReactAPP

系列

  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，然後在錯誤詳情中應看到如下圖：

公眾號：黑客下午茶

相關文章