Forem: ccsunny

Integrating OpenTelemetry SDK in a React Project

ccsunny — Sat, 02 Aug 2025 06:00:30 +0000

Integrating OpenTelemetry SDK in a React Project

OpenTelemetry is a powerful observability framework that allows developers to collect and export telemetry data from their applications. In this article, we'll walk through the steps to integrate OpenTelemetry into a React project, enabling you to monitor performance and trace requests effectively.

Prerequisites

Before we start, ensure you have the following:

A React application set up (you can use Create React App).
Basic understanding of JavaScript and React.
Node.js and npm installed on your machine.

Step 1: Install OpenTelemetry Packages

First, we need to install the necessary OpenTelemetry packages. Open your terminal and run:

npm install @opentelemetry/api @opentelemetry/sdk-trace-web @opentelemetry/instrumentation-fetch @opentelemetry/instrumentation-xml-http-request

Explanation

@opentelemetry/api: The core API for OpenTelemetry.
@opentelemetry/sdk-trace-web: The SDK for web applications.
@opentelemetry/instrumentation-fetch: For tracing fetch requests.
@opentelemetry/instrumentation-xml-http-request: For tracing XMLHttpRequests.

Step 2: Set Up OpenTelemetry in Your Application

Next, we need to initialize OpenTelemetry in our React application. Create a new file named otel.js in the src directory.

// src/otel.js
import { NodeTracerProvider } from '@opentelemetry/node';
import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
import { BatchSpanProcessor } from '@opentelemetry/tracing';
import { SimpleSpanProcessor } from '@opentelemetry/tracing';
import { ConsoleSpanExporter } from '@opentelemetry/tracing';
import { registerInstrumentations } from '@opentelemetry/instrumentation';
import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch';
import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request';

// Initialize the provider
const provider = new WebTracerProvider();

// Set up span processor and exporter
provider.addSpanProcessor(new SimpleSpanProcessor(new ConsoleSpanExporter()));

// Register instrumentations
registerInstrumentations({
  instrumentations: [
    new FetchInstrumentation(),
    new XMLHttpRequestInstrumentation(),
  ],
});

// Register the provider
provider.register();

Explanation

We create a WebTracerProvider to handle tracing for web applications.
We use SimpleSpanProcessor and ConsoleSpanExporter for demonstration, which logs spans to the console.
We register instrumentations to automatically trace fetch and XMLHttpRequest calls.

Step 3: Import OpenTelemetry in Your Application

Now, we need to import our OpenTelemetry setup in the main entry point of your application. Open src/index.js and add the following line at the top:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import './otel'; // Import OpenTelemetry setup

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Explanation

By importing ./otel, we initialize OpenTelemetry when the application starts, allowing it to begin tracing as soon as possible.

Step 4: Create a Sample Component to Test Tracing

Let’s create a simple component that makes a fetch request. Create a new file called FetchData.js in the src directory:

// src/FetchData.js
import React, { useEffect, useState } from 'react';

