window.onunhandledrejection and window.onerror catching quite a few issues

[gregg-cbs]

Question

I would like some feedback and thoughts on these errors and whether I should ignore them or if anyone knows if there is something I can do to resolve them.

Description

In our app we setup global javascript error handlers for the browser so we can logs errors to slack so we can see and fix them.

We have noticed a lot of errors due to platforms like facebook and tiktok pre-building/caching links to our site for improved user experience. The problem is they try run off some pre-cached version and if a svelte build has happened it changes the file hashes and so the JS files they are referring to do not exist anymore or have changed. We see these errors a lot every day.

The way we catch and log errors:

window.onerror = function(){ // logs details to slack}
window.onunhandledrejection= function(){ // logs details to slack}

The two errors we see mostly:

1. onunhandledrejection: Failed to fetch file
2. onerror: Script error

Error 1 Log: Failed to fetch file
The file being referred to here "https://www.utickets.co.za/_app/immutable/chunks/entry.CNIDYaja.js" does exist. I do not know why vercel/speed-insights is being mentioned, maybe it no longer exists in this chunk at that line or this code is trying to dynamically fetch vercel speed insights and is failing. The referrer will almost always be facebook or tiktok.

{
  "handler": "onunhandledrejection",
  "referrer": "https://l.facebook.com/",
  "message": "Failed to fetch",
  "url": "https://www.utickets.co.za/",
  "stack": "
    TypeError: Failed to fetch\n
    at window.fetch (https://www.utickets.co.za/_app/immutable/chunks/entry.CNIDYaja.js:1:1586)\n
    at em (https://www.utickets.co.za/_vercel/speed-insights/script.js:1:10528)\n
    at c (https://www.utickets.co.za/_vercel/speed-insights/script.js:1:11518)\n
    at https://www.utickets.co.za/_vercel/speed-insights/script.js:1:12192\n
    at n (https://www.utickets.co.za/_vercel/speed-insights/script.js:1:4101)\n
    at https://www.utickets.co.za/_vercel/speed-insights/script.js:1:2229\n
    at https://www.utickets.co.za/_vercel/speed-insights/script.js:1:4479\n
    at t (https://www.utickets.co.za/_vercel/speed-insights/script.js:1:2430)",
  "status": 500,
}

Error 2 Log: Script Error
This gives no insights as to why I am getting a script error but i get these quite frequently, myself or my team are never able to replicate these errors. They also seem to only happen from referrer sites.

{
  "handler": "onerror",
  "referrer": "https://www.soundland.co.za/",
  "message": "Script error.",
  "url": "https://www.utickets.co.za/events/soundland-festival-durban-july-after-party-by-dlala-thukzin",
  "source": "",
  "status": 500,
  "data": {
    "error": null,
    "lineno": 0,
    "colno": 0
  }
}

[smhg]

@gregg-cbs FWIW battling these errors I think I've narrowed down some things. At least reducing these errors.

• Error 1 (Failed to fetch): seems to happen when a user 'interrupts' a fetch. Maybe by navigating away? Or reloading the page? I still have to do some tests here.
• Error 2 (Script error): seems exclusively due to 3rd party scripts that have an error. If they are not explicitly allowed by your CORS headers (see this page), they won't show any usable information. The translate (often Google Translate) feature of browsers is an interesting case here. You might want to allow translation if you are currently blocking it.

I think it's worth not to ignore them. I would for instance have never thought about users trying to translate a page (and which was failing).