SDK
demo app
release
并上传 source maps
release
GitHub
帐户和存储库Sentry organization
Projects
以显示所有项目的列表+ Create Project
按钮
注意:如果您的帐户中没有项目 --- 您可能会被重定向到入门向导以创建您的第一个项目。
如果您尚未定义任何团队(Team
),您可以选择默认组织团队(与您的 Sentry
组织同名的团队)或单击 +
按钮创建新团队。
DSN key
并将其放在手边,因为我们会将密钥复制到源代码中。DSN(或数据源名称)告诉 SDK 将事件发送到何处,将它们与您刚刚创建的项目相关联。
Got it!
按钮以创建项目。您可以为每个项目创建各种警报规则,并让 Sentry
知道您希望在应用程序中发生错误时通知的时间(when
)、方式(how
)和对象(whom
)。警报规则(Alert rules
)由条件(Conditions
)和操作(Actions
)组成,它们在满足相关条件时执行。有关更多信息,请参阅 Alerts
。创建新项目时,您可以选择使用警报规则创建它,该规则在第一次出现新问题时通知所有项目团队成员(通过电子邮件)。这意味着下次发生类似错误时,不会触发通知,因为该错误不是“新的”。
在此步骤中,您将创建一个新的 Alert
规则,在每次(every time
)事件发生时发出通知,即使它与已经存在的问题相关联。在实际的场景中,您可能会添加额外的条件,因为您不希望每次在终端用户浏览器的前端代码中发生事件时都得到通知。
Project Settings
)Alerts
以打开警报配置页面New Alert Rule
“New Alert Rule”
表单中,选择 “Issue Alert”
类型并输入以下值每次在所有环境(
All Environments
)中通过邮件(
Save Rule
以创建新规则Demo App
源代码需要 NodeJS
开发环境来安装和运行应用程序。确保您已准备好以下各项:
frontend-monitoring
示例代码库Fork
并选择您希望将此存储库分叉到的目标 GitHub
帐户fork
完成后,单击 Clone
或 download
,然后复制存储库 HTTPS URL
> git clone <repository HTTPS url>
frontend-monitoring
项目Sentry
通过在应用程序运行时中使用特定于平台的 SDK
来捕获数据。要使用 SDK
,请在源代码中导入并配置它。 demo
项目使用 React
和 Browser JS
。最快的入门方法是使用 JavaScript browser SDK
的 CDN
托管版本,但是,您也可以通过 NPM
安装 browser SDK
。
index.html
文件(位于 ./frontend-monitoring/public/ 下)请注意,我们在代码中尽可能早地导入和初始化
SDK
。初始化SDK
时,我们提供所需的配置。唯一的强制配置选项是DSN key
,但是,SDK 支持多个其他配置选项。有关更多信息,请参阅配置。 https://docs.sentry.io/platforms/javascript/configuration/
Sentry SDK
配置中,输入您从上一节创建的项目中复制的 DSN
key 值。Sentry.init({
dsn: "<PASTE YOUR DSN KEY HERE>",
});
在你的 localhost
上构建和运行 Demo
应用程序:
shell
终端并将目录更改为 frontend-monitoring
项目文件夹.nvmrc
文件设置与本项目兼容的 Node
版本。运行:> nvm use
> npm install
localhost
上构建、部署和运行项目:> npm run deploy
部署成功完成后,您将在终端中看到确认信息。
localhost
链接来启动 demo app
Console
验证是否发生了错误
Buy!
将产品添加到购物车的按钮Checkout
按钮以生成错误
请注意:
Sentry
上配置的电子邮件地址的警报,通知您应用中发生的错误
Sentry
的电子邮件通知
Sentry
上的查看以在您的 Sentry
帐户中查看此错误的完整详细信息和上下文
Exception
堆栈跟踪
我们在 frontend-monitoring
项目中使用 Makefile
来利用 sentry-cli
处理与 Sentry
相关的任务。CLI
已通过项目依赖项(请参阅 package.json
)提供,并且需要几个参数才能运行。
Makefile
SENTRY_AUTH_TOKEN
、 SENTRY_ORG
和 SENTRY_PROJECT
(删除前导 #
)
SENTRY_ORG
和 SENTRY_PROJECT
值Settings > Projects
Organization ID
是浏览器 URL
的一部分(例如,_https://sentry.io/settings/**SENTRY_ORG**/projects/_)SENTRY_PROJECT
值是出现在 project tile
中的名称
Makefile
中SENTRY_AUTH_TOKEN
Developer Settings
菜单选项名称以创建新的集成(integration
)和组织级(org-level
)身份验证令牌(auth token
)New Internal Integration
Name
Permissions
下设置 Release:Admin
和 Organization:Read & Write
Save Changes
TOKENS
下分配的令牌
Makefile
中Makefile
应如下所示:
现在我们可以调用 sentry-cli
来让 Sentry
知道我们有一个新 release
并将项目的 source maps
上传到它。
release version
以适应您的命名约定,或者让 Sentry CLI
建议一个版本。frontend-monitoring
项目,我们使用 react-scripts
包,它也在 ./build/static/js/
下生成 source maps
在 Makefile
中,为 release version
添加一个新的环境变量,利用 Sentry CLI
提出版本值
在 Makefile
的底部,使用 Sentry CLI
将以下目标粘贴到:
Makefile
包含一个 setup_release
目标,该目标在运行 $ npm run deploy
以构建和运行项目时从 package.json
文件中调用。我们将使用这个目标来调用所有与 release
相关的任务。
Sentry
帐户中创建一个新的 release entity
将现有的 setup_release
替换为:
您的 Makefile
应如下所示:
现在您创建了 release version
,您可以通过 SDK
将应用中捕获的任何错误与该 release
相关联。
打开 index.html
文件并向 SDK
添加一个新的配置选项。将 release version
环境变量分配给 release key
注意:release version 环境变量是在构建时在 project.json 中设置的,并被注入到生成的标记中。
localhost
上提供 demo app
,请单击 ^C
关闭本地服务器> npm run deploy
注意:Makefile 在缩进方面通常是严格的。如果您在运行上述命令时遇到意外错误,请确保 sentry-cli 命令正确地以制表符(tab)为前缀。
minified
的脚本和 source maps
已上传到 release version
。
Empty Cache and Hard Reload
)以确保提供更新的代码。
Checkout
再次生成错误issue
页面创建 release version
并通过 Sentry CLI
上传 source maps
,在您的 Sentry 帐户中创建一个 Release entity
。
Releases
,注意创建了一个新的 release version
release
,注意您的应用程序中的错误已与此 release
相关联并列为New IssueArtifacts
选项卡,注意 minified
的资源和 source maps
可用于此 release
并用于 source map
堆栈跟踪Sentry
使用源代码存储库中的提交元数据(metadata
)来帮助您更快地解决问题。这是通过建议可能在您的问题(issue
)详细信息页面中引入错误的可疑提交(Suspect Commits
)来完成的。它还允许 Sentry
显示 Suggested Assignees
- 这些提交的作者列表并建议他们分配以解决问题(issue
)。
现在您已经创建了一个 release
,您可以告诉 Sentry
哪些提交与您的最新版本的代码相关联 —— 这称为提交跟踪(Commit Tracking
)。
GitHub
与您的 Sentry 组织(org
)集成,请按照 GitHub
文档中的说明进行操作GitHub
帐户添加 frontend-monitoring
存储库现在您已经在 Sentry
中设置了 releases
作为 CI/CD
流程的一部分并集成了源代码存储库,您可以将链接存储库中的提交与发布相关联。
现在,您已经在 Sentry
中设置了 release
作为 CI/CD
流程的一部分,并集成了源代码存储库,您可以将链接存储库
中的 commits
与 releases
相关联。
注意:在 demo 项目中,我们使用 Makefile 来处理与构建相关的任务。如果您没有使用提供的 React demo 代码并且没有 Makefile,您可以选择直接从命令行运行本教程中使用的 sentry-cli 命令,或者将这些命令集成到相关的构建脚本中。
Makefile
associate_commits:
sentry-cli releases -o $(SENTRY_ORG) -p $(SENTRY_PROJECT) set-commits --auto $(REACT_APP_RELEASE_VERSION)
该命令将 commits 与 release 相关联。auto 标志自动确定存储库名称,并将前一个 release 的提交和当前主提交之间的提交与该 release 相关联。
associate_commits
将作为 setup_release
目标的一部分被调用,在最后添加它:setup_release: create_release upload_sourcemaps associate_commits
您的 Makefile
应如下所示:
localhost
上提供 demo app
,请按 ^C
将其关闭> npm run deploy
在终端日志中,请注意 sentry-cli
标识了 GitHub
存储库。
现在可疑提交(suspect commits
)和建议受理人(suggested assignees
)应该开始出现在问题(issue
)页面上。Sentry
通过将 release
中的提交、这些提交涉及的文件、堆栈跟踪中观察到的文件、这些文件的作者和所有权规则联系在一起来确定这些。
Checkout
来生成错误Suspect Commits
)部分查看(View)
以打开问题(issue
)页面SUSPECT COMMITS
部分现在指向最有可能引入错误的提交。您可以单击提交(commit)
按钮在 GitHub
上查看实际提交详细信息Suggested Assignees
--- 您将看到可疑提交的作者被列为此问题的建议受理人(suggested assignee
)您可以通过单击图标将建议受理人分配给问题。但是,在这种情况下,提交源于上游存储库,并且建议受理人不是您组织的一部分。或者,您可以手动将问题分配给分配给项目的其他用户或团队。
Assignment
下拉列表并选择一个项目用户或团队release
标签并将鼠标悬停在 i
图标上release
弹出窗口中,注意 release
现在包含提交数据(commit data
)i
图标打开 release
详细信息页面Commits
选项卡。请注意,release
现在包含相关的提交列表Associate Commits
)Global Integrations
)