Category: javascript

enter image description here

actually, server is sending the array that has 3 elements.

but client console says it has 3 elements and it has 1 element at the same time.

and only one element contributes to make an component.

I think that must have 3 elements

I am trying to excess the html element and want to replace the inner content:-
Here is the code i am trying:-

import { RichTextEditorComponent } from "@syncfusion/ej2-react-richtexteditor";

export const handleSignatureSelect = (
  signature: string,
  editorRef: React.RefObject<RichTextEditorComponent>
) => {
  const currentSignature = document.getElementsByClassName("gmail_signature");
  if (currentSignature) {
    currentSignature.innerText = signature;
    return;
  }

  editorRef.current?.executeCommand(
    "insertHTML",
    `<br><br clear="all"><div><br></div><br><div dir="ltr" class="gmail_signature" 
     data-smartmail="gmail_signature">${signature}</div>`
  );
};

I use server components (app router). If the server response is successful (record found in the database), then the page loads. If the record is not found or other server error, then the special errorboundary page is loaded. I used it at the development stage and this is a convenient tool. The problem is that after deploying the site, some pages can be indexed by search engines. If after time the page is deleted, then Google must get an error to remove the page from it’s index. Is it possible to configure so that in case of an error, the correct code (404) will return and page 404 will be loaded? Thanks for any help.
Here is my component:

import Nodata from "@/components/Nodata";
import { IPost } from "@/misc/types";
import Post from "@/wrappers/Post";
import { Metadata, ResolvingMetadata } from "next";
import React from "react";

const HOST = process.env.NEXT_PUBLIC_HOST;

type Props = {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const slug = params.slug;

  // fetch data
  const data: IPost[] = await fetch(`${HOST}/api/news/${String(slug)}`, {
    cache: "no-store",
  })
    .then((res) => res.json())
    .catch((err) => {
      throw new Error("Failed to fetch data");
    });

  const content = data[0];

  return {
    metadataBase: new URL(String(HOST)),
    title: content.title,
    description: content.description,
    openGraph: {
      url: `${HOST}/news/${slug}`,
      title: content.title,
      description: content.description,
    },
  };
}

async function getData(slug: string) {
  const res = await fetch(`${HOST}/api/news/${slug}`, {
    cache: "no-store",
  });
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.

  if (!res.ok) {
    // This will activate the closest `error.js` Error Boundary
    throw new Error("Failed to fetch data");
  }

  return res.json();
}

export default async function Page({ params, searchParams }: Props) {
  const { slug } = params;
  const data = await getData(slug);

  if (data) {
    return <Post data={data[0]} slug={slug} />;
  } else return <Nodata />;
}

error.tsx (the Errorboundary component):

"use client"; // Error components must be Client Components

import ErrWrapper from "@/wrappers/ErrWrapper";
import { useEffect } from "react";

export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to an error reporting service
    console.error(error);
  }, [error]);

  return <ErrWrapper title="Whoops! Something went wrong..." img="oops.png" />;
}

not-found.tsx (404 page):

import ErrWrapper from "@/wrappers/ErrWrapper";

export default function NotFound() {
  return <ErrWrapper title="404 - Document not found" img="404.gif" />;
}

I try to make a api call, In post man return me that error

