@blueking/open-telemetry 0.0.1

package/playground/pages/Home.vue

@@ -0,0 +1,133 @@
+<template>
+  <section class="demo-page">
+    <header>
+      <h2 class="demo-page__title">@blueking/open-telemetry · Playground</h2>
+      <p class="demo-page__desc">
+        本 playground 演示 SDK 全部内置插件与扩展点的实际用法。打开浏览器控制台即可看到 trace / log / metric
+        三类信号的完整产物。
+      </p>
+    </header>
+
+    <div class="demo-card">
+      <h3 class="demo-card__title">SDK 运行时状态</h3>
+      <p class="demo-card__hint">
+        通过 <code>BkOTInstance.getRuntimeAttributes()</code> 获取当前所有 span / log 都会携带的公共属性。
+      </p>
+      <pre class="demo-snippet">{{ runtimeAttrsText }}</pre>
+      <div class="demo-actions">
+        <button
+          class="demo-btn"
+          type="button"
+          @click="refresh"
+        >
+          刷新运行时属性
+        </button>
+        <button
+          class="demo-btn demo-btn--ghost"
+          type="button"
+          @click="forceFlush"
+        >
+          手动 flush 信号
+        </button>
+      </div>
+    </div>
+
+    <div class="demo-card">
+      <h3 class="demo-card__title">默认开启的内置插件</h3>
+      <ul class="plugin-list">
+        <li
+          v-for="plugin in plugins"
+          :key="plugin.name"
+        >
+          <strong>{{ plugin.name }}</strong>
+          <span>{{ plugin.desc }}</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="demo-card">
+      <h3 class="demo-card__title">最小初始化代码</h3>
+      <pre class="demo-snippet">{{ snippet }}</pre>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { shallowRef } from 'vue';
+
+  import { bkot } from '../bk-ot';
+
+  const runtimeAttrsText = shallowRef('');
+  const refresh = () => {
+    runtimeAttrsText.value = JSON.stringify(bkot.getRuntimeAttributes(), null, 2);
+  };
+  refresh();
+
+  const forceFlush = async () => {
+    await bkot.flush();
+  };
+
+  const plugins = [
+    {
+      name: 'common',
+      desc: '基于 OpenTelemetry 官方 instrumentation 自动埋点 fetch/xhr/document-load/user-interaction',
+    },
+    { name: 'device', desc: '采集设备 / 浏览器 / 网络环境，作为持久 runtime attributes' },
+    { name: 'session', desc: '维护匿名 session id，闲置 30 分钟后自动滚动' },
+    { name: 'page-view', desc: '监听 SPA 路由变化（pushState / popstate / hashchange）上报 PV' },
+    { name: 'error', desc: '捕获 window.error / unhandledrejection 并按 hash 节流上报' },
+    { name: 'web-vitals', desc: '上报 LCP / CLS / INP / FCP / TTFB 等核心 Web Vitals 指标' },
+    { name: 'blank-screen', desc: '在挂载延时后采样根节点像素分布，识别白屏' },
+    { name: 'http-body', desc: '可选地抓取请求 / 响应体，支持 redact 脱敏' },
+    { name: 'long-task', desc: '监听 PerformanceObserver longtask，超过阈值上报' },
+    { name: 'route-timing', desc: '估算 SPA 路由切换耗时（双 raf + 一个宏任务）' },
+    { name: 'csp-violation', desc: '监听 securitypolicyviolation 事件并上报' },
+    { name: 'websocket', desc: '在 WebSocket 生命周期上挂钩，上报连接 / 消息事件' },
+  ];
+
+  const snippet = `import { initBkOT } from '@blueking/open-telemetry';
+
+initBkOT({
+  endpoint: 'https://your-otlp-collector',
+  token: 'your-report-token',
+  debug: true,
+  rum: {
+    fetch: true,
+    xhr: true,
+    documentLoad: true,
+    userInteraction: true,
+    longTask: true,
+    routeTiming: true,
+  },
+});`;
+</script>
+
+<style scoped>
+  .plugin-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: var(--space-sm);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+  }
+
+  .plugin-list li {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: var(--space-sm) var(--space-md);
+    background: var(--color-bg);
+    border-radius: var(--radius-sm);
+  }
+
+  .plugin-list strong {
+    font-family: var(--font-mono);
+    color: var(--color-primary);
+  }
+
+  .plugin-list span {
+    font-size: 12px;
+    color: var(--color-text-secondary);
+  }
+</style>

