Refreshing prisma studio is stuck on loading screen

[hedwiggggg]

Running (p)np(m/x) prisma studio the browser opens the studio @ http://localhost:5555 and is working fine.
Refreshing the page is stuck in the loading / skeleton screen.
The request to the api will never fulfill and the console throws an error.

I am using the latest prisma version, pnpm and I am working in a vscode devcontainer.

1. Prisma version (prisma -v or npx prisma -v):

prisma               : 2.22.0
@prisma/client       : 2.22.0
Current platform     : debian-openssl-1.1.x
Query Engine         : query-engine 60cc71d884972ab4e897f0277c4b84383dddaf6c (at ../../node_modules/.pnpm/@prisma+engines@2.22.0-21.60cc71d884972ab4e897f0277c4b84383dddaf6c/node_modules/@prisma/engines/query-engine-debian-openssl-1.1.x)
Migration Engine     : migration-engine-cli 60cc71d884972ab4e897f0277c4b84383dddaf6c (at ../../node_modules/.pnpm/@prisma+engines@2.22.0-21.60cc71d884972ab4e897f0277c4b84383dddaf6c/node_modules/@prisma/engines/migration-engine-debian-openssl-1.1.x)
Introspection Engine : introspection-core 60cc71d884972ab4e897f0277c4b84383dddaf6c (at ../../node_modules/.pnpm/@prisma+engines@2.22.0-21.60cc71d884972ab4e897f0277c4b84383dddaf6c/node_modules/@prisma/engines/introspection-engine-debian-openssl-1.1.x)
Format Binary        : prisma-fmt 60cc71d884972ab4e897f0277c4b84383dddaf6c (at ../../node_modules/.pnpm/@prisma+engines@2.22.0-21.60cc71d884972ab4e897f0277c4b84383dddaf6c/node_modules/@prisma/engines/prisma-fmt-debian-openssl-1.1.x)
Default Engines Hash : 60cc71d884972ab4e897f0277c4b84383dddaf6c
Studio               : 0.379.0

2. Logs from Developer Tools Console or Command line, if any:

root@pop-os:/workspaces/packages/server# pnpm prisma studio
Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Prisma Studio is up on http://localhost:5555
This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'fields' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'Object'
    |     ...
    |     index 0 -> object with constructor 'Object'
    --- property 'type' closes the circle
    at JSON.stringify (<anonymous>)
    at serialize (/workspaces/feedbax/node_modules/.pnpm/prisma@2.22.0/node_modules/prisma/build/index.js:130707:17)
    at HTTPNodeTransport.respond (/workspaces/feedbax/node_modules/.pnpm/prisma@2.22.0/node_modules/prisma/build/index.js:130722:34)
    at /workspaces/feedbax/node_modules/.pnpm/prisma@2.22.0/node_modules/prisma/build/index.js:139554:29
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

3. Does the issue persist even after updating to the latest prisma alpha? (npm i -D @prisma/cli@dev)

yes, installed

dependencies:
+ @prisma/cli 2.16.0-dev.68 (2.20.1 is available)
- @prisma/client 2.22.0
+ @prisma/client 2.23.0-dev.4
- prisma 2.22.0
+ prisma 2.23.0-dev.4

4. Prisma schema (if relevant):
   At least the models doesn't seem to be relevant.
   Havn't tested it with another provider.

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

generator client {
  provider = "prisma-client-js"
}

model User {
  id      Int      @id @default(autoincrement())
  email   String   @unique
  name    String?
}

[hedwiggggg]

The failing part in the prisma/build/index.js is:

// ../../node_modules/.pnpm/@prisma/studio-transports@0.379.0/node_modules/@prisma/studio-transports/dist/http/node.mjs
var require_node6 = __commonJS((exports2) => {
  __markAsModule(exports2);
  __export(exports2, {
    HTTPNodeTransport: () => HTTPNodeTransport
  });
  var import_zlib = __toModule(require("zlib"));
  var BIGINT_PREFIX = "PrismaBigInt::";
  var BYTES_PREFIX = "PrismaBytes::";
  function serialize(msg) {
    return JSON.stringify(msg, (_2, value) => {
      if (typeof value === "bigint") {
        return BIGINT_PREFIX + value;
      }
      if ((value == null ? void 0 : value.type) === "Buffer" && Array.isArray(value == null ? void 0 : value.data)) {
        return BYTES_PREFIX + Buffer.from(value.data).toString("base64");
      }
      return value;
    });
  }
  var HTTPNodeTransport = class {
    async respond(responseObject, response) {
      responseObject.status(200);
      responseObject.setHeader("Content-Type", "text/plain");
      responseObject.setHeader("Content-Encoding", "gzip");
      const serializedResponse = serialize(response);
      const gzippedResponse = import_zlib.gzipSync(Buffer.from(serializedResponse, "utf8"));
      responseObject.send(gzippedResponse);
      return Promise.resolve();
    }
  };
});

I logged the msg, when refreshing prisma studio, seem's to be failing at:

{
  requestId: 0,
  channel: '-prisma',
  action: 'getDMMF',
  payload: {
    error: null,
    data: {
      dmmf: [Object],
      datasourceProvider: 'sqlite',
      schemaHash: '3800c740ccfd737beca9c79d701406fd'
    }
  }
}

But this doensn't really make sense, because when prisma studio is initially opening, the message is the same as the failing message:

{
  requestId: 0,
  channel: '-prisma',
  action: 'getDMMF',
  payload: {
    error: null,
    data: {
      dmmf: [Object],
      datasourceProvider: 'sqlite',
      schemaHash: '3800c740ccfd737beca9c79d701406fd'
    }
  }
}

[sdnts]

Hey @hedwiggggg, thanks for reporting this! I can see this as well, and is every bit as confusing to me as it is to you!

Do you also see errors in your terminal you ran npx prisma studio from? Can you confirm if this is what you see:

This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'fields' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'Object'
    |     ...
    |     index 0 -> object with constructor 'Object'
    --- property 'type' closes the circle
    at JSON.stringify (<anonymous>)
    at serialize (/Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:130707:17)
    at HTTPNodeTransport.respond (/Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:130722:34)
    at /Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:139554:29
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

I'll look into this very soon!

[hedwiggggg]

My bad, the messages aren't equal at all.

msg-0.log
msg-1.log
msg-diff.log

Logged with:

var count = 0;

// ../../node_modules/.pnpm/@prisma/studio-transports@0.379.0/node_modules/@prisma/studio-transports/dist/http/node.mjs
var require_node6 = __commonJS((exports2) => {
  __markAsModule(exports2);
  __export(exports2, {
    HTTPNodeTransport: () => HTTPNodeTransport
  });
  var import_zlib = __toModule(require("zlib"));
  var import_util = __toModule(require("util"));
  var import_fs = __toModule(require("fs"));

  var BIGINT_PREFIX = "PrismaBigInt::";
  var BYTES_PREFIX = "PrismaBytes::";
  function serialize(msg) {
    if (msg.requestId === 0) {
      const fullMsg = import_util.inspect(msg, { showHidden: false, depth: 30 });
      import_fs.writeFileSync(`/workspaces/feedbax/packages/server/msg-${count++}.log`, fullMsg);
    }

    return JSON.stringify(msg, (_2, value) => {
      if (typeof value === "bigint") {
        return BIGINT_PREFIX + value;
      }
      if ((value == null ? void 0 : value.type) === "Buffer" && Array.isArray(value == null ? void 0 : value.data)) {
        return BYTES_PREFIX + Buffer.from(value.data).toString("base64");
      }
      return value;
    });
  }
  var HTTPNodeTransport = class {
    async respond(responseObject, response) {
      responseObject.status(200);
      responseObject.setHeader("Content-Type", "text/plain");
      responseObject.setHeader("Content-Encoding", "gzip");
      const serializedResponse = serialize(response);
      const gzippedResponse = import_zlib.gzipSync(Buffer.from(serializedResponse, "utf8"));
      responseObject.send(gzippedResponse);
      return Promise.resolve();
    }
  };
});