{
code: 400,
message: ‘Sorry, we can`t found this record.’,
errors: [],
}

but in React Native catch block it return me that error.

[TypeError: Cannot read property ‘data’ of undefined]

here is my code

  const catchHandler = (error, params) => {
    console.log('=================error===================');
    console.log(error);
    console.log(error.message);
    console.log(error.response);
    console.log(error.data);
    console.log(error.body);
    console.log(error.error);
    console.log('====================================');
  };


  const loginAction = async() => {
    try {
     const {data} =  await axiosAPI.post('login/send-verification', body);
      if (data.code == 200) {
        params.cb(data);
      }
      return data;
    } catch (error) {
      catchHandler(error);
    }
  }

and that’s what appear in the log

 LOG  =================error===================
 LOG  [TypeError: Cannot read property 'data' of undefined]
 LOG  Cannot read property 'data' of undefined
 LOG  undefined
 LOG  undefined
 LOG  undefined
 LOG  undefined
 LOG  ====================================

I want to access this message “message: ‘Sorry, we can`t found this record.’,” but I only get undefined

So I Was Looking At Some Arrays Because i wanted to start to learn arrays so i tried pulling up a practice problem but i am still so confused on how to do them and i really need help with this.

This Is The practice problem:

Create a class called ArrayClass:

Add the following instance data members:

• SIZE which is a constant integer with the value of 10 assigned to it.
• An array of integers which is the size of SIZE.
• An integer called howMany.

Add a constructor that:

• Takes in 1 integer argument.

• Assigns the value of the argument to howMany.

Add the following methods:

• A mutator that sets the howMany instance data member.

• An accessor that returns the howMany instance data member.

• An mutator that takes in 2 integers and uses the first integer as an index for the array. The second integer is the value that is going to be placed at said index.

• An accessor that takes in an integer and uses that integer as an index for the array. This accessor needs to return the value in the array that is at the specified index.

• An accessor that prints out all the values inside the array.

• A method that computes the average of the integers within the array. If howMany is not set or zero, this method should return a “NULL” that is used by the driver to print an error message. Otherwise, return a String message that contains the calculated average.

I Could Start To Do The First Part Of This Equation But Then I Was Lost On The “Add The Following Methods” Part

I have a todoList with keyword search, how can I make sure that when I enter a keyword, the content below will be highlighted?

function keysSearch() {
    const inputSearchValue = inputSearch.value.trim().toUpperCase();
    const loadData = loadLocalStorageData();
    const filterSearch = loadData.filter(function (value) {
        if (inputSearchValue) {
            return value.task.toUpperCase().indexOf(inputSearchValue) !== -1
        } else {
            return loadData
        }
    });
    render(filterSearch);
}

I use ReactJS to code Flappy bird game, and i have trouble with flying state and requestAnimationFrame. I use flying state to check the bird up or down, but when i check flying state always false, please help me. I check this button was active.

Please help me, plse

In my codebase I have this code, surprisingly it returns 1:

'ﾄｹﾞ'.indexOf('ｹ') // Returns 1

The character ｹ doesn’t seem to appear in string ﾄｹﾞ.

I also tried to run this code:

'ﾄｹﾞ'.charAt(1)  // Returns `ｹ`

And to my surprise it returns ｹ.

Can you explain why the codes above return 1 and ｹ? Thank you!

I’m intercepting my form submit.

// Validate
$('#transfer-product-modal form').on('submit', function (event) {
    $.ajax({
        type: 'GET',
        url: '?handler=ValidateProductTransfer',
        contentType: 'application/json',
        dataType: 'json',
        data: { ... },
    })
    .done(function (response) {
        if (!response.isSucceeded) {
            alert(response.error);
            event.preventDefault();
        }
    })
    .fail(function (response) {
        alert(response.responseText);
        event.preventDefault();
    });
});

I need to call the server using AJAX, and then allow the form to finish submitting only if response.isSucceeded is true.

The problem is that AJAX runs asynchronously. So the handler returns, and the form finished submiting while I’m still waiting for the AJAX call to complete.

How can I cancel the submit unless the right value is returned from the server?

Im currently trying to have the row height of a wijmo grid extended, but to no avail. I read the official documents and they said to add padding to the css of the grid cells, but in my case, the id is dynamic (meaning it is generated and not fixed). So I do not know how to change the row Height.

I have tried to set the padding from code, but the library made a alt grid just to stop me from changing the row height.

$('#' + 'form-' + currentFormIndex.toString() + '__' + element.Name).find('.wj-cells > .wj-row > .wj-cell').css("padding", "32px");

I want to ask if it is possible to change the row height in js code, OR if it is possible to add the dynamic id inside css files.

I am creating a language-learning app currently. The situation is the following:

It’s a chat app, every time I send a message to the server, the server sends a response back. I then use the google text-to-speech API and want it to be read out loud. This works fine on desktop browser, but the mobile browser isn’t letting me do this.

I read that this is on purpose that they don’t let you autoplay this, but is there any way around this? Because it’s a pretty vital part of my application.

At the moment I use the react-h5-audio-player package. Every time the audioUrl changes (when I get a new message from the server) it should start playing

  <AudioPlayer
       autoPlay
       src={audioUrl}
       onPlay={(e) => console.log("onPlay")}
  />

I know that internalBindings is used in nodejs to help javascript code introduce the c++ module, but in the end v8 will compile javascript into ast. At this time, ast contains both the content of the javascript language and the content referenced by c++.

When executing ast, I wonder if it is parsed When reaching the content referenced by c++, first run the c++ code and then return the result, so that JavaScript can be fully integrated into the c++ code. Is this how v8 runs js code?

Whenever I execute my Webpack-Express middleware, it fails to generate any output files, thereby preventing my Express application from serving my web app.

I have tested the code and it appears to be functioning correctly. The output is displayed in the console as expected.

[  1.10 MiB  ] main: js/main.65110.2f0ac2dbf5373643b598.js
[  1.01 MiB  ] tailwind: css/tailwind.65110.2ac663761d5355043f88.css,js/tailwind.65110.3fcaee0623d8290e9a92.js
[ 321.20 KiB ] app: css/app.65110.80ac8aaf9769a24c2ce4.css,js/app.65110.01d9e024be11cd376f66.js
[ 167.34 KiB ] vendor: vendor/vendor.65110.e74bd23cf598df058d83.js
[ 118.97 KiB ] runtime: js/runtime.65110.20a7f31f725ebb203bd2.js
[ 89.33 KiB  ] router: vendor/vendor.65110.de00f676999e653b97ca.js
[ 65.16 KiB  ] pages: vendor/vendor.65110.8595224050517df47fb5.js
[ 62.42 KiB  ] elements: vendor/vendor.65110.ebb33a61b5f06b02f94c.js
[ 46.72 KiB  ] chunk-75835: vendor/vendor.65110.27c8333b15d813783dba.js
[ 40.13 KiB  ] chunk-41566: vendor/vendor.65110.0290841fab9d0121a5f4.js
[ 35.42 KiB  ] chunk-68739: vendor/vendor.65110.96eca7f153cca90b13db.js
[ 26.61 KiB  ] chunk-95402: vendor/vendor.65110.676e7bb3643093778d4c.js
[ 25.78 KiB  ] chunk-28216: vendor/vendor.65110.31770c056d6be1a607a4.js
[ 24.01 KiB  ] chunk-38149: vendor/vendor.65110.8a0a37957da16b39f3a2.js
[ 22.93 KiB  ] chunk-51054: vendor/vendor.65110.597be2dec4e40a4b483d.js
[ 19.79 KiB  ] chunk-14109: vendor/vendor.65110.26849dffcae753b17489.js
[ 19.32 KiB  ] chunk-61373: vendor/vendor.65110.683a53388725ea3cadfd.js
[ 18.74 KiB  ] chunk-11291: vendor/vendor.65110.7c8245976ae295e8b745.js
[ 16.88 KiB  ] chunk-16190: vendor/vendor.65110.669c9cda889c95a9aa9e.js
[ 14.59 KiB  ] chunk-74100: vendor/vendor.65110.5ca4a65e49a189248208.js
[ 14.41 KiB  ] chunk-19188: vendor/vendor.65110.ef99038a02cfa443f70b.js
[ 13.10 KiB  ] chunk-19581: vendor/vendor.65110.5410463dcb38d4e83f82.js
[ 12.84 KiB  ] chunk-60043: vendor/vendor.65110.54b93221d93c4598e95a.js
[  8.44 KiB  ] chunk-66758: vendor/vendor.65110.eb0d301df1f93dca1019.js
[  8.36 KiB  ] chunk-38688: vendor/vendor.65110.9d0fe9a3160bbeb3f209.js
[  3.71 KiB  ] chunk-76237: vendor/vendor.65110.d37a3e9ad7f930cf3121.js
[  1.33 KiB  ] chunk-72220: vendor/vendor.65110.7dd6946cca8123e44d32.js
[  SUCCESS   ] Webpack build completed successfully!
[  SUCCESS   ] app successfully started!
[    INFO    ] Listening on 0.0.0.0:80

I looked at the code many times and couldn’t find the problem. I searched online for people who had the same issue, but didn’t find anything helpful. Here’s some of my code that might help figure out what’s going on:

webpack:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const webpack = require('webpack');
const path = require('path');

const moduleFileName = Math.floor(10000 + Math.random() * 90000);
const hash = '[contenthash]';

module.exports = function createWebpackConfig() {
  return {
    entry: {
      main: {
        import: path.resolve(__dirname, './src/app.tsx'),
        dependOn: ['vendor'],
      },
      tailwind: path.resolve(__dirname, './src/assets/css/tailwind.css'),
      app: path.resolve(__dirname, './src/assets/css/app.css'),
      vendor: ['react', 'react-router', 'react-router-dom', 'react-dom'],
    },
    output: {
      path: path.resolve(__dirname, './public/cdn'),
      publicPath: 'public',
      filename: (pathData) => {
        if (pathData.chunk.name.startsWith('chunk') || pathData.chunk.name.startsWith('vendor')) {
          return `vendor/vendor.${moduleFileName}.[contenthash].js`;
        } else if (pathData.chunk.name.endsWith('.css')) {
          return `css/[name].${moduleFileName}.${hash}.css`;
        }
        return `js/[name].${moduleFileName}.[contenthash].js`;
      },
      chunkFilename: `vendor/vendor.${moduleFileName}.[contenthash].js`,
      assetModuleFilename: `vendor/vendor.${moduleFileName}.[contenthash].js`,
    },
    module: {
      noParse: /path.js$/,
      rules: [
        {
          test: /.(ts|js)x?$/,
          exclude: /node_modules/,
          use: ['babel-loader'],
        },
        {
          test: /.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
          include: path.resolve(__dirname, 'src/assets/css'),
        },
        {
          test: /.(png|jpe?g|gif)$/i,
          type: 'asset/resource',
        },
        {
          test: /.svg$/,
          use: ['svg-loader', 'file-loader'],
        },
      ],
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.json'],
      plugins: [new TsconfigPathsPlugin({ configFile: 'tsconfig.json' })],
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '@element': path.resolve(__dirname, 'src/components/elements'),
        '@page': path.resolve(__dirname, 'src/pages'),
        '@route': path.resolve(__dirname, 'src/routes'),
        '@import': path.resolve(__dirname, 'src/components/imports'),
        '@component': path.resolve(__dirname, 'src/components'),
        '@global': path.resolve(__dirname, 'src/components/imports/global.ts'),
      },
    },
    plugins: [
      new WebpackNotifierPlugin(),
      new MiniCssExtractPlugin({
        filename: `css/[name].${moduleFileName}.${hash}.css`,
      }),
      new webpack.ProvidePlugin({
        process: 'process',
      }),
      new webpack.IgnorePlugin({
        resourceRegExp: /^./locale$/,
        contextRegExp: /moment$/,
      }),
      //new ESLintPlugin({
      //  extensions: ['js', 'jsx', 'ts', 'tsx'],
      //  fix: true,
      //}),
    ],
    optimization: {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\/]node_modules[\/]/,
            name() {
              const moduleFileName = Math.floor(10000 + Math.random() * 90000);
              return `chunk-${moduleFileName}`;
            },
            chunks: 'all',
          },
        },
      },
      runtimeChunk: 'single',
    },
  } 
}

