Discussion :

[DiverSIG]

Bonjour,

J'ai une appli React qui fait des requêtes sur une base de données Postgres
Dans mon code, je lance les requêtes avec du code genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
fetch(`monurlderequete`)
    .then(response => {
      if (response.ok) {
        console.log('requête OK');
      }
      else {
        console.log(response);
      }
    })

La réponse est de la forme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Response { type: "cors", url: "monurlderequete", redirected: false, status: 500, ok: false, statusText: "Internal Server Error", headers: Headers(2), body: ReadableStream, bodyUsed: false }

Mais on ne peut pas savoir quelle est l'erreur exactement.
Si je regarde le log du backend, il y a beaucoup plus d'infos :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
error: la valeur d'une clé dupliquée rompt la contrainte unique « secteur_nom_key »
    at Parser.parseErrorMessage (D:\mypath\node-postgres\node_modules\pg-protocol\dist\parser.js:283:98)
    at Parser.handlePacket (D:\mypath\node-postgres\node_modules\pg-protocol\dist\parser.js:122:29)
    at Parser.parse (D:\mypath\node-postgres\node_modules\pg-protocol\dist\parser.js:35:38)
    at Socket.<anonymous> (D:\mypath\node-postgres\node_modules\pg-protocol\dist\index.js:11:42)
    at Socket.emit (node:events:520:28)
    at addChunk (node:internal/streams/readable:559:12)
    at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
    at Readable.push (node:internal/streams/readable:390:5)
    at TCP.onStreamRead (node:internal/stream_base_commons:191:23) {
  length: 218,
  severity: 'ERREUR',
  code: '23505',
  detail: 'La clé « (nom)=(BZH) » existe déjà.',
  hint: undefined,
  position: undefined,
  internalPosition: undefined,
  internalQuery: undefined,
  where: undefined,
  schema: 'fcu',
  table: 'secteur',
  column: undefined,
  dataType: undefined,
  constraint: 'secteur_nom_key',
  file: 'nbtinsert.c',
  line: '666',
  routine: '_bt_check_unique'
}

D'où ma question : est ce qu'il y a un moyen de ramener les messages du backend dans la réponse renvoyée, pour afficher un message d'erreur dans une boite de dialogue, qui puisse expliquer pourquoi la requête n'a pas marché (dans l'exemple ici duplication de clé)

Merci,
Nico

[mathieu]

en cas d'erreur 500, vous pouvez quand même lire le corps de la réponse http, dans response["body"].
donc si vous retournez des informations côté serveur, vous pourrez les récupérer dans votre code javascript.

[DiverSIG]

Dans le body de ma réponse, je n'ai que ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
Response { type: "cors", url: "monurl", redirected: false, status: 500, ok: false, statusText: "Internal Server Error", headers: Headers(2), body: ReadableStream, bodyUsed: false }
​body: ReadableStream { locked: false }
​​locked: false
​​<prototype>: ReadableStreamPrototype { cancel: cancel(), getReader: getReader(), pipeThrough: pipeThrough(), … }
​bodyUsed: false
​headers: Headers { "content-length" → "2", "content-type" → "application/json; charset=utf-8" }
​ok: false
​redirected: false
​status: 500
​statusText: "Internal Server Error"
​type: "cors"
.....

Mais il y a une variable bodyUsed: false, ça veut dire qu'il ne renvoie pas le body ?

Est-ce qu'il y a quelquechose à paramétrer côté serveur pour qu'il renvoie les infos ?

Nico

[mathieu]

affichez ce qu'il y a dans response["body"].

regardez aussi l'url directement dans votre navigateur et vous verrez le résultat directement.

[DiverSIG]

response["body"] :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
ReadableStream { locked: false }
​locked: false
​<prototype>: ReadableStreamPrototype { cancel: cancel(), getReader: getReader(), pipeThrough: pipeThrough(), … }
​​cancel: function cancel()
​​constructor: function ReadableStream()
​​getReader: function getReader()
​​locked: 
​​pipeThrough: function pipeThrough()
​​pipeTo: function pipeTo()
​​tee: function tee()
​​values: function values()
​​Symbol(Symbol.toStringTag): "ReadableStream"
​​Symbol(Symbol.asyncIterator): function values()
​​<get locked()>: function locked()
​​<prototype>: Object { … }

Si je lance directement mon url dans le navigateur :

Nico

[mathieu]

ah oui ce n'est pas direct, il faut passer par une autre promesse.
https://developer.mozilla.org/fr/docs/Web/API/Response

donc votre code devrait être quelque chose de ce genre :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
fetch(`monurlderequete`)
	.then(response => {
		if (response.ok) {
			console.log('requête OK');
		} else {
 
			response.text()
				.then(r => console.log(r))
			;
 
		}
	})
;