前言

React 是一個(gè)用于構(gòu)建用戶界面的 JavaScript 框架。它采用了虛擬 DOM 和 JSX，提供了一種聲明式的、組件化的編程模型，以便更高效地構(gòu)建用戶界面。無(wú)論是簡(jiǎn)單還是復(fù)雜的界面，React 都可以勝任。

YApi 是使用 React 編寫(xiě)的高效、易用、功能強(qiáng)大的 api 管理平臺(tái)，旨在為開(kāi)發(fā)、產(chǎn)品、測(cè)試人員提供更優(yōu)雅的接口管理服務(wù)，官網(wǎng)地址：YApi-高效、易用、功能強(qiáng)大的可視化接口管理平臺(tái)?，以下以 YApi 為例來(lái)接入如何實(shí)現(xiàn) React 應(yīng)用的可觀測(cè)性。

環(huán)境信息

• nodejs（7.6+)

接入方案

準(zhǔn)備工作

• 注冊(cè)觀測(cè)云賬號(hào)（?Guance?）
• 安裝 yapi（?內(nèi)網(wǎng)部署?）

第一步：在觀測(cè)云創(chuàng)建應(yīng)用

這里面的就是配置代碼，后面會(huì)用到。

第二步：下載 yapi 管理后臺(tái)

可以使用可視化部署（推薦）或者命令行部署，按需選擇其中之一都可以。

//以下兩種方式選擇一種即可//1 可視化部署
npm install -g yapi-cli --registry https://registry.npm.taobao.org
yapi server// 2 命令行部署
mkdir yapi
cd yapi
git clone https://github.com/YMFE/yapi.git vendors //或者下載 zip 包解壓到 vendors 目錄（clone 整個(gè)倉(cāng)庫(kù)大概 140+ M，可以通過(guò) `git clone --depth=1 https://github.com/YMFE/yapi.git vendors` 命令減少，大概 10+ M）
cp vendors/config_example.json ./config.json //復(fù)制完成后請(qǐng)修改相關(guān)配置
cd vendors
npm install --production --registry https://registry.npm.taobao.org
npm run install-server //安裝程序會(huì)初始化數(shù)據(jù)庫(kù)索引和管理員賬號(hào)，管理員賬號(hào)名可在 config.json 配置
node server/app.js //啟動(dòng)服務(wù)器后，請(qǐng)?jiān)L問(wèn) 127.0.0.1:{config.json配置的端口}，初次運(yùn)行會(huì)有個(gè)編譯的過(guò)程，請(qǐng)耐心等候

這里我們采用第一種方式，以下是運(yùn)行的過(guò)程。

安裝后的目錄結(jié)構(gòu)如下：

接入觀測(cè)云 SDK

接入觀測(cè)云 SDK 有兩種方式：npm 或者 cdn，選擇其中一種即可。

npm 方式接入

在項(xiàng)目根目錄執(zhí)行以下腳本安裝 sdk 。

npm install @cloudcare/browser-rum

安裝腳本后，找到入口文件，并粘貼如下代碼，注意修改。

//引入觀測(cè)云rum的sdk
import { datafluxRum } from '@cloudcare/browser-rum'

cdn 方式接入

在當(dāng)前目錄下找到 index.hml 并把觀測(cè)云接入代碼拷貝到 head 標(biāo)簽內(nèi)，如下圖所示。

配置啟動(dòng)參數(shù)

通過(guò)配置的參數(shù)能設(shè)置應(yīng)用名稱、版本、環(huán)境、采樣率等。

cdn 方式接入

cdn 方式接入有同步或異步，如果選擇同步方式，可以按照如下接入。

npm 方式接入

//初始化sdk
datafluxRum.init({applicationId: 'react_yapi',//應(yīng)用idsite: 'https://rum-openway.guance.com',clientToken:"***" // 請(qǐng)?jiān)?.1的第一步中創(chuàng)建的內(nèi)容查看clientTokenenv: 'production',version: '1.0.0',sessionSampleRate: 100,sessionReplaySampleRate: 70,trackInteractions: true,traceType: 'ddtrace', // 非必填，默認(rèn)為ddtrace，目前支持 ddtrace、zipkin、skywalking_v3、jaeger、zipkin_single_header、w3c_traceparent 6種類型allowedTracingOrigins: ['https://api.example.com', /https:\/\/.*\.my-api-domain\.com/],  // 非必填，允許注入trace采集器所需header頭部的所有請(qǐng)求列表?？梢允钦?qǐng)求的origin，也可以是正則
})

啟動(dòng)項(xiàng)目

我們啟動(dòng)項(xiàng)目，命令如下：

node server/app.js

檢查是否有數(shù)據(jù)上報(bào)，如果在 network 看到有 rum 的數(shù)據(jù)，則說(shuō)明上報(bào)成功。

實(shí)踐效果

• 用戶會(huì)話、軌跡

• 頁(yè)面報(bào)錯(cuò)、性能以及設(shè)備等信息

• 錄制回放效果，包括能直接看到報(bào)錯(cuò)的詳情

• 概覽信息

• 性能看板

• 資源分析

• 報(bào)錯(cuò)分析

總結(jié)

通過(guò)觀測(cè)云 SDK 接入 React 應(yīng)用，能有效的實(shí)現(xiàn)實(shí)時(shí)監(jiān)測(cè)和分析，優(yōu)化性能，簡(jiǎn)化錯(cuò)誤追蹤，增進(jìn)開(kāi)發(fā)、測(cè)試、產(chǎn)品協(xié)作。