@blueking/open-telemetry 0.0.1 → 0.0.3

package/playground/pages/CustomPluginDemo.vue

@@ -1,104 +0,0 @@
-<template>
-  <section class="demo-page">
-    <header>
-      <h2 class="demo-page__title">自定义插件 · createPlugin</h2>
-      <p class="demo-page__desc">
-        SDK 通过 <code>createPlugin</code> 暴露统一的扩展点。本 playground 在初始化时挂载了一个名为
-        <code>playground-bridge</code> 的演示插件：注入 runtime attributes，并在 window 上暴露
-        <code>__bkotEmitDemoSpan</code> 用于手动产生 span。
-      </p>
-    </header>
-
-    <div class="demo-card">
-      <h3 class="demo-card__title">代码片段</h3>
-      <pre class="demo-snippet">{{ snippet }}</pre>
-    </div>
-
-    <div class="demo-card">
-      <h3 class="demo-card__title">手动触发自定义 span</h3>
-      <p class="demo-card__hint">
-        查看控制台 <code>[bk-ot][traces]</code> 中带 <code>playground.manual=true</code> 的 span。
-      </p>
-      <div class="demo-actions">
-        <input
-          v-model="spanName"
-          class="span-input"
-          placeholder="span 名称"
-        />
-        <button
-          class="demo-btn"
-          :disabled="!spanName.trim()"
-          type="button"
-          @click="emitSpan"
-        >
-          发射 span
-        </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';
-
-  type EmitDemoSpan = (name?: string) => void;
-
-  const { entries, push, clear } = useDemoLog();
-  const spanName = shallowRef('playground.custom_event');
-
-  const emitSpan = () => {
-    const fn = (globalThis as unknown as { __bkotEmitDemoSpan?: EmitDemoSpan }).__bkotEmitDemoSpan;
-    if (typeof fn !== 'function') {
-      push('__bkotEmitDemoSpan 未注册，请检查 SDK 是否成功启动', 'error');
-      return;
-    }
-    fn(spanName.value.trim());
-    push(`已通过自定义插件发射 span：${spanName.value}`);
-  };
-
-  const snippet = `import { initBkOT, createPlugin, type BkOTPlugin } from '@blueking/open-telemetry';
-
-const myPlugin: BkOTPlugin = createPlugin({
-  name: 'playground-bridge',
-  init(context) {
-    context.setRuntimeAttributes({ 'playground.demo': true });
-
-    // 自定义业务 span / metric / log，统一走 context 提供的 API
-    const span = context.startSpan('boot.bridge_ready', { 'plugin.boot': true });
-    span.end();
-  },
-});
-
-initBkOT({
-  plugins: [myPlugin],
-});`;
-</script>
-
-<style scoped>
-  .span-input {
-    flex: 1;
-    min-width: 200px;
-    padding: 8px 12px;
-    font-family: inherit;
-    font-size: 14px;
-    color: var(--color-text-primary);
-    background: var(--color-bg);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-sm);
-  }
-
-  .span-input:focus {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 1px;
-  }
-</style>

package/playground/pages/ErrorDemo.vue

@@ -1,75 +0,0 @@
-<template>
-  <section class="demo-page">
-    <header>
-      <h2 class="demo-page__title">错误捕获 · error 插件</h2>
-      <p class="demo-page__desc">
-        监听 <code>window.error</code> 与 <code>unhandledrejection</code>，按错误堆栈 hash 节流（默认 60s 内同 hash 最多
-        5 条）。
-      </p>
-    </header>
-
-    <div class="demo-card">
-      <h3 class="demo-card__title">触发错误</h3>
-      <p class="demo-card__hint">触发后查看控制台 <code>[bk-ot][traces]</code> 中 <code>browser.error</code> span。</p>
-      <div class="demo-actions">
-        <button
-          class="demo-btn demo-btn--danger"
-          type="button"
-          @click="throwSync"
-        >
-          同步抛错
-        </button>
-        <button
-          class="demo-btn demo-btn--danger"
-          type="button"
-          @click="throwAsync"
-        >
-          异步 Promise 拒绝
-        </button>
-        <button
-          class="demo-btn demo-btn--warning"
-          type="button"
-          @click="throwBurst"
-        >
-          连续抛 8 次（演示节流）
-        </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();
-
-  const throwSync = () => {
-    push('准备触发同步异常', 'warn');
-    // 用 setTimeout 让 error 真正进入 window.error 而不是被 click handler 吞掉
-    setTimeout(() => {
-      throw new Error('Demo: 同步异常 ' + Date.now());
-    }, 0);
-  };
-
-  const throwAsync = () => {
-    push('准备触发未捕获 Promise 拒绝', 'warn');
-    void Promise.reject(new Error('Demo: 未处理 promise rejection ' + Date.now()));
-  };
-
-  const throwBurst = () => {
-    push('一秒内连续抛 8 次相同错误，预期前 5 条上报、后 3 条被节流', 'warn');
-    for (let i = 0; i < 8; i += 1) {
-      setTimeout(() => {
-        throw new Error('Demo: 节流测试错误');
-      }, i * 50);
-    }
-  };
-</script>

package/playground/pages/Home.vue

@@ -1,133 +0,0 @@
-<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

@@ -1,120 +0,0 @@
-<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

@@ -1,66 +0,0 @@
-<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

@@ -1,100 +0,0 @@
-<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

@@ -1,92 +0,0 @@
-/*
- * 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),
-  }));