Hotjar是什么？sentry是什么？

最新推荐文章于 2025-05-23 14:41:23 发布

菜鸟-小张

最新推荐文章于 2025-05-23 14:41:23 发布

阅读量1k

点赞数 18

文章标签： sentry javascript 开发语言学习方法

本文链接：https://blog.csdn.net/weixin_72299343/article/details/148024880

版权

因为在对网站的维护中我们需要去了解用户在该网站那些地方停留的时间长，点击次数多，以及出现的问题多，什么问题等等一系列的，为此我们为了更好的满足用户的需求，让用户使用的更加方便，从而使网站更受青睐，所以我们需要去进行网站的监控来实现。

Hotjar 是一款集成了多种用户行为分析工具的产品，主要用于帮助网站或应用开发者了解用户如何与他们的产品互动。它通过可视化工具（如热图、录屏）和反馈工具（如调查问卷、表单分析）来收集数据，从而优化用户体验、提升转化率。

Hotjar 的核心功能

热图（Heatmaps）
显示用户在页面上点击、滚动和移动鼠标的热区，直观反映用户的注意力分布。支持分析桌面端和移动端的不同行为。
会话录制（Session Recordings）
录制真实用户的浏览过程，观察用户的操作路径、卡点或异常行为。
反馈工具（Feedback & Surveys）
在页面上嵌入调查问卷或即时反馈按钮，直接收集用户意见。
表单分析（Form Analytics）
分析表单填写过程中的流失率，找出导致用户放弃填写的字段。
用户测试（User Testing）
邀请目标用户完成特定任务并录制屏幕，获取深度反馈。

如何使用 Hotjar？

1. 访问 Hotjar 官网，使用对应的版本

2. 在 Hotjar 后台创建项目，输入网站URL。

3. 获取唯一的跟踪代码（JavaScript 代码片段），将其添加到网站的 <head> 标签中，或通过 Google Tag Manager 等工具部署。

4. 在hotjar上进行查看发现的痛点（如按钮点击率低、表单流失率高）调整页面设计、内容或流程。

Sentry 是一款开源的 实时错误监控和日志追踪工具，主要用于帮助开发者快速发现、诊断和修复应用程序中的错误（如代码异常、性能问题、崩溃等）。它支持多种编程语言和平台（Web、移动端、后端），并提供详细的错误报告、上下文信息和告警功能。

核心功能

错误监控（Error Tracking）
- 自动捕获未处理的异常、崩溃、日志错误（JavaScript、Python、Java、Go 等）。
性能监控（Performance Monitoring）
- 分析请求延迟、数据库查询慢等问题。
事件日志（Event Logging）
- 记录自定义事件（如用户操作、API 调用）。
告警与集成（Alerts & Integrations）
- 通过邮件、Slack、钉钉等通知开发团队。
用户反馈（User Feedback）
- 收集用户遇到错误时的附加描述（如截图、评论）。

如何使用sentry？

1. 注册与安装

访问 Sentry 官网注册账号（提供免费计划）。
创建项目（选择对应的平台，如 JavaScript、Python、React Native 等）。

2. 集成到项目

前端（以 React 为例）

# 安装 SDK
npm install @sentry/react @sentry/tracing



// 初始化 Sentry（通常在入口文件，如 index.js）
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "YOUR_DSN_KEY", // 从 Sentry 后台获取
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0, // 性能监控采样率
});

后端（以 Node.js 为例）

npm install @sentry/node @sentry/tracing



const Sentry = require("@sentry/node");
const Tracing = require("@sentry/tracing");

Sentry.init({
  dsn: "YOUR_DSN_KEY",
  tracesSampleRate: 1.0,
});

// 捕获未处理的异常
process.on("unhandledRejection", (err) => {
  Sentry.captureException(err);
});

移动端（以 React Native 为例）

npm install @sentry/react-native


import * as Sentry from "@sentry/react-native";

Sentry.init({
  dsn: "YOUR_DSN_KEY",
});

3. 验证安装

触发一个测试错误（如手动抛出异常）：
```
throw new Error("This is a test error!");
```
在 Sentry 后台查看是否捕获到错误。

4. 查看错误报告

Issues 面板：查看错误堆栈、发生频率、影响用户数。
Breadcrumbs：错误发生前的用户操作日志。
环境/版本过滤：区分开发、生产环境错误。

5. 配置告警

在 Sentry 后台设置规则（如“同一错误1小时内触发10次”），并绑定通知渠道（Slack、邮件等）。

工具	主要用途	特点
Sentry	错误监控 + 性能分析	多语言支持，深度错误上下文
Hotjar	用户行为分析（热图、录屏）	可视化用户体验问题
LogRocket	错误 + 会话录屏	结合错误和用户操作回放