package/playground/pages/HttpDemo.vue

@@ -0,0 +1,120 @@
+<template>
+  <section class="demo-page">
+    <header>
+      <h2 class="demo-page__title">HTTP 请求 / http-body 插件</h2>
+      <p class="demo-page__desc">
+        common 插件会为 fetch / xhr 自动产生 client span；http-body 插件会按配置抓取请求与响应体（演示中
+        <code>password</code> 字段会被 redact 替换为 <code>***</code>）。
+      </p>
+    </header>
+
+    <div class="demo-card">
+      <h3 class="demo-card__title">触发请求</h3>
+      <p class="demo-card__hint">
+        点击按钮后查看控制台 <code>[bk-ot][traces]</code> 中携带 <code>http.*</code> 的 span。
+      </p>
+      <div class="demo-actions">
+        <button
+          class="demo-btn"
+          :disabled="pending"
+          type="button"
+          @click="callFetchGet"
+        >
+          fetch GET
+        </button>
+        <button
+          class="demo-btn"
+          :disabled="pending"
+          type="button"
+          @click="callFetchPost"
+        >
+          fetch POST(带敏感字段)
+        </button>
+        <button
+          class="demo-btn demo-btn--ghost"
+          :disabled="pending"
+          type="button"
+          @click="callXhr"
+        >
+          XHR GET
+        </button>
+        <button
+          class="demo-btn demo-btn--warning"
+          :disabled="pending"
+          type="button"
+          @click="callFetchError"
+        >
+          fetch 404
+        </button>
+      </div>
+    </div>
+
+    <div class="demo-card">
+      <DemoLogPanel
+        :entries="entries"
+        @clear="clear"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { shallowRef } from 'vue';
+
+  import DemoLogPanel from '../components/DemoLogPanel.vue';
+  import { useDemoLog } from '../composables/use-demo-log';
+  import { httpEndpoints, samplePostBody } from '../mock';
+
+  const { entries, push, clear } = useDemoLog();
+  const pending = shallowRef(false);
+
+  const wrap = async (label: string, runner: () => Promise<unknown>) => {
+    pending.value = true;
+    try {
+      const result = await runner();
+      push(`${label} 成功：${JSON.stringify(result).slice(0, 80)}…`);
+    } catch (error) {
+      push(`${label} 失败：${(error as Error).message}`, 'error');
+    } finally {
+      pending.value = false;
+    }
+  };
+
+  const callFetchGet = () =>
+    wrap('fetch GET', async () => {
+      const response = await fetch(httpEndpoints.echoGet);
+      return response.json();
+    });
+
+  const callFetchPost = () =>
+    wrap('fetch POST', async () => {
+      const response = await fetch(httpEndpoints.echoPost, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(samplePostBody),
+      });
+      return response.json();
+    });
+
+  const callXhr = () =>
+    wrap(
+      'XHR GET',
+      () =>
+        new Promise((resolve, reject) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET', httpEndpoints.echoGet);
+          xhr.onload = () => resolve(xhr.status);
+          xhr.onerror = () => reject(new Error('xhr error'));
+          xhr.send();
+        }),
+    );
+
+  const callFetchError = () =>
+    wrap('fetch 404', async () => {
+      const response = await fetch(httpEndpoints.notFound);
+      if (!response.ok) {
+        throw new Error(`status ${response.status}`);
+      }
+      return response.text();
+    });
+</script>

package/playground/pages/LongTaskDemo.vue

@@ -0,0 +1,66 @@
+<template>
+  <section class="demo-page">
+    <header>
+      <h2 class="demo-page__title">长任务 · long-task 插件</h2>
+      <p class="demo-page__desc">
+        监听 PerformanceObserver 的 <code>longtask</code> 条目，超过 <code>threshold</code>（默认 50ms，演示中为
+        50ms）的任务会上报。
+      </p>
+    </header>
+
+    <div class="demo-card">
+      <h3 class="demo-card__title">在主线程造一个长任务</h3>
+      <p class="demo-card__hint">
+        点击按钮后会用同步 while 循环阻塞主线程指定时长，可对比 <code>&lt; 50ms</code> 时不上报、<code>&gt; 50ms</code>
+        时上报的差异。
+      </p>
+      <div class="demo-actions">
+        <button
+          class="demo-btn"
+          type="button"
+          @click="block(30)"
+        >
+          阻塞 30ms（不上报）
+        </button>
+        <button
+          class="demo-btn demo-btn--warning"
+          type="button"
+          @click="block(120)"
+        >
+          阻塞 120ms
+        </button>
+        <button
+          class="demo-btn demo-btn--danger"
+          type="button"
+          @click="block(450)"
+        >
+          阻塞 450ms
+        </button>
+      </div>
+    </div>
+
+    <div class="demo-card">
+      <DemoLogPanel
+        :entries="entries"
+        @clear="clear"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import DemoLogPanel from '../components/DemoLogPanel.vue';
+  import { useDemoLog } from '../composables/use-demo-log';
+
+  const { entries, push, clear } = useDemoLog();
+
+  // 用 while 循环刻意阻塞主线程，触发 PerformanceObserver longtask 条目
+  const block = (durationMs: number) => {
+    push(`即将阻塞主线程 ${durationMs}ms`, 'warn');
+    const start = performance.now();
+    while (performance.now() - start < durationMs) {
+      // intentionally busy-wait
+    }
+    push(`阻塞结束（实际耗时 ${(performance.now() - start).toFixed(1)}ms）`);
+  };
+</script>

