使用Highlight实现Remix全栈应用监控指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00967/article/details/148440920

使用Highlight实现Remix全栈应用监控指南

highlight highlight.io: The open source, full-stack monitoring platform. Error monitoring, session replay, logging and more. 项目地址: https://gitcode.com/gh_mirrors/hi/highlight

前言

在现代Web开发中，全栈应用监控变得越来越重要。Highlight项目为Remix框架提供了完整的监控解决方案，能够同时捕获前端会话回放和后端错误监控。本文将详细介绍如何在Remix应用中集成Highlight，实现全方位的应用监控。

Highlight与Remix集成概述

Highlight为Remix应用提供两大核心功能：

前端监控：记录用户会话回放、捕获客户端错误
服务端监控：追踪Node.js服务器错误和性能问题

这种全栈监控能力让开发者能够全面了解应用运行状况，快速定位和解决问题。

安装配置

首先安装Highlight的Remix SDK：

npm install @highlight-run/remix
# 或
yarn add @highlight-run/remix

客户端监控配置

基础配置

在应用的根组件中注入<HighlightInit />：

// app/root.tsx
import { HighlightInit } from '@highlight-run/remix/client'

export default function App() {
  return (
    <html lang="en">
      <HighlightInit
        projectId={process.env.HIGHLIGHT_PROJECT_ID}
        serviceName="my-remix-frontend"
        tracingOrigins
        networkRecording={{ enabled: true }}
      />
      {/* 应用其他内容 */}
    </html>
  )
}

关键配置项说明：

projectId: 项目唯一标识，从环境变量获取
serviceName: 服务名称，用于区分不同服务
tracingOrigins: 启用请求追踪
networkRecording: 记录网络请求

高级配置选项

排除特定域名：通过excludedHostnames排除不需要监控的域名

<HighlightInit
  excludedHostnames={['localhost', 'staging']}
  // 其他配置...
/>

记录请求头和正文：更详细的网络请求记录

networkRecording={{ 
  enabled: true, 
  recordHeadersAndBody: true 
}}

错误边界处理

为捕获未处理的客户端错误，创建自定义错误边界组件：

// app/components/error-boundary.tsx
import { ReportDialog } from '@highlight-run/remix/report-dialog'

export function ErrorBoundary() {
  const error = useRouteError()
  
  if (error instanceof Error) {
    return (
      <div>
        <h1>应用出错</h1>
        <p>{error.message}</p>
        <pre>{error.stack}</pre>
        <ReportDialog /> {/* Highlight错误报告对话框 */}
      </div>
    )
  }
  // 其他错误类型处理...
}

然后在根组件中导出：

// app/root.tsx
export { ErrorBoundary } from '~/components/error-boundary'

服务端监控配置

基础错误处理

在服务端入口文件中初始化Highlight并配置错误处理：

// app/entry.server.tsx
import { H, HandleError } from '@highlight-run/remix/server'

const nodeOptions = { 
  projectID: process.env.HIGHLIGHT_PROJECT_ID 
}

H.init(nodeOptions)

export const handleError = HandleError(nodeOptions)

自定义错误处理

如果需要自定义错误处理逻辑，可以扩展默认处理：

export function handleError(
  error: unknown,
  dataFunctionArgs: LoaderFunctionArgs | ActionFunctionArgs,
) {
  const handleError = HandleError(nodeOptions)
  handleError(error, dataFunctionArgs)
  
  // 自定义错误处理逻辑
  console.error('自定义错误日志:', error)
  // 可以添加邮件通知、Slack通知等
}

流式响应错误处理

对于流式HTML响应，使用renderToPipeableStream的onError回调：

function handleBrowserRequest(request, responseStatusCode, responseHeaders, remixContext) {
  return new Promise((resolve, reject) => {
    const { pipe, abort } = renderToPipeableStream(
      <RemixServer context={remixContext} url={request.url} />,
      {
        onShellReady() {
          // ...正常处理
        },
        onError(error) {
          logError(error, request)
        }
      }
    )
  })
}

function logError(error, request) {
  const parsed = request 
    ? H.parseHeaders(Object.fromEntries(request.headers))
    : undefined

  if (error instanceof Error) {
    H.consumeError(error, parsed?.secureSessionId, parsed?.requestId)
  } else {
    H.consumeError(
      new Error(`未知错误: ${JSON.stringify(error)}`),
      parsed?.secureSessionId,
      parsed?.requestId
    )
  }
}