Symfony run process in background

I’m developing a small API for retrieving data based on OAuth 2 with PHP/Drupal/Symfony . This involves retrieving an access code, then retrieving a bearer token from this access code, and finally using this bearer token to retrieve user information. Everything works using a route on a controller, but I want this process to run in the background when the user is logged in to the site, meaning no manual interaction is required on a controller route. Here’s the code:

The controller :

namespace Drupalmy_moduleController;

use DrupalCoreControllerControllerBase;
use DrupalCoreRoutingTrustedRedirectResponse;
use SymfonyComponentHttpFoundationRequest;
use SymfonyComponentDependencyInjectionContainerInterface;

class OAuthController extends ControllerBase {

  protected $oauthClient;

  public function __construct($oauth_client) {
    $this->oauthClient = $oauth_client;
  }

  public static function create(ContainerInterface $container) {
    return new static(
      $container->get('my_module.oauth_client')
    );
  }

  /**
   * Initie le flux OAuth2
   */
  public function initiate() {
    $auth_url = $this->oauthClient->getAuthorizationUrl();
    return new TrustedRedirectResponse($auth_url);
  }

  /**
   * Callback après autorisation
   */
  public function callback(Request $request) {
    $code = $request->query->get('code');

    if (empty($code)) {
        $this->messenger()->addError($this->t('Authorization failed: no code received'));
        return $this->redirect('<front>');
    }

    // Échange le code contre un token
    $token = $this->oauthClient->getAccessToken($code);

    if (!$token || !isset($token['access_token'])) {
      $this->messenger()->addError($this->t('Failed to obtain access token'));
      return $this->redirect('<front>');
    }

    // Récupère les infos utilisateur
    $user_info = $this->oauthClient->getUserInfo($token['access_token']);
    dd($user_info);

    // Stocke le token en session
    $request->getSession()->set('oauth_userinfo', $user_info);

    // Redirige vers la page d'origine
    return $this->redirect('<front>');
  }

The route of the controller :

my_module.oauth_initiate:
  path: '/oauth/initiate'
  defaults:
    _controller: 'Drupalmy_moduleControllerOAuthController::initiate'
    _title: 'Initiate OAuth'
  requirements:
     _user_is_logged_in: 'TRUE'

my_module.oauth_callback:
  path: '/openid-connect/generic'
  defaults:
    _controller: 'Drupalmy_moduleControllerOAuthController::callback'
    _title: 'OAuth Callback'
  requirements:
     _user_is_logged_in: 'TRUE'

The service :

class OAuthClient {

  protected $httpClient;
  protected $openIdConfig;

  public function __construct(ClientFactory $http_client_factory, ConfigFactoryInterface $config_factory) {
    $this->httpClient = $http_client_factory->fromOptions([
      'headers' => [
        'Content-Type' => 'application/x-www-form-urlencoded',
        'Accept' => 'application/json',
      ],
    ]);

    // Charge la configuration du client OpenID Connect "generic"
    $this->openIdConfig = $config_factory->get('openid_connect.client.generic');
  }

  /**
   * Génère l'URL d'autorisation OAuth2
   */
  public function getAuthorizationUrl() {
    $settings = $this->openIdConfig->get('settings');
    $params = [
      'response_type' => 'code',
      'client_id' => $settings['client_id'],
      'scope' => 'openid profile email',
      'redirect_uri' => $this->getRedirectUri(),
    ];
    return $settings['authorization_endpoint']. '?' . http_build_query($params);
  }



