Chrome/Edge closes unexpectedly when I open a website, but it works fine when I remove Dexie.

[Prathap-Thunga]

I am using deixe to store my projects, in the index db. Suddenly, its closing entire chrome. Not sure why its happening unable to debug why. But if i comment dexie its working fine. Here is the code, which we have written. Help or any work around would be appreciated. This is the version which i am using "dexie": "^4.0.11", My project is on vite build react js and "react": "^17.0.2",

import Dexie from 'dexie';

const db = new Dexie('EMLDb');

db.version(1).stores({
    projects: "++projectId,data",
});

export default db;

Here are my functions which i am using to update

import db from "./Database";

export const getAllProjects = async () => {
  try {
    return await db.projects.toArray();
  } catch (e) {
    console.log(e);
  }
};

export const addProject = async (project) => {
  try {
    return await db.projects.add(project);
  } catch (e) {
    console.log(e);
  }
};

export const updateProject = async (projectId, updatedProject) => {
  try {
    return await db.projects.update(Number(projectId), updatedProject);
  } catch (e) {
    console.log(e);
  }
};

export const deleteAllProjects = async () => {
  try {
    return await db.projects.clear();
  } catch (e) {
    console.log(e);
  }
};

[dfahlander]

There's nothing wrong with your code. It's very unclear why the browser would crash just for accessing indexeddb or including Dexie. Try check if this issue is local to a certain device only? Check disk space so that its not full already.

[Prathap-Thunga]

Thanks for confirming about the code. Disk space i have checked its empty let me re-verify with diskspace.

[marcelklehr]

I checked Chrome's memory debugger, and it seems Dexie is leaking Transactions

[marcelklehr]

alternatively, Chrome's garbage collector is broken

[Prathap-Thunga]

Do you have any solution for this @marcelklehr ?

[marcelklehr]

My solution was to revert the use of Dexie 🤷

[dfahlander]

@marcelklehr We have a little too less information to understand the reason for the crash. Was the issue specific to a certain client or did the problem occur on multiple clients?

There could be reasons outside the code you shared, such as an endless loop calling your functions. Dexie is being used by tens of thousands of apps and websites such as ChatGPT, Whatsapp, Facebook Messenger, Github Desktop, Microsoft ToDo, FlightRadar24, and many others, so it I'm confident that Dexie.js by itself is not the issue.

What I can think of is either:

1. Endless loop calling the functions.
2. A client with some state such as full or corrupt hard disk, buggy extensions installed or corrupt installations on it.

If you still believe this is not the case, please share a link to the repo (and a commit ID where dexie was being used) and let me have a look at the code.

David

[marcelklehr]

Hey @dfahlander
Thanks for weighing in :)
I deployed dexie in floccus a bookmark syncing web extension to store logs. The problem occurred on multiple clients using Google Chrome and Edge. I'm pretty certain there was no endless loop, but there were definitely a lot of calls to dexie. I was not able to reproduce the crash myself, but reverting the deployment of dexie fixed it for everyone. Is it possible that I amassed too much data in the database and that caused Chrome to crash, perhaps?

The release in question is https://github.com/floccusaddon/floccus/releases/tag/v5.5.3

[Prathap-Thunga]

Ah, I understand. So, @dfahlander , I'm also experiencing the same issue that @marcelklehr mentioned. It's strange because it's affecting multiple clients using Chrome and Edge, but I'm not seeing the problem on my end. Unfortunately, to resolve it for them, I had to revert the recent changes, and now it's working again.

[dfahlander]

@Prathap-Thunga do you mean you are seeing a leak of transactions as @marcelklehr does or are you referring to chrome crashing?

[dfahlander]

@Prathap-Thunga and @marcelklehr: Are you using any client-side telemetry library such as open-telemetry? There is an issue when opentelemetry is used with dexie as opentelemetry uses zonejs so track async contexts in a way that collides with dexie's use tracking of async contexts (See #2005). This issue can be solved by transpiling dexie-facing code using @babel/plugin-transform-async-to-generator if so.

[marcelklehr]

Indeed I'm using sentry's client-side telemetry library... I'll try to see if I can get people to test a build that uses the above fix. That would be awesome :) Thank you for looking into this, David!

[Prathap-Thunga]

Yes @dfahlander, we are using a client-side telemetry library. Specifically, these libraries are used.
@sentry/react, @sentry/tracing and react-gtm-module.

[marcelklehr]

Since I cannot currently reproduce this, how can I be sure if the fix worked? Is there an easy check in the source code?

[dfahlander]

Since I cannot currently reproduce this, how can I be sure if the fix worked? Is there an easy check in the source code?

To verify that the code was transpiled correctly after using @babel/plugin-transform-async-to-generator, is to search in the transpiled code for async or await. These keywords shall not be there (except maybe in comments or strings). await should have been replaced with yield and async with a wrapper function.

Note: This transpilation is only needed on dexie-facing code if zone.js is being used in the same app. Some telemetry tools uses zone.js to track calls on the client. Zone.js has also been common to use in angular apps.

[marcelklehr]

What exactly is dexie-facing code? If I use dexie directly in my app, do I need to transpile my whole app? Or only dexie code?

[dfahlander]

What exactly is dexie-facing code? If I use dexie directly in my app, do I need to transpile my whole app? Or only dexie code?

Transpiling your app is probably simplest, to find whether this is the culprit. If you find this being the culprit, and decide to only transpile what's nescessary, you may also transpile only the files that does await on dexie queries (such as await db.friends.toArray()).