package/playground/pages/WebSocketDemo.vue

@@ -0,0 +1,100 @@
+<template>
+  <section class="demo-page">
+    <header>
+      <h2 class="demo-page__title">WebSocket · websocket 插件</h2>
+      <p class="demo-page__desc">
+        websocket 插件会在 WebSocket 生命周期（open / message / close / error）上挂钩，自动上报关键事件。
+      </p>
+    </header>
+
+    <div class="demo-card">
+      <h3 class="demo-card__title">演示连接</h3>
+      <p class="demo-card__hint">
+        默认连接 <code>{{ websocketEndpoint }}</code
+        >（一个公共 echo server）。点击连接后再点"发送消息"即可看到完整链路。
+      </p>
+      <div class="demo-actions">
+        <button
+          class="demo-btn"
+          :disabled="connected"
+          type="button"
+          @click="connect"
+        >
+          连接
+        </button>
+        <button
+          class="demo-btn demo-btn--success"
+          :disabled="!connected"
+          type="button"
+          @click="send"
+        >
+          发送消息
+        </button>
+        <button
+          class="demo-btn demo-btn--ghost"
+          :disabled="!connected"
+          type="button"
+          @click="disconnect"
+        >
+          断开
+        </button>
+      </div>
+    </div>
+
+    <div class="demo-card">
+      <DemoLogPanel
+        :entries="entries"
+        @clear="clear"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  import { onBeforeUnmount, shallowRef } from 'vue';
+
+  import DemoLogPanel from '../components/DemoLogPanel.vue';
+  import { useDemoLog } from '../composables/use-demo-log';
+  import { websocketEndpoint } from '../mock';
+
+  const { entries, push, clear } = useDemoLog();
+  const socket = shallowRef<null | WebSocket>(null);
+  const connected = shallowRef(false);
+
+  const connect = () => {
+    if (socket.value) {
+      return;
+    }
+    const ws = new WebSocket(websocketEndpoint);
+    socket.value = ws;
+    push(`正在连接 ${websocketEndpoint}`);
+
+    ws.addEventListener('open', () => {
+      connected.value = true;
+      push('WebSocket 已连接');
+    });
+    ws.addEventListener('message', event => {
+      push(`收到消息：${typeof event.data === 'string' ? event.data : '[binary]'}`);
+    });
+    ws.addEventListener('close', event => {
+      connected.value = false;
+      socket.value = null;
+      push(`已断开（code=${event.code}）`, 'warn');
+    });
+    ws.addEventListener('error', () => {
+      push('WebSocket 出错', 'error');
+    });
+  };
+
+  const send = () => {
+    socket.value?.send(`hello from playground @ ${Date.now()}`);
+  };
+
+  const disconnect = () => {
+    socket.value?.close();
+  };
+
+  onBeforeUnmount(() => {
+    socket.value?.close();
+  });
+</script>

package/playground/router/index.ts

