错误监控——sentry源码_sentry 源码-优快云博客

本文探讨了Sentry的sentry-javascript库，特别是其针对不同平台（如react、vue、next）的包装。核心功能集中在browser包，它整合了core和utils，提供hub和client等关键概念。在调用init时，会处理参数，初始化hub，并在全局环境中创建和绑定hub。以react平台为例，展示了从暴露基础功能到调用browserInit进行初始化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

sentry-javascript为语言包，在该语言包下包含各项平台包
其中：

诸如react、vue、next等框架包为平台包，主要是引用browser功能并增添平台相关特性
browser包为浏览器侧的统一内容封装，降低各平台间差异，其主要部分来自于core及utils
core封装如hub、client、integration等核心概念，其hub部分由hub等于单独封装
utils封装平台、模块无关的公用方法

当调用init时：

平台相关参数集成与默认参数处理
将客户端相关参数层层解析初始化最终传递进hub中
- 获取主载体环境（global）
- 在该载体上获取或创建hub
- 将客户端环境与该hub绑定
  - 初始化设置客户端环境相关integration
  - 如果不传递参数默认该客户端环境绑定默认integration

以下以react平台为例：

sentry/react

index.js

暴露基础功能
暴露react相关集成功能

export * from '@sentry/browser';

export {
   
    init } from './sdk';
export {
   
    Profiler, withProfiler, useProfiler } from './profiler';
export type {
   
    ErrorBoundaryProps, FallbackRender } from './errorboundary';
export {
   
    ErrorBoundary, withErrorBoundary } from './errorboundary';
export {
   
    createReduxEnhancer } from './redux';
export {
   
    reactRouterV3Instrumentation } from './reactrouterv3';
export {
   
    reactRouterV4Instrumentation, reactRouterV5Instrumentation, withSentryRouting } from './reactrouter';
export {
   
    reactRouterV6Instrumentation, withSentryReactRouterV6Routing, wrapUseRoutes } from './reactrouterv6';

sdk

增加包相关元信息作为参数
调用browserInit进行初始化

import {
   
    BrowserOptions, init as browserInit, SDK_VERSION } from '@sentry/browser';

/**
 * Inits the React SDK
 */
export function init(options: BrowserOptions): void {
   
   
  options._metadata = options._metadata || {
   
   };
  options._metadata.sdk = options._metadata.sdk || {
   
   
    name: 'sentry.javascript.react',
    packages: [
      {
   
   
        name: 'npm:@sentry/react',
        version: SDK_VERSION,
      },
    ],
    version: SDK_VERSION,
  };
  // 传递参数实例化一个browser客户端实例
  // 将该客户端实例绑定到当前环境集成中心
  browserInit(options);
}

sentry/browser

index.js

暴露基础功能
暴露集成配置

export * from './exports';

import {
   
    Integrations as CoreIntegrations } from '@sentry/core';
import {
   
    getGlobalObject } from '@sentry/utils';

import * as BrowserIntegrations from './integrations';

let windowIntegrations = {
   
   };

// This block is needed to add compatibility with the integrations packages when used with a CDN
const _window = getGlobalObject<Window>();
if (_window.Sentry && _window.Sentry.Integrations) {
   
   
  windowIntegrations = _window.Sentry.Integrations;
}

const INTEGRATIONS = {
   
   
  ...windowIntegrations,
  ...CoreIntegrations,
  ...BrowserIntegrations,
};

export {
   
    INTEGRATIONS<