  /**
   * Échange le code contre un token
   */
  public function getAccessToken($code) {
    $settings = $this->openIdConfig->get('settings');
    try {
      $clientId = $settings['client_id'];
      $clientSecret = $settings['client_secret'];

      // Configuration complète de la requête
      $options = [
        'headers' => [
          'Content-Type' => 'application/x-www-form-urlencoded',
          'Authorization' => 'Basic ' . base64_encode($clientId . ':' . $clientSecret),
        ],
        'form_params' => [
          'grant_type' => 'authorization_code',
          'code' => $code,
          'redirect_uri' => $this->getRedirectUri(),
        ],
      ];

      $response = $this->httpClient->post($settings['token_endpoint'], $options);

      $body = $response->getBody()->getContents();

      Drupal::logger('oauth')->debug('Token response: ' . $body);

      return Json::decode($body);

    } catch (RequestException $e) {
      $errorDetails = [
        'message' => $e->getMessage(),
        'response' => $e->hasResponse() ? $e->getResponse()->getBody()->getContents() : null,
        'request' => [
          'url' => $e->getRequest()->getUri(),
          'headers' => $e->getRequest()->getHeaders(),
          'body' => $e->getRequest()->getBody()->getContents()
        ]
      ];

      Drupal::logger('oauth')->error('Token error details: @details',
        ['@details' => print_r($errorDetails, true)]
      );

      return FALSE;
    }
  }


/**
 * Récupère les infos utilisateur avec le token
 */
  public function getUserInfo($access_token) {
    try {
      $settings = $this->openIdConfig->get('settings');

      $response = $this->httpClient->get($settings['userinfo_endpoint'], [
        'headers' => [
          'Authorization' => 'Bearer ' . $access_token,
          'Accept' => 'application/json',
        ],
      ]);

      return Json::decode($response->getBody()->getContents());

    } catch (RequestException $e) {
      Drupal::logger('oauth')->error('UserInfo error: @error', [
        '@error' => $e->getMessage()
      ]);
      return FALSE;
    }
  }

in an eventSubscriber I tried to implement something like this but it won’t manage the access code

public function onUserLogin(AccountInterface $account) {
    $session = $this->requestStack->getCurrentRequest()->getSession();
    
    // Si déjà authentifié OAuth, ne rien faire
    if ($session->has('oauth_userinfo')) {
      return;
    }

    // 1. Initier le flux OAuth silencieusement
    try {
      $auth_url = $this->oauthClient->getAuthorizationUrl();

      
      // 2. Faire la requête directement (sans redirection navigateur)
      $client = Drupal::httpClient();
      $response = $client->get($auth_url, ['allow_redirects' => false]);

      // 3. Traiter la réponse
      if ($response->getStatusCode() == 302) {
        $location = $response->getHeader('Location')[0];
        dd($location);
        parse_str(parse_url($location, PHP_URL_QUERY), $params);

        if (!empty($params['code'])) {
          $token = $this->oauthClient->getAccessToken($params['code']);
          
          if ($token && isset($token['access_token'])) {
            $user_info = $this->oauthClient->getUserInfo($token['access_token']);
            $session->set('oauth_userinfo', $user_info);
          }
        }
      }
    } catch (Exception $e) {
      Drupal::logger('log_oauth')->error('Auto-auth failed: @error', ['@error' => $e->getMessage()]);
    }
  }

Thanks in advance for your help

Deploying filament 3 on laravel 12 returns 404

I’m trying to configure a debian 12 VPS to accept my locale project of filament 3.2 on laravel 12. I’ve installed mariadb, apache2 and php8.4. Locally everything works fine but online i got 404 for any route except main. On the VPS I have apache and that’s the .conf regarding the public root. I’ve copied the whole project into www/html directory

<Directory /var/www/>
    Options Indexes FollowSymLinks
    AllowOverride all
    Require all granted
</Directory>

This is the 000-default.conf

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/public
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

If i go into the machine and print the php artisan route:list i got the correct list of route but when i go on them i got a 404. I can reach the / folder where i print a timestamp, i’ve tried to print there a route with the route command and it returns an empty string as laravel didn’t started.

I’ve tried to clean the cache and rebuilt it with no success

# Clear cache
php artisan optimize:clear

# Cache the various components of the Laravel application
php artisan config:cache
php artisan event:cache
php artisan route:cache
php artisan view:cache

Also a simple routing on web.php doesn’t work

Route::get('/test', function () {
    return 'Test route';
});

I’ve also tried to rebuild the symlink for storage since I saw other solved this way, but with no success

php artisan storage:link

What else should i check?

Fatal error: Uncaught ValueError: Path cannot be empty in PHP [closed]

I created a web application using PHP. In here i got a error while i am uploading images. I got this error on only some devices(mobile and pc). Error is mentioned in below. Please give me instructions to fix this.
Fatal error: Uncaught ValueError: Path cannot be empty in C:wamp64wwwBungalowSignupbackend.php on line 39
(!)ValueError: Path cannot be empty in C;lwamp64wwwBungalowSignupbackend.php on line 39

I want a help to fix this error.

JWT Cookie Removed After Page Refresh in React App (Frontend Localhost, Backend Server)

I’m developing a React app (http://localhost:5173) and a PHP backend hosted on a live server. I’m using JWT stored in an HttpOnly cookie for authentication.

When I log in, the backend sets the cookie successfully, and I can see it in Chrome DevTools → Application → Cookies. However, after I refresh the page, the cookie disappears completely, so the user gets logged out.

setcookie('token', $token, [
    'expires' => time() + 3600 * 24,
    'httponly' => true,
    'samesite' => 'Lax', 
    'secure' => false,
]);

header('Content-Type: application/json; charset=UTF-8');
header('Access-Control-Allow-Origin: http://localhost:5173');      
header('Access-Control-Allow-Credentials: true');                
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type, Authorization');

header('X-XSS-Protection: 1; mode=block');
header('X-Frame-Options: SAMEORIGIN');
header('X-Content-Type-Options: nosniff');

Why does the cookie get deleted on refresh in development? How can I persist the HttpOnly JWT cookie across page reloads when the frontend is local (localhost:5173) and the backend is hosted in the server?

I have a JSON script which changes the pickerInput in my shiny app, however the dropdown list closes every time I click the group I want to select

I have this JSON script to make the pickerInput in my shiny app select all individuals by their respective groups, however the dropdown list closes every-time I select a group. I have tried to add evt.stopPropagation(); but this did not work. I want to avoid using other packages aside from shiny, shinyWidgets, and tidyr if possible. If there is a better workaround that achieves my goal but uses the included packages, I would be open to it. enter image description here

Here is my current code

library(shiny)
library(shinyWidgets)

    js <- HTML("
    $(document).ready(function() {
      let clickCounter = 0;
      
      function attachClickHandlers() {
    
      $('.dropdown-header').off('click.groupSelect');
    
        $('.dropdown-header').on('click.groupSelect', function(evt) {
          let groupName = $(this).find('span').text().trim();
          clickCounter++;
          Shiny.setInputValue('group_select', groupName + '_' + clickCounter, {priority: 'event'});
        }).css('cursor', 'pointer'); 
      }
      function waitForPicker() {
        if ($('.dropdown-header').length > 0) {
          attachClickHandlers();
        } else {
          setTimeout(waitForPicker, 100);
        }
      }
      
      setTimeout(waitForPicker, 500);
      
      // reattach when dropdown is opened
      $(document).on('shown.bs.dropdown', function() {
        setTimeout(attachClickHandlers, 50);
      });
    })
    ")
    
    choices <- list("A" = c(1, 2, 3, 4, 5), "B" = c(6, 7, 8, 9, 10))
    
    ui <- fluidPage(
      tags$head(tags$script(js)),
      pickerInput("test", choices = choices, multiple = TRUE),
      textOutput("testOutput")
    )
    
    server <- function(input, output, session) {
      output$testOutput <- renderText({
        if(length(input$test) > 0) {
          paste("Selected:", paste(input$test, collapse = ", "))
        } else {
          "No selection"
        }
      })
      
      
      observeEvent(input$group_select, {
        req(input$group_select)
        
        group_name <- gsub("_[0-9]+$", "", input$group_select)
        
        current_selected <- input$test
        if(is.null(current_selected)) current_selected <- c()
        
        group_values <- choices[[group_name]]
        
        if (is.null(group_values)) return()
        
        # select vs. deselect
        if (length(current_selected) > 0 && all(group_values %in% current_selected)) {
          new_selected <- setdiff(current_selected, group_values)
          
        } else {
          
          new_selected <- unique(c(current_selected, group_values))
        }
        
        updatePickerInput(session, "test", selected = new_selected)
      })
    }
    
    shinyApp(ui = ui, server = server)

Odoo12 Point of Sale: Make sure RPC call is ended before printing the receipt

I need to include some information on the point of sale receipt that should actually be obtained via RPC.

I am using Odoo 12, and I found some problems in my code.
Code is working and I can connect to backend and get the desired data via RPC;

Problem is, receit is being printed before the RPC call is ended and thus, I cannot print the information in receipt.

I have tried to extend the PaymentScreenWidget to force RPC before ticket is printed but no luck.

(I believe problem is on this extend as per my coments in point 4.1)

What I have done:

  • My .js file

“””
odoo.define(‘mymodule.sincronize_receitp’, function (require) {
“use strict”;

var models = require('point_of_sale.models');
var screens = require('point_of_sale.screens');
var rpc = require('web.rpc');
var core = require('web.core');
var _t = core._t;

// 1. Using this approach because having some this._super.apply(this, arguments) errors on functions
var originalOrderInitialize = models.Order.prototype.initialize;
var originalOrderExportForPrinting = models.Order.prototype.export_for_printing;
var originalPushOrder = models.PosModel.prototype.push_order;


// 2. Extend original method for controlling RPC state
models.Order = models.Order.extend({
    initialize: function() {
        //this._super.apply(this, arguments); --- having some errors using this approach
        // Calling the original method by using var creates above
        if (originalOrderInitialize) {
            originalOrderInitialize.apply(this, arguments);
        }
        this.rpc_completed = false;
        this.rpc_data = {};
        this.print_callbacks = [];
    },
    
    //Trying to use callbacks to garantee ticket is printed when all callbacks are ended
    add_print_callback: function(callback) {
        if (this.rpc_completed) {
            callback();
        } else {
            this.print_callbacks.push(callback);
        }
    },
    
    export_for_printing: function() {
        //var receipt = this._super.apply(this, arguments);
        var receipt = originalOrderExportForPrinting ? 
            originalOrderExportForPrinting.apply(this, arguments) : 
            {};
            
        console.log('EXPORT FOR PRINTING');
        
        receipt.rpc_data = this.rpc_completed ? this.rpc_data : { status: 'loading' };
        return receipt;
    }
});

// 3. RPC Call added in push_order
models.PosModel = models.PosModel.extend({
    push_order: function(order) {
        var self = this;
        
        if (!order) {
            return Promise.resolve();
        }

        // Set RPC as pending
        order.rpc_state = 'pending';
        order.rpc_data = { status: 'loading' };

        // First call the original method
        return (originalPushOrder ? originalPushOrder.apply(this, arguments) : Promise.resolve())
            .then(function() {
                // RPC Call
                console.log('START RPC');
                
                return rpc.query({
                    model: 'pos.order',
                    method: 'get_data_rpc',
                    args: [order.unique_id],
                }).then(function(response) {
                    order.rpc_data = response || {};
                    order.rpc_state = 'completed';
                    
                    console.log('RPC ENDED:', response);
                    
                })/*
                    I am having errors using .catch() function but this is not the problem since I can see the RPC call is sucessfull
                    .catch(function(error) {
                    console.error('RPC Error:', error);
                    order.rpc_data = { 
                        error: error.message || 'Erro de comunicação',
                        details: error.data ? error.data.message : ''
                    };
                    order.rpc_state = 'failed';
                });*/
            });
    }
});

// 4. Extend PaymentScreen. I was expecting this is only executed after RPC is ended
screens.PaymentScreenWidget.include({
    validate_order: function(force_validate) {
        var self = this;
        var order = this.pos.get_order();
        
        if (!order || order.is_empty()) {
            return this._super(force_validate);
        }
        
        // 4.1. First, validate the payment normally
        // When I run the code, after validate the order, first I get an error in console for this line, after that, receipt is printed before RPC call
        return this._super(force_validate).then(function() {
            
            // 4.2. Send the order and wait for RPC
            return self.pos.push_order(order).then(function() {
                // 3. At last, print the receipt
                return self.pos.proxy('print_receipt', order.export_for_printing());
            });
        });
    }
});

});

“””

Can anyone help me fix this?

Thank you in advance

is there any conditions for excel file upload using javascript (eg cell b5 contains numerical value)? [closed]

not encountering any error scenario is add conditional statement in below script while uploading excel it should check the particular cell contains numeric and if not numeric no upload and show error in uploading.

const express = require("express");
const fileUpload = require("express-fileupload");
const path = require("path");
const filesPayloadExists = require('./middleware/filesPayloadExists');
const fileExtLimiter = require('./middleware/fileExtLimiter');
const fileSizeLimiter = require('./middleware/fileSizeLimiter');
const PORT = process.env.PORT || 3000;
const app = express();
app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "index.html"));
});
app.post('/upload', fileUpload({
    createParentPath: true
}), filesPayloadExists, fileExtLimiter(['.xlsx', '.xlsm']), fileSizeLimiter, (req, res) => {
    const files = req.files console.log(files) Object.keys(files).forEach(key => {
        const filepath = path.join(__dirname, 'files', files[key].name) files[key].mv(filepath, (err) => {
            if (err) return res.status(500).json({
                status: "error",
                message: err
            })
        })
    }) return res.json({
        status: 'success',
        message: Object.keys(files).toString()
    })
}) app.listen(PORT, () => console.log(Server running on port $ {
    PORT
}));