[hedwiggggg]

Hey @hedwiggggg, thanks for reporting this! I can see this as well, and is every bit as confusing to me as it is to you!

Do you also see errors in your terminal you ran npx prisma studio from? Can you confirm if this is what you see:

This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'fields' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'Object'
    |     ...
    |     index 0 -> object with constructor 'Object'
    --- property 'type' closes the circle
    at JSON.stringify (<anonymous>)
    at serialize (/Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:130707:17)
    at HTTPNodeTransport.respond (/Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:130722:34)
    at /Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:139554:29
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

I'll look into this very soon!

I only see this error, nothing in the client. The client is just keeps loading because the request to http://localhost:5555/api will stay in the pending state.

[hedwiggggg]

Debugged the request, at least they are the same.

root@pop-os:/workspaces/feedbax/packages/server# DEBUG="@prisma/studio-server" npx prisma studio
<!-- INITIAL OPENING OF PRISMA STUDIO -->

@prisma/studio-server Studio server is up at http://localhost:5555/ +0ms

@prisma/studio-server Incoming request:  {
  requestId: 0,
  channel: 'prisma',
  action: 'getDMMF',
  payload: { data: null }
} +904ms

@prisma/studio-server Incoming request:  {
  requestId: 1,
  channel: 'project',
  action: 'get',
  payload: { data: null }
} +365ms

@prisma/studio-server Incoming request:  {
  requestId: 2,
  channel: 'prisma',
  action: 'clientRequest',
  payload: {
    data: {
      schemaHash: '3800c740ccfd737beca9c79d701406fd',
      query: 'prisma.$transaction([\n    prisma.user.count(),\n])'
    }
  }
} +24ms

<!-- REFRESH BROWSER -->

@prisma/studio-server Incoming request:  {
  requestId: 0,
  channel: 'prisma',
  action: 'getDMMF',
  payload: { data: null }
} +10s

[hedwiggggg]

If i comment the following out, it works like a charm.
So somehow the cached dmmf seem's to be changed.
But I unfortunately I don't really know anything about prismas architecture, so i won't be able to track this down further the rabbithole. Maybe the mutations are intended and something is just going wrong.

Is @prisma/studio-server open-soruce? Couldn't find it in the repos.

[sdnts]

Studio is unfortunately not open source, but your investigation is already super useful, because now I know what to investigate, thanks so much for this!

When I fix this, I'll push out a dev version that you will be able to use in the mean time, will let you know!

[Jasperhino]

Hey @hedwiggggg, thanks for reporting this! I can see this as well, and is every bit as confusing to me as it is to you!
Do you also see errors in your terminal you ran npx prisma studio from? Can you confirm if this is what you see:

This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason:
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'fields' -> object with constructor 'Array'
    |     index 0 -> object with constructor 'Object'
    |     ...
    |     index 0 -> object with constructor 'Object'
    --- property 'type' closes the circle
    at JSON.stringify (<anonymous>)
    at serialize (/Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:130707:17)
    at HTTPNodeTransport.respond (/Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:130722:34)
    at /Users/siddhant/Code/Tests/experiments/node_modules/prisma/build/index.js:139554:29
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

I'll look into this very soon!

I only see this error, nothing in the client. The client is just keeps loading because the request to http://localhost:5555/api will stay in the pending state.

I can also confirm having the exact same problem.

[sdnts]

Hey @hedwiggggg @Jasperhino, I've fixed and released this with prisma@2.23.0-dev.10, you can install this using npm i prisma@dev. Do note that this a dev version, so I would recommend upgrading to the next stable release when it rolls out, since devs might contain unannounced breaking changes.

Let me know if you're still seeing this!

[HartS]

@madebysid I don't want to upgrade our app to a dev version of prisma, but am wondering if downgrading prisma and prisma-client might resolve this, and if so, do you know what version to downgrade to?