Jakob Wennberg
198d3092c7
Picking a suggestion under "Tidigare motparter" in Bokför transaktion replaced
the page with "Något gick fel". handleOpenTemplateReview built the review state
from `{ id, name_sv } as BookingTemplate`, so `template.debit_account` was
undefined, reached QuickReviewDialog's required `defaultAccount: string`, and
threw on `accountOverride.startsWith('2')` during the first render.
Typed the dialog's template prop as a narrow ReviewTemplate whose optional
fields are actually optional, so the cast disappears and the compiler owns this
class of bug. Also carries the counterparty's learned accounts and VAT (the
preview showed the category fallback, not what the server books) and decides
"is this a counterparty booking" from the template id rather than the presence
of a line_pattern (single-line templates got an account/VAT editor the
categorize route discards).
Five more page-crashes of the same shape, adversarially verified:
- suppliers/[id] and supplier-invoices/[id] passed the error envelope OBJECT as
a toast description. The Toaster is a sibling of {children} in the ROOT
layout, so that throw escapes both segment error boundaries onto global-error.
- components/reports/views wrote the same object into a useState<string | null>
at 13 sites and rendered it bare.
- components/ui/toaster.tsx now coerces non-renderable values as a choke point.
- skattekonto read data.informationstext.length off Skatteverket's raw JSON,
where the field is not required.
- TicWorkspace read profile.statuses.length off a persisted jsonb blob. 17 of 17
prod rows predate the TIC v2 upgrade (#584) and lack the key, so that
workspace was in the error boundary for every company that had opened it.
Plus hardening: formatCurrency coerces a null currency to SEK (prod has 0 NULL
across 28 416 transactions, so defense not a live bug) and cleanSignatory
returns [] for a missing description.
Verified by rendering the real dialog against a throwaway /sandbox route: the
pre-fix prop shape reproduces the exact error boundary, the fixed one renders
D: 6570 Bankavgifter / K: 1930 Företagskonto and the matching verifikat.
No migrations.
63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Toast,
|
|
ToastClose,
|
|
ToastDescription,
|
|
ToastProvider,
|
|
ToastTitle,
|
|
ToastViewport,
|
|
} from "@/components/ui/toast"
|
|
import { useToast } from "@/components/ui/use-toast"
|
|
import { isValidElement, type ReactNode } from "react"
|
|
import { getErrorMessage } from "@/lib/errors/get-error-message"
|
|
|
|
/**
|
|
* The Toaster lives in the ROOT layout, as a sibling of {children}. A throw in
|
|
* here escapes every segment error boundary and lands on global-error, which
|
|
* blanks the entire app. Callers that hand over an unchecked `await
|
|
* res.json()` field pass the canonical `{ code, message, … }` envelope object
|
|
* rather than a string, and React throws "Objects are not valid as a React
|
|
* child" on it.
|
|
*
|
|
* Individual call sites are still expected to run their errors through
|
|
* getErrorMessage. This is the choke point that keeps the one that forgets
|
|
* from taking the whole app down with it.
|
|
*/
|
|
export function coerceToastNode(value: ReactNode): ReactNode {
|
|
if (value == null || typeof value === "string" || typeof value === "number") return value
|
|
if (typeof value === "boolean") return null
|
|
if (isValidElement(value)) return value
|
|
// Arrays are legitimate React children, but an unchecked JSON array can hold
|
|
// objects, and one of those still throws. Coerce members too; elements pass
|
|
// through by identity so their keys survive.
|
|
if (Array.isArray(value)) return value.map(coerceToastNode)
|
|
return getErrorMessage(value)
|
|
}
|
|
|
|
export function Toaster() {
|
|
const { toasts } = useToast()
|
|
|
|
return (
|
|
<ToastProvider>
|
|
{toasts.map(function ({ id, title, description, action, ...props }) {
|
|
const safeTitle = coerceToastNode(title)
|
|
const safeDescription = coerceToastNode(description)
|
|
return (
|
|
<Toast key={id} {...props}>
|
|
<div className="grid gap-1">
|
|
{safeTitle && <ToastTitle>{safeTitle}</ToastTitle>}
|
|
{safeDescription && (
|
|
<ToastDescription>{safeDescription}</ToastDescription>
|
|
)}
|
|
</div>
|
|
{action}
|
|
<ToastClose />
|
|
</Toast>
|
|
)
|
|
})}
|
|
<ToastViewport />
|
|
</ToastProvider>
|
|
)
|
|
}
|