const FetchData = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>Fetched Data</h1>
      {data && data.map(item => (
        <div key={item.id}>
          <h3>{item.title}</h3>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
};

export default FetchData;

Explanation

This component fetches data from a placeholder API and displays it.
The fetch request will be automatically traced by OpenTelemetry due to our previous setup.

Step 5: Use the Component in Your App

Finally, use the FetchData component in your main App.js file:

// src/App.js
import React from 'react';
import FetchData from './FetchData';

const App = () => {
  return (
    <div>
      <h1>OpenTelemetry in React</h1>
      <FetchData />
    </div>
  );
};

export default App;

Explanation

The FetchData component is rendered within the main application, allowing us to see the fetched data and the associated traces.

Step 6: Run Your Application

Now, run your application with:

npm start

Open your browser and navigate to http://localhost:3000. You should see the fetched data displayed, and you can check your console for any OpenTelemetry traces.

Conclusion

You have successfully integrated OpenTelemetry into your React application! This setup allows you to trace HTTP requests and monitor your application's performance. You can further enhance this integration by exporting traces to a backend observability platform like Jaeger or Zipkin for more advanced analysis.

Feel free to explore more OpenTelemetry features and customize your setup according to your needs!

V8 fast-property in Object

ccsunny — Sun, 18 May 2025 13:39:29 +0000

V8 Object takeaway

Array-indexed properties are stored in a separate elements store.
Named properties are stored in the properties store.
Elements and properties can either be arrays or dictionaries.
Each JavaScript object has a HiddenClass associated that keeps

Element

function Foo() {
    this[100] = 'test-100'
    this[1] = 'test-1'
    this["B"] = 'bar-B'
    this[50] = 'test-50'
    this[9] = 'test-9'
    this[8] = 'test-8'
    this[3] = 'test-3'
    this[5] = 'test-5'
    this["A"] = 'bar-A'
    this["C"] = 'bar-C'
}
var bar = new Foo()
for(key in bar){
    console.log(`index:${key} value:${bar[key]}`)
}

Property

function Foo2(property_num,element_num) {
    for (let i = 0; i < element_num; i++) {
      this[i] = `element${i}`
    }
    for (let i = 0; i < property_num; i++) {
    let ppt = `property${i}`
    this[ppt] = ppt
}}
var bar2 = new Foo2(20, 10)

Resources

https://v8.dev/blog/fast-properties

Building V8 from source is a huge task for my Mac

ccsunny — Sun, 18 May 2025 11:17:00 +0000

Took me an hour finally done...

mac@nico v8 % ./tools/dev/gm.py x64.optdebug
# mkdir -p out/x64.optdebug
# echo > out/x64.optdebug/args.gn << EOF
is_component_build = true
is_debug = true
symbol_level = 1
target_cpu = "x64"
v8_enable_sandbox = true
v8_enable_backtrace = true
v8_enable_fast_mksnapshot = true
v8_enable_verify_heap = true
v8_optimized_debug = true
EOF
# gn gen out/x64.optdebug
Done. Made 741 targets from 215 files in 2714ms
# autoninja -C out/x64.optdebug d8
ninja: Entering directory `out/x64.optdebug'
[1339/2355] CXX obj/torque_generated_initializers/set-symmetric-difference-tq-csa.o

[1429/2355] CXX obj/torque_generated_initializers/megadom-handler-tq-csa.o



[2355/2355] LINK ./d8
Done! - V8 compilation finished successfully.

Introducing Baseline: a unified view of stable web features

ccsunny — Mon, 02 Dec 2024 04:27:28 +0000

What is Baseline

Baseline is a comprehensive platform that aggregates and curates stable web features from various sources, offering developers a centralized hub to access, compare, and implement the best tools and technologies available. By consolidating information on web standards, browser support, and community recommendations, Baseline serves as an invaluable resource for both novice and experienced developers.

Why Baseline?

The web development ecosystem is fragmented, with numerous frameworks, libraries, and APIs emerging regularly. This fragmentation can lead to:
Information Overload: Sifting through vast amounts of data to find reliable and stable features is time-consuming.
Compatibility Issues: Implementing features that lack broad browser support can result in inconsistent user experiences.
Technical Debt: Adopting unstable or deprecated features can lead to increased maintenance efforts and technical debt.
Baseline addresses these challenges by providing:
Centralized Information: A single source for up-to-date information on stable web features.
Reliability: Assurance that the features listed are mature, well-supported, and widely adopted.
Efficiency: Streamlined decision-making processes, allowing developers to focus on building rather than researching.

Where you can find baseline

https://webstatus.dev/
https://web-platform-dx.github.io/web-features/web-features/

Why does my flex box become LCP Element only with Text

ccsunny — Sat, 02 Nov 2024 04:52:53 +0000

Why did this div become an LCP (Largest Contentful Paint) element?

<div class="flex gap-1 body-m">
  <span class="cursor-pointer">Login</span>
  or
  <span class="cursor-pointer">Register Now</span>
</div>

Text Block Calculation

LCP considers text blocks as a single unit when they're within a block-level container
This div contains all the text: "Login or Register Now" as one block
Even though individual span elements are smaller, they're calculated together

Solutions if you don't want this element as LCP:

Use inline element:

<span class="flex gap-1">
  <!-- content -->
</span>

Force other elements to be LCP:

<!-- Ensure logo or hero image is larger and loads faster -->
<img 
  src="logo.png" 
  alt="Logo" 
  fetchpriority="high"
/>

Adjust display mode:

<main>
  <h1 class="main-title"><!-- larger text content --></h1>
  <!-- login/register prompt -->
</main>

Best practices:

Specify your intended LCP element (usually a logo, hero image, or main title)
Ensure priority loading for that element
Use inline elements or limit size for secondary text content

How to start Next.js with express

ccsunny — Mon, 28 Oct 2024 08:55:09 +0000

Why do we need to start Next.js with express?

When using Next.js with Express, we need to initialize the Next.js application before handling any requests. app.prepare() does several important things:

Compiles the Next.js application
Prepares the pages directory Sets up the development or production environment Initializes the Next.js server features

const express = require('express');
const next = require('next');
const session = require('express-session');
const passport = require('passport');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
    const server = express();

    // Express middleware
    server.use(express.json());
    server.use(session({ /* config */ }));
    server.use(passport.initialize());

    // Custom API routes
    server.use('/api/v1', require('./routes/api'));

    // WebSocket setup
    const httpServer = require('http').createServer(server);
    const io = require('socket.io')(httpServer);

    // Real-time features
    io.on('connection', (socket) => {
        // Handle socket events
    });

    // Let Next.js handle page routing
    server.all('*', (req, res) => {
        return handle(req, res);
    });

    httpServer.listen(3000);
});

Details of next options

Check the details in next/src/server/next.ts

Shopify ajax api with add cart

ccsunny — Mon, 07 Oct 2024 03:32:50 +0000

The Ajax API provides a suite of lightweight REST API endpoints for development of Shopify themes. The Ajax API can only be used by themes that are hosted by Shopify. You can't use the Ajax API on a Shopify custom storefront.

Key Functionalities:

Adding items to the cart
Updating item quantities in the cart
Removing items from the cart
Retrieving the current cart state

Common Endpoints:

/cart/add.js: Add items to the cart
/cart/update.js: Update items in the cart
/cart/change.js: Change items in the cart (can be used to add, update, or remove)
/cart.js: Get the current cart state

fetch(window.Shopify.routes.root + 'cart.js')
  .then(response => response.json())
  .then(cart => {
    console.log(cart);
  })
  .catch(error => console.error('Error fetching cart:', error));

How to navigate between Shopify app

ccsunny — Sun, 22 Sep 2024 05:24:53 +0000

To redirect to a new page when a button is clicked in a Remix application, you can use the useFetcher hook or a simple button with an onClick handler. Below are two approaches:

Approach 1: Using useFetcher

import { useFetcher } from "@remix-run/react";

function MyButton() {
    const fetcher = useFetcher();

    const handleClick = () => {
        fetcher.load('/new-url'); // Replace with your target URL
    };

    return (
        <fetcher.Form method="post" onSubmit={handleClick}>
            <button type="button" onClick={handleClick}>
                Go to New Page
            </button>
        </fetcher.Form>
    );
}

Approach 2: Using a Simple Button with useNavigate

If you want a simpler approach without using useFetcher, you can use useNavigate from Remix:

import { useNavigate } from "@remix-run/react";

function MyButton() {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate('/new-url'); // Replace with your target URL
    };

    return (
        <button onClick={handleClick}>
            Go to New Page
        </button>
    );
}

Explanation
Approach 1: useFetcher is useful if you want to perform actions that might need to submit data or trigger a loader.
Approach 2: useNavigate is a straightforward way to navigate to a new URL without needing to submit any data.

Chrome extension development: How open popup.html to the right and top of the page

ccsunny — Tue, 10 Sep 2024 18:11:41 +0000

Buy default the popup opened below the extension icon, we can change the position by create a new window

chrome.action.onClicked.addListener(async (tab) => {
    openPopup(tab)
});

const openPopup = async (tab) => {
    const currentWindow = await chrome.windows.getCurrent();
    let window = await chrome.windows.create({
        url: './popup.html',
        type: 'popup',
        width: 320,
        height: 578,
        left: currentWindow.left + currentWindow.width - 320,
        top: 100
    });
    chrome.windows.update(window.id, { focused: true });
}

How to add section link to Squarespace

ccsunny — Sun, 25 Aug 2024 09:54:31 +0000

To link to a specific section in Squarespace, you can follow these steps:

1 Identify the Section ID:

Each section in Squarespace has a unique ID. To find it, you can inspect the page using your browser's developer tools (right-click on the section and select "Inspect").
Look for a section with a class like #section-id in the HTML.

2 Create the Link:

Use the following format to create your link:
bash
Copy
https://yourwebsite.com#section-id
Replace yourwebsite.com with your actual domain and section-id with the ID you found.

3 Add the Link:

You can add this link to buttons, navigation menus, or text links in your Squarespace site.

4 Test the Link:

After saving your changes, click the link to ensure it scrolls to the correct section.

What's Next.js server actions

ccsunny — Sat, 24 Aug 2024 13:24:00 +0000

What's server actions

Server action is async functions that runs on server

async function
runs on server
can called in server component or client component
can called in form or in useEffect

export default function HomePage() {
  // Server Action
  async function updateItemAction() {
    'use server'
    // Mutate data
  }

  return <form action={updateItemAction}>{/* ... */}</form>
}

Thinking on server action

since server action run on server, so it's provide a endpoint(POST) for other application to, but there is some issues we need to think

how can we write API documentation for this endpoints? since we need to learn new concept like server actions, we need to think what's the point of this, personally I don's thinks this is a good way for browser to communicate with server but easy for react projects

SEO management in Next.js 14

ccsunny — Wed, 14 Aug 2024 10:43:33 +0000

1 What Is SEO – Search Engine Optimization?

SEO stands for “search engine optimization.” In simple terms, SEO means the process of improving your website to increase its visibility in Google, Microsoft Bing, and other search engines whenever people search for:
Products you sell.
Services you provide.
Information on topics in which you have deep expertise and/or experience.

Next SEO and Next.js

Next.js has static site generation (SSG) support, which delivers better SEO capability than client-side rendering. It also has an in-built head component to manage SEO meta information like title, description, canonical, and Open Graph tags.

We can use a package called next-seo. Next SEO makes managing SEO easier in your Next.js projects.



pnpm add next-seo

Adding Next SEO to a page



//home.js

import { NextSeo } from 'next-seo';

const Home = () => (
    <>
        <NextSeo
            title="Home Page Title"
            description="Home page description of the page"
        />
        <p>Simple Usage</p>
    </>
);

export default Home;

Default SEO

To add default properties to all of our pages, we can use the DefaultSeo component, instead of manually adding the properties individually to each page. We can also override any property on a page, if needed.

Add the DefaultSeo component to _app.js and add the following code:



//_app.js

import '../styles/globals.css'
import {DefaultSeo} from 'next-seo';

function MyApp({Component, pageProps}) {
    return (
        <>
            <DefaultSeo
                title="Next SEO Example"
                description="Next SEO is a plug in that makes managing your SEO easier in Next.js projects."
                openGraph={{
                    type: 'website',
                    locale: 'en_IE',
                    url: 'https://www.url.ie/',
                    siteName: 'SiteName',
                }}
                twitter={{
                    handle: '@handle',
                    site: '@site',
                    cardType: 'summary_large_image',
                }}
            />
            <Component {...pageProps} />
        </>
    )
}

export default MyApp

Now we add SEO properties to all page cause we add it on _app.js

How to override default SEO properties?

As we add SEO to _app.js works on all page, but we may need some custom logic for different pages like title and meta, We can accomplish this goal by using NextSeo in pages



//blog.js

import {NextSeo} from 'next-seo';

const Blog = () => (
    <>
        <NextSeo
            title="Manage SEO in NextJS with Next SEO"
            description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
            canonical="www.example.com/next-seo-blog"
            openGraph={{
                type: 'article',
                article: {
                    publishedTime: '2022-06-21T23:04:13Z',
                    modifiedTime: '2022-01-21T18:04:43Z',
                    authors: [
                        'https://www.example.com/authors/@firstnameA-lastnameA',
                        'https://www.example.com/authors/@firstnameB-lastnameB',
                    ],
                    tags: ['Tag A', 'Tag B', 'Tag C'],
                },
                url: 'www.example.com/next-seo-blog',
                images: {
                    url: 'https://www.test.ie/images/cover.jpg',
                    width: 850,
                    height: 650,
                    alt: 'Photo of text',
                },
                site_name: 'Next Blog'
            }}
        />
        <p>Manage SEO in NextJS with Next SEO - Blog</p>
    </>
);

export default Blog;

Here, we have overridden the title, description, and other properties. You can also see a few new properties specifically related to our blog posts:

publishedTime: Blog published date
modifiedTime: Blog updated date
tags: Tags associated with the blog post
authors : Author of the blog