Svelte
Sentry's Svelte SDK enables automatic reporting of errors and exceptions, as well as tracing for your client-side Svelte apps.
除了捕获错误，您还可以通过启用追踪来监控多个服务或应用程序之间的交互。您还可以通过会话重放更快地找到错误或性能问题的根本原因，观看用户会话的视频回放。
选择您希望安装的 Sentry 功能（除错误监控外），以获取相应的安装和配置说明。
Sentry 通过在应用程序运行时使用 SDK 来捕获数据。
npm install @sentry/svelte --save
配置应在应用程序生命周期的尽可能早阶段进行。
To use the SDK, initialize it in your Svelte entry point before bootstrapping your app. In a typical Svelte project, that is your main.js or main.ts file.
main.jsimport "./app.css";
import App from "./App.svelte";
import * as Sentry from "@sentry/svelte";
// Initialize the Sentry SDK here
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [
Sentry.browserTracingIntegration(),
Sentry.replayIntegration(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Capture Replay for 10% of all sessions,
// plus 100% of sessions with an error
// Learn more at
// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
const app = new App({
target: document.getElementById("app"),
});
export default app;
Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also manually capture errors.
根据您项目的设置方式，Sentry 错误中的堆栈跟踪可能不会显示为您的实际代码。
要解决此问题，请将源映射上传到 Sentry。最简单的方法是使用 Sentry 向导：
npx @sentry/wizard@latest -i sourcemaps
向导将引导您完成以下步骤：
- 登录 Sentry 并选择一个项目
- 安装必要的 Sentry 包
- 配置您的构建工具以生成和上传源映射
- 配置您的 CI 以上传源映射
有关源映射的更多信息或更多上传选项，请参阅我们的 源映射文档。
此代码片段包含一个有意的错误，因此您可以立即测试设置是否正常工作。
SomeCmponent.svelte<button
type="button"
on:click={() => {
throw new Error("Sentry Frontend Error");
}}
>
Throw error
</button>;
This snippet adds a button that throws an error in a Svelte component.
了解更多关于手动捕获错误或消息的信息，请参阅我们的使用文档。
要查看和解决记录的错误，请登录 sentry.io 并选择您的项目。单击错误标题将打开一个页面，您可以在其中查看详细信息并将其标记为已解决。