start:

import { webpackPrepare, Webpack } from '../assets/start/webpack.asset.js';
import { io, app, server, httpServer, } from '../assets/start/http.asset.js'
import { Log, log } from '../assets/messageLevel.asset.js';
import createWebpackConfig from '../../webpack.config.js';
import path from 'path';
import webpack from 'webpack';

const __filename = new URL(import.meta.url).pathname;
const __dirname = path.dirname(__filename);

export default function cmdStart(options) {
  let env = options.env || 'production';
  let port = options.port || '80';
  let enableWatch = options.watch;
  
  if (env === 'dev' || env === 'development') {
    env = 'development';
  } else if (env === 'prod' || env === 'production') {
    env = 'production';
  } else {
    log.error(`Invalid environment: ${env}`);
    log.info(`Please use either prod (production) or dev (development) environments`)
    process.exit(1)
  }

  Log.info(`Starting ${env} environment...`);

  const webpackConfig = createWebpackConfig(env);
  webpackPrepare(env, webpackConfig);
  const compiler = webpack(webpackConfig);
  const originalConsoleLog = console.log;
  httpServer();
  Webpack(compiler, app, io, env, port, enableWatch, webpackConfig, originalConsoleLog);
  server.listen(port);
}

webpack asset:

import webpack from 'webpack';
import webpackDevMiddleware from  'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';