@@ -0,0 +1,92 @@
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台 (BlueKing PaaS):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+import { type RouteRecordRaw, createRouter, createWebHashHistory } from 'vue-router';
+
+// hash 路由便于单页静态部署，同时方便演示 hashchange / popstate 路由观察
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    name: 'home',
+    component: () => import('../pages/Home.vue'),
+    meta: { title: '总览' },
+  },
+  {
+    path: '/http',
+    name: 'http',
+    component: () => import('../pages/HttpDemo.vue'),
+    meta: { title: 'HTTP / http-body' },
+  },
+  {
+    path: '/error',
+    name: 'error',
+    component: () => import('../pages/ErrorDemo.vue'),
+    meta: { title: '错误捕获' },
+  },
+  {
+    path: '/business',
+    name: 'business',
+    component: () => import('../pages/BusinessDemo.vue'),
+    meta: { title: '业务事件' },
+  },
+  {
+    path: '/long-task',
+    name: 'long-task',
+    component: () => import('../pages/LongTaskDemo.vue'),
+    meta: { title: '长任务' },
+  },
+  {
+    path: '/websocket',
+    name: 'websocket',
+    component: () => import('../pages/WebSocketDemo.vue'),
+    meta: { title: 'WebSocket' },
+  },
+  {
+    path: '/blank-screen',
+    name: 'blank-screen',
+    component: () => import('../pages/BlankScreenDemo.vue'),
+    meta: { title: '白屏检测' },
+  },
+  {
+    path: '/custom-plugin',
+    name: 'custom-plugin',
+    component: () => import('../pages/CustomPluginDemo.vue'),
+    meta: { title: '自定义插件' },
+  },
+];
+
+export const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export const navItems = routes
+  .filter(route => typeof route.name === 'string')
+  .map(route => ({
+    name: route.name as string,
+    path: route.path,
+    title: (route.meta?.title as string) ?? (route.name as string),
+  }));

package/playground/style.css

@@ -0,0 +1,180 @@
+/*
+ * 全局基础样式：仅约束布局与排版，组件内细节样式靠 scoped 文件管理
+ * 主题色统一通过 CSS 变量驱动，避免重复硬编码
+ */
+:root {
+  --color-bg: #f5f7fa;
+  --color-surface: #fff;
+  --color-border: #e2e8f0;
+  --color-text-primary: #1f2937;
+  --color-text-secondary: #4b5563;
+  --color-text-muted: #94a3b8;
+  --color-primary: #3b82f6;
+  --color-primary-hover: #2563eb;
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-danger: #ef4444;
+  --color-code-bg: #0f172a;
+  --color-code-text: #e2e8f0;
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
+  --shadow-md: 0 4px 12px rgb(15 23 42 / 8%);
+  --font-sans:
+    -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial, 'PingFang SC', 'Hiragino Sans GB',
+    'Microsoft YaHei', sans-serif;
+  --font-mono: 'SFMono-Regular', menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-text-primary);
+  background: var(--color-bg);
+}
+
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--color-primary-hover);
+}
+
+button {
+  font-family: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+code,
+pre {
+  font-family: var(--font-mono);
+}
+
+/* 通用内容块：每个 demo 页面共用 */
+.demo-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.demo-page__title {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+}
+
+.demo-page__desc {
+  margin: 0;
+  color: var(--color-text-secondary);
+}
+
+.demo-card {
+  padding: var(--space-lg);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.demo-card__title {
+  margin: 0 0 var(--space-sm);
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.demo-card__hint {
+  margin: 0 0 var(--space-md);
+  color: var(--color-text-secondary);
+}
+
+.demo-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.demo-btn {
+  padding: 8px 16px;
+  color: #fff;
+  background: var(--color-primary);
+  border: none;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.15s ease-in-out;
+}
+
+.demo-btn:hover {
+  background: var(--color-primary-hover);
+}
+
+.demo-btn--success {
+  background: var(--color-success);
+}
+
+.demo-btn--warning {
+  background: var(--color-warning);
+}
+
+.demo-btn--danger {
+  background: var(--color-danger);
+}
+
+.demo-btn--ghost {
+  color: var(--color-text-primary);
+  background: transparent;
+  border: 1px solid var(--color-border);
+}
+
+.demo-btn--ghost:hover {
+  background: var(--color-bg);
+}
+
+.demo-log {
+  max-height: 240px;
+  padding: var(--space-md);
+  overflow: auto;
+  font-size: 12px;
+  color: var(--color-code-text);
+  background: var(--color-code-bg);
+  border-radius: var(--radius-sm);
+}
+
+.demo-log__line {
+  margin: 0;
+  word-break: break-all;
+  white-space: pre-wrap;
+}
+
+.demo-log__line + .demo-log__line {
+  margin-top: 4px;
+}
+
+.demo-snippet {
+  padding: var(--space-md);
+  overflow: auto;
+  font-size: 12px;
+  color: var(--color-code-text);
+  background: var(--color-code-bg);
+  border-radius: var(--radius-sm);
+}