is there any conditions for excel file upload using java script ( ex. cell b5 contains be numerical value)?

here is the code is there anything to be change

i was expecting the excel file should meet cell b5 in numeric while uploading if not met no upload and should show error

const express = require(“express”);const fileUpload = require(“express-fileupload”);const path = require(“path”);const filesPayloadExists = require(‘./middleware/filesPayloadExists’);
const fileExtLimiter = require(‘./middleware/fileExtLimiter’);const fileSizeLimiter = require(‘./middleware/fileSizeLimiter’);const PORT = process.env.PORT || 3000;const app = express();app.get(“/”, (req, res) => {res.sendFile(path.join(__dirname, “index.html”));
});app.post(‘/upload’,fileUpload({ createParentPath: true }),filesPayloadExists,fileExtLimiter([‘.xlsx’,’.xlsm’]),
fileSizeLimiter,(req, res) => {const files = req.files
console.log(files) Object.keys(files).forEach(key => { const filepath = path.join(__dirname, ‘files’, files[key].name)
files[key].mv(filepath, (err) => {
if (err) return res.status(500).json({ status: “error”, message: err }) }) }) return res.json({ status: ‘success’, message: Object.keys(files).toString() })})app.listen(PORT, () => console.log(Server running on port ${PORT}));

Convert HTML to PDF from frontENd, when download it then format of complaint and opposite poarty changes

