[[420986]]

本文轉載自微信公眾號「黑客下午茶」，作者為少 。轉載本文請聯系黑客下午茶公眾號。

系列

快速使用 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，然后在錯誤詳情中應看到如下圖：