cecf
/
otel-webjs-library


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>中电汇通 opentelemetry-js 示例</title>
    <base href="/">
    <!--
  https://www.w3.org/TR/trace-context/
  Set the `traceparent` in the server's HTML template code. It should be
  dynamically generated server side to have the server's request trace Id,
  a parent span Id that was set on the server's request span, and the trace
  flags to indicate the server's sampling decision
  (01 = sampled, 00 = not sampled).
  '{version}-{traceId}-{spanId}-{sampleDecision}'
  -->
    <meta name="traceparent" content="00-ab42124a3c573678d4d8b21ba52df3bf-d21f7bc17caa5aba-01" />

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> -->
</head>

<body>
    <h3>这是一个简单实例</h3>

    <br />
    <button id="button">Test</button>
    <script src="index.js" data-service-name="szhmh_front" data-service-version="1.0.0" data-app-alias="ZTGLPT"
        data-exporter-otlp-trace-endpoint="http://observe-front.cestong.com.cn/col/v1/traces" data-mode="dev"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</body>
<script>
    const getData = (url) => fetch(url, {
        method: 'GET',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
    });
    CecfOtel.OneTrace(() => {
        getData('https://httpbin.org/get?a=1').then((_data) => {
            console.log("a1", _data)
        })
        getData('https://httpbin.org/get?a=2').then((_data) => {
            console.log("a2", _data)
        })
        $.ajax({
            type: 'GET',
            url: 'https://httpbin.org/get?a=3',
            dataType: 'json',
            contentType: 'text/plain',
            async: true,
            success: function (res) {
                console.log("a3 ajax", res)
            }
        });
    });
    const button = document.querySelector("button");

    button.addEventListener("click", (event) => {
        button.textContent = `Click count: ${event.detail}`;
    });
</script>

</html>