Frontend Notice
Under the Consumer Protection Act, 2019
Email:  
FIRST APPEAL NO. G.MANI S/O. GOVINDASAMY….Petitioner/ AppellantVersusCENTRAL BANK OF INDIA…..Opposite Party/ Respondent(s)To,Complainant / Petitioner / Appellant Name:G.MANI S/O. GOVINDASAMYFARIDABAD HARYANA 1220011A. G.MANI S/O. GOVINDASAMYALSO AT: NEW DELHI DELHI 1100921B. G.MANI S/O. GOVINDASAMYALSO AT: NO 1/56B, PILLAYAR KOIL STREET, ANNANGUDI VILLAGE, KATPADI TALUK, VELLORE DISTRICT, TAMIL NADU AMBALA HARYANA 122001TMT. PUSHPA W/O. G. MANINO 1/56B, PILLAYAR KOIL STREET, ANNANGUDI VILLAGE, KATPADI TALUK, VELLORE DISTRICT, TAMIL NADUM. MANOJ KUMAR S/O. G.MANINO 1/56B, PILLAYAR KOIL STREET, ANNANGUDI VILLAGE, KATPADI TALUK, VELLORE DISTRICT, TAMIL NADUM. REKHA D/O. G.MANINO 1/56B, PILLAYAR KOIL STREET, ANNANGUDI VILLAGE, KATPADI TALUK, VELLORE DISTRICT, TAMIL NADUM. HARI KRISHNAN S/O. G.MANINO 1/56B, PILLAYAR KOIL STREET, ANNANGUDI VILLAGE, KATPADI TALUK, VELLORE DISTRICT, TAMIL NADUComplainant / Petitioner / Appellant Advocate Name:MAHIMAI ANTONI JEYAM MA-1/140 Kishangarh, vasanth kunj katti roll opposite SOUTH DELHI 110070Opposite Party / Respondent Name:CENTRAL BANK OF INDIAJHAJJAR HARYANA 1220021A. CENTRAL BANK OF INDIAALSO AT: REP. BY ITS CHAIRMAN AND MANAGING DIRECTOR, CHANDER MUKHI, NARIMAN POINT, MUMBAI-400021, MAHARASHTRA BHIWANI HARYANA 122003THE BRANCH MANAGERCENTRAL BANK OF INDIA, LATHERI BRANCH, VELLORE, VELLORE DISTRICT, TAMIL NADUTHE REGIONAL MANAGER, THE CENTRAL BANK OF INDIANO. 48/49, MONTEITH ROAD, EGMORE, CHENNAI-600068, TAMIL NADUTHE BANKING OMBUDSMAN C/O RESERVE BANK OF INDIAPORT GLASIES, CHENNAI-600001, TAMIL NADU
    