// asset-related packages
import { inject } from './injector.asset.js';
import { webLog } from './webLog.asset.js';
import { Log, log } from '../messageLevel.asset.js';
import { compileTailwindCSS } from './preTailwind.asset.js';

let isWebpackCompiling = false;

function formatSize(sizeInBytes) {
  if (sizeInBytes < 1024) {
    return `${sizeInBytes} Bytes`;
  } else if (sizeInBytes < 1024 * 1024) {
    return `${(sizeInBytes / 1024).toFixed(2)} KiB`;
  } else if (sizeInBytes < 1024 * 1024 * 1024) {
    return `${(sizeInBytes / (1024 * 1024)).toFixed(2)} MiB`;
  } else {
    return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(2)} GiB`;
  }
}

export function webpackPrepare(env, webpackConfig) {
    webpackConfig.mode = env;
    webpackConfig.plugins.push(
    new webpack.DefinePlugin({
        'process.env': {
        NODE_ENV: JSON.stringify(env),
        },
    })
    );
}

export function Webpack(compiler, app, io, env, port, enableWatch, webpackConfig, originalConsoleLog) {
    compiler.hooks.beforeCompile.tap('customLogs', (stats) => {
        isWebpackCompiling = true;
        Log.info('Webpack build starting...');
    });
    app.use('*', (req, res, next) => {
        if (isWebpackCompiling) {
          compileTailwindCSS();
          res.render('compiling');
        } else {
          next();
        }
    });
    console.log = (message) => {
        if (!message.includes('webpack built') && !message.includes('webpack building')) {
          originalConsoleLog(message);
        }
    };
    app.use(webpackDevMiddleware(compiler, {
      publicPath: webpackConfig.output.publicPath,
      stats: 'none',
      serverSideRender: true,
    }));
    
    if (enableWatch) {
        app.use(webpackHotMiddleware(compiler));
    }
    compiler.hooks.afterDone.tap('customLogs', (stats) => {
      app.use((req, res, next) => {
        if (stats.hasErrors()) {
          if (env === 'development') {
            webLog(app, io, res);
          } else {
            defaultError(0);
          }
        } else {
          inject(app, req, res, next);
        }
      });
    });

    compiler.hooks.emit.tapAsync('customLogs', (compilation, callback) => {
      const assetSizes = {};
      const statsJson = compilation.getStats().toJson();
      const assetArray = compilation.getStats().toJson().assets;
      const chunkNames = Object.keys(statsJson.assetsByChunkName);
    
      compilation.getAssets().forEach((asset) => {
        assetSizes[asset.name] = asset.info.size;
      });
      
      for (let i = 0; i < Math.min(assetArray.length, chunkNames.length); i++) {
        const asset = assetArray[i];
        const chunkName = chunkNames[i];
        const assetFileName = statsJson.assetsByChunkName[chunkName];
        const sizeInBytes = asset ? asset.size : NaN;
        const formattedSize = formatSize(sizeInBytes);
        Log.size(`${chunkName}: ${assetFileName}`, formattedSize);
        app.set('assetFiles', statsJson.assetsByChunkName);
      }
    
      callback();
    });
  
    compiler.hooks.done.tap('customLogs', (stats) => {  
      const statsJson = stats.toJson();

      isWebpackCompiling = false;
  
      if (statsJson.errors && statsJson.errors.length > 0) {
        if (env === 'production') {
          defaultError(3);
          process.exit(1);
        } else {
          const errorMessages = [];
          statsJson.errors.forEach((error) => {
              Log.error(error.message);
              errorMessages.push(error.message);
          });
          app.set('consoleError', errorMessages);
        }
        defaultError(0);
      }
  
      if (statsJson.warnings && statsJson.warnings.length > 0) {
        Log.warn('Webpack build encountered warnings:');
        statsJson.warnings.forEach((warning) => {
          Log.warn(warning);
        });
      }
  
      io.emit('compilationComplete');
      io.emit('newChange');
      io.emit('update');
  
      Log.success('Webpack build completed successfully!');
      Log.success('app successfully started!');
      Log.info(`Listening on 0.0.0.0:${port}`);
      if (env === 'development' && enableWatch) {
        Log.info('Watching for changes.');
      }
  }); 
  console.log = originalConsoleLog;
}

export function defaultError() {
    const errorMessages = [
      "An error occurred during the build process. The server will not start.",
      "You must be in the development environment to use the watch feature.",
      "An error occurred. Please try again later.",
    ];
  
    return function (errorCode) {
      const errorMessage = errorMessages[errorCode - 1];
      if (errorMessage) {
        console.error(errorMessage);
      } else {
        console.error("Unknown error code: " + errorCode);
      }
    };
}

If there’s anything I can provide to support your needs, please don’t hesitate to let me know. I’m committed to ensuring that we can work together efficiently and effectively.

I apologize if my question seems unnecessary or irrelevant. Please feel free to let me know if there’s a more pressing issue that I should be addressing instead.

I want to produce a pop up modal either success of error message when user inserts data into database. Below I have a form, two modal and php code for insert data from form into database. What I have done, I set sucsess to true to tambahnotis.php but it does not do anything.

How can I make pop up modal message after update data into database. When user input the form and click submit. Then check whether if data successful insert into database, it will pop up succesful modal, but if the data unsuccessful inserted into database it will pop up unsucessful/error modal.

//tambahnotis.php

<script type="text/javascript">
    <?php
        if ($_GET['sucsess'] == 'true'){
            echo '$(document).ready(function() {
                $( "#modal-simple" ).dialog();
            });';
        }
    ?>
</script>

<form class="card" action="tambahnotisphp.php" method="post" enctype="multipart/form-data" runat="server" >
    <div class="card-body">
        <div class="mb-3">
            <div class="form-label required">Nombor Fail</div>
            <input type="text" class="form-control" name="nomborFail" id="nomborFail" required="" onkeyup="checkUsername(this.value);">
            <div id="uname_response" ></div>
        </div>
        <div class="mb-3">
            <div class="form-label required">Ulasan</div>
            <textarea class="form-control" id="ulasan" name="ulasan" rows="4" cols="50" required=""></textarea>
        </div>
        <div class="mb-3">
            <div class="form-label required">Tarikh Notis Siasatan Dikeluarkan</div>
            <input type="date" class="form-control" name="tarikhNotisKeluar" id="tarikhNotis1" required=""/>
        </div>

        <div class="card-footer">
            <div class="row align-items-center">
            <div class="col"></div>
                <div class="col-auto">
                    <button type="submit" name="submit" class="btn btn-primary btnTambahNotis">Tambah Notis</button>
                </div>
            </div>
        </div>
    </div>
</form>


<div class="modal modal-blur fade" id="modal-small" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Success</div>
            <div>Notis Siasatan berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
</div>


<div class="modal modal-blur fade" id="modal-small" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="modal-title">Error</div>
            <div>Notis Siasatan tidak berjaya ditambah</div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-bs-dismiss="modal">Okay</button>
          </div>
        </div>
      </div>
</div>

<?php

//tambahnotisphp.php

    include('connection.php');
    $conn=Connect();
    
    $idPengguna = "DI200017";

    $nomborFail = $conn->real_escape_string($_POST['nomborFail']);
    $ulasan = nl2br($_POST['ulasan']);
    $status = "BELUM SELESAI";
    
    $tarikhNotisKeluar = $conn->real_escape_string($_POST['tarikhNotisKeluar']);

    // Add 30 days to the date
    $futureDate30Days = date('Y-m-d',strtotime($tarikhNotisKeluar . ' +30 days'));
    $futureDate60Days = date('Y-m-d',strtotime($tarikhNotisKeluar . ' +60 days'));
    
        
    $query = "INSERT INTO notis(nomborFail, ulasan, tarikhNotisKeluar, tarikhNotis1, tarikhNotis2, status, idPengguna) VALUES('" . $nomborFail . "','" . $ulasan . "','" . $tarikhNotisKeluar . "','" . $futureDate30Days . "','" . $futureDate60Days . "','" . $status . "','" . $idPengguna . "')";

    $success = $conn->query($query);
            
    if ($success){
    header("Location: tambahnotis.php?sucsess=true");       
            
    $conn->close();
    }else{
        die("Data Notis Siasatan tidak dapat ditambah: ".$conn->error);

    }   
    

?>

I’m trying to set up security testing for my web app, using vitest and the firebase testing package @firebase/rules-unit-testing. This largely works, but unfortunately the errors look like this:

FAIL  tests/security.test.ts > inviting someone to an ancestor board with nested sharing
FirebaseError: 7 PERMISSION_DENIED: 
evaluation error at L44:24 for 'create' @ L44, evaluation error at L45:32 for 'update' @ L45, false for 'create' @ L44
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'permission-denied', customData: undefined }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/6]⎯

 Test Files  1 failed (1)
      Tests  6 failed (6)
   Start at  13:24:40
   Duration  520ms

This tells me which firestore security rule was broken, but it doesn’t tell me anything about which line of the test was responsible. I want it to look more like the normal output for throwing an error, which is like so:

FAIL  tests/security.test.ts > inviting someone to an ancestor board with nested sharing
Error: oh no
 ❯ tests/security.test.ts:239:9
    237| 
    238| test("inviting someone to an ancestor board with nested sharing", async () => {
    239|   throw new Error("oh no");
       |         ^

How can I get a stack trace in there?