Cannot Edit or Delete Function Hooks: client-side exception

[damywise]

Bug report

Describe the bug

When I clicked "Edit Hook" or "Delete Hook" it shows blank page with this text:

Application error: a client-side exception has occurred (see the browser console for more information).

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Go to 'database/function hooks'
2. Create a hook with a param value in a double quote

Example: key: "value" produces error, but
key: value doesn't

3. Try to edit/delete it
4. See error

Expected behavior

Ability to edit or delete function hook

Screenshots

System information

• OS: Windows
• Browser: chrome, firefox, ungoogled-chromium, librewolf, brave browser

Additional context

browser console:

Request for font "Roboto" blocked at visibility level 1 (requires 3)
hooks
SyntaxError: JSON.parse: expected ',' or '}' after property value in object at line 1 column 22 of the JSON data
W CreateHook.tsx:141
value CreateHook.tsx:111
MobX 2
J CreateHook.tsx:388
Ri React
unstable_runWithPriority scheduler.production.min.js:18
React 4
unstable_runWithPriority scheduler.production.min.js:18
React 5
n helpers.js:73
instrument.js:109:45
SyntaxError: JSON.parse: expected ',' or '}' after property value in object at line 1 column 22 of the JSON data
W CreateHook.tsx:141
value CreateHook.tsx:111
MobX 2
J CreateHook.tsx:388
Ri React
unstable_runWithPriority scheduler.production.min.js:18
React 4
unstable_runWithPriority scheduler.production.min.js:18
React 5
n helpers.js:73
instrument.js:109:45
A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred instrument.js:109:45
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://o398706.ingest.sentry.io/api/5459134/envelope/?sentry_key=caa7db5fc1da4341810a6d56251a951c&sentry_version=7. (Reason: CORS request did not succeed).
9
TypeError: NetworkError when attempting to fetch resource. instrument.js:109:45
SyntaxError: JSON.parse: expected ',' or '}' after property value in object at line 1 column 22 of the JSON data
W CreateHook.tsx:141
value CreateHook.tsx:111
MobX 2
J CreateHook.tsx:388
Ri React
unstable_runWithPriority scheduler.production.min.js:18
React 4
unstable_runWithPriority scheduler.production.min.js:18
React 5
n helpers.js:73
instrument.js:109:45
SyntaxError: JSON.parse: expected ',' or '}' after property value in object at line 1 column 22 of the JSON data
W CreateHook.tsx:141
value CreateHook.tsx:111
MobX 2
J CreateHook.tsx:388
Ri React
unstable_runWithPriority scheduler.production.min.js:18
React 4
unstable_runWithPriority scheduler.production.min.js:18
React 5
n helpers.js:73
instrument.js:109:45
h instrument.js:109
le index.js:419
fn index.js:528
value index.js:191
React 4
unstable_runWithPriority scheduler.production.min.js:18
React 4
unstable_runWithPriority scheduler.production.min.js:18
React 5
n helpers.js:73
A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred instrument.js:109:45

​

[fabianmossberg]

I have the same issue

[palo-landrae]

I have the same issue

[joshenlim]

hey all! if its alright could one of you guys who are facing this issue include a screen recording from creating the hook to running into this error? this will help us debug the issue quickly 🙏

[joshenlim]

ahh okay i think i see what's going on - for e.g if your HTTP param value its wrapped in a double quote

Dashboard sends this in its payload

But the response does not correspond

Resulting in the dashboard failing to parse the supposed JSON in the response

@soedirgo just tagging you here for visibility, might be something in pg-meta?

[joshenlim]

hey all - we might need a bit more time to properly investigate the issue and do up a proper fix. For now - i'd suggest using SQL as a workaround to this issue that you guys are facing specifically

for the hooks that are facing this, you'll need to recreate them by first deleting them

drop trigger my_trigger on my_table;

thereafter you can create the function hook again either through SQL

create trigger my_trigger before insert on my_table execute function my_trigger_function();

or through the dashboard - just be wary that your headers/params value should not have any double quotes in them if you do choose to make them via the dashboard

but do let me know if this constraint is a blocker! keen to hear the different use cases :)