How to Properly Use Separate CSS/JS Assets for Frontend and Admin Layouts in a Single Vue 3 App?

I’m working on a Vue 3 app where I have both a public frontend and an admin panel, each with totally different designs. So, I need to load different CSS/JS files for each one.

I’ve created separate layouts and route groups for frontend and admin, but I’m running into these issues:

Frontend CSS is still active when I visit admin routes.

If I import admin JS/CSS inside the layout, sometimes the page goes blank.

It’s not clear where the best place is to import layout-specific assets.

My questions:
What’s the best practice for separating frontend and admin assets?

Where should I put these files (src/assets/…)? And how should I import them?

Should I consider creating two separate apps?

I’m using Vue 3 with Vue Router and Vite.

Would really appreciate some guidance or examples!

Playwright(JS): Issue with afterAll when timeout error in test

when test1 fails in test suite it executes afterEach and afterAll even though it did not finish executing test2. Especially when test1 fails due to timeout error

    const { test, expect } = require('@playwright/test');
    class TimeoutError extends Error {
        constructor(message) {
            super(message);
            this.name = 'TimeoutError';
        }
   }


    test('test1 - timeout intentionally', async () => {
        console.log('executing test1');
        throw new TimeoutError('Simulated TimeoutError in test2-here after this test   it runs afterEach(Expected) and afterAll(not expected, it should be running after all tests in this suite');
    });

    test('test2 - should still run', async () => {
        console.log('executing test2');
    });

    test.afterEach(async ({ }, testInfo) => {
        console.log('In AFTER_EACH');
    });

    test.afterAll(async () => {
        console.log('In AFTER_ALL');
    });


Expected: AfterAll should run before executing all my tests in the test suite.
Actual: If any test in the suite fails due to timedOut error it is running afterAll without completing the execution of remining cases in the suite

“Why is my React navbar wider than the viewport, causing horizontal scroll?”

“I’m building a React app that includes a Navbar component. The navbar seems to extend beyond the width of the screen, causing a horizontal scroll (x-axis). I tried applying CSS fixes but nothing worked. However, when I recreated the layout in plain HTML and CSS without React, the output was exactly as expected with no horizontal scroll. Why does this happen in React but not in plain HTML/CSS?”

    import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min.js";
import { FaBars } from "react-icons/fa";
import { useEffect, useState } from "react";

import "./Navbar.css";
const Navbar = () => {
  const [hover, setHover] = useState(false);

  const setHoverFunction = () => {
    setHover(true);
    console.log(hover);
  };
  const setHoverFunctionOut = () => {
    setHover(false);
    console.log(hover);
  };

  useEffect(() => {
    document.querySelector(".DropdowN").classList.toggle("show");
  }, [hover]);

  const handleList = () => {
    document.querySelector(".Navbar_links").classList.toggle("show");
  };
  return (
    <nav className="d-block">
    <div className="Navbar_i ">
      <div className="nav-header">

            <div className="Navbar_logo ">SHOP-PAKK</div>
            <button className="nav-toggle" onClick={handleList}>
            <FaBars />
            </button>
            
      </div>

      <ul className="Navbar_links ">
        <li>
          <a href="#home">Home</a>
        </li>
        <li>
          <a href="#about">About</a>
        </li>
        <li
          className="item-down"
          onMouseEnter={setHoverFunction}
          onMouseLeave={setHoverFunctionOut}
        >
          <a href="#services">Services</a>
          <ul className="DropdowN">
            <li className="D-item">
              <a href="#services">Web Development</a>
            </li>
            <li className="D-item">
              <a href="#services">Mobile Development</a>
            </li>
            <li className="D-item">
              <a href="#services">Desktop Apps</a>
            </li>
            <li className="D-item">
              <a href="#services">Embedded System</a>
            </li>
            <li className="D-item">
              <a href="#services">Cyper Secuirity</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#contact">Contact</a>
        </li>
        <li>
          <a href="#blog">Blog</a>
        </li>
      </ul>
    </div>
    </nav>
  );
};

export default Navbar;

and CSS Code

    *,
*::before,
*::after{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
   
}
ul{
    padding: 0;
    margin: 0;
}
html, body, #root {
    /* width: 100%; */
    /* height: 100%; */
    /* position: fixed; */
    /* left: 0px; */
    /* top: 0px; */


    margin: 0;
    padding: 0 ;
    /* max-width: none; */
  }
/* nav{
    width: 100%;
    height: 100px;
    background-color: #252525;
    position: relative;
} */
.Navbar_i {
    /* width: 100% ; */
    height: 100px;
    background-color: #252525;
    /* position: fixed; */
    top: 10px;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
  }
  
.Navbar_logo{
    
    font-size: 35px;
    font-weight: 600;
    color: #e6e6e6;
    /* margin-left: 100px; */
}
.Navbar_links{
    
    height: 100%;
    list-style: none;
   
    /* margin: 0 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.Navbar_links li{
    
    
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
   
  
}

.Navbar_links li a{
    text-decoration: none;
    color: #e6e6e6;
    font-size: 24px;
    font-weight: 500;
    
    height: 100%;
    display: flex;
    align-items: center;
} 

.Navbar_links li a:hover{
    color: #c15c35;
    transition: 0.3s;
}
.item-down{

    position: relative;

}
.DropdowN{
    background-color: transparent;
    width: 250px;
    position: absolute;
    top: 100px;
    right: -50px;
    margin: 0;

    height: auto;
    /* border: 1px solid #c15c35; */
   
    display: none;
   
}
.show{
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease-in-out;
}
.DropdowN li{
    display: block;
    width: 100%;

   
}
.DropdowN li a{
    color: rgba(255, 255, 255, 0.75);
    padding: 4px 10px;
    border-bottom: #c15c35 solid 1px;
    width: 100%;
    background-color: transparent;
}
.DropdowN li a:hover{
    color: #c15c35;
    background-color: #252525;
    transition: 0.3s;
    

}

.nav-toggle{
    display: none;
}

/* @media screen and (max-width: 768px) {
.nav-toggle{
    background-color: transparent;
    font-size: 40px;
    border: none;
    color: #e6e6e6;
    display: block;
}
.nav-toggle:hover{
    color: #c15c35;
    transition: 0.8s;
    transform: rotate(90deg);
}
.Navbar_links{
    display: none ;
}
.Navbar_i{
    display: block;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.nav-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* padding: 0 20px; */
/* } */
/*
.show{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* top: 100px; */
    /* left: 0; */
    /* width: 100%;
    height: 400px;
    background-color: #252525;
    padding: 20px 0;

} */
/* .show li{
    width: 100%;
    text-align: center;

    background-color: tomato;
}
.DropdowN{
    display: none;
}} */ 

Bootstrap 5 vertical alignment of table cells does not work

I’m using Bootstrap 5 to create a responsive table. I want the content of the table cells to be vertically centered, so I applied the align-middle class to the element. However, the content still appears aligned to the top. Here’s a snippet of my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Employee Table</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container my-5">
  <h2 class="text-center mb-4">Employee List</h2>
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-hover align-middle mx-auto" style="width: 80%;">
      <thead class="table-dark text-center">
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th class="text-end">Salary</th>
          <th>Department</th>
          <th>Active</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="text-start">Anna Kovács</td>
          <td class="text-center">28</td>
          <td class="text-end">450,000</td>
          <td class="text-center">Marketing</td>
          <td class="text-center">*</td>
        </tr>
        <!-- Additional rows... -->
      </tbody>
    </table>
  </div>
</div>

<!-- Bootstrap 5 JS (optional) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

LightningChart JS crashes with WebGL errors in React 18 (screen turns black)

I’m using LightningChart JS (@lightningchart/lcjs version ^6.1.1) in a React 18 project, and after running the chart component continuously for about 3 days, it eventually crashes with WebGL-related errors and the chart area turns completely black.

Environment:

  • React: 18
  • LightningChart JS: ^6.1.1
  • Chrome: 132.0.6834.83
  • OS: Ubuntu 2.24

Errors in console:

  1. Uncaught TypeError: Failed to execute ‘clientWaitSync’ on ‘WebGL2RenderingContext’: parameter 1 is not of type ‘WebGLSync’ – lcjs.mjs:10
  2. Uncaught r: EngineError: Couldn’t reserve Framebuffer – lcjs.mjs:10
  3. Uncaught TypeError: Cannot read properties of undefined (reading ‘x0’) – lcjs.mjs:10

These errors don’t happen immediately—they occur after the chart has been rendering continuously for around 72 hours. After that, the chart becomes unresponsive, and the screen goes black.

Browser Console:
enter image description here

Has anyone encountered this issue before with long-running LightningChart JS apps? Could this be related to WebGL resource leaks or memory limits? Any tips on preventing this or detecting it earlier?

Happy to provide a reproducible example if needed.

Thanks in advance!

I’ve followed the official documentation for chart setup and rendering. No custom WebGL code is involved.