When simple is stupid

<!--in your +page.svelte --> <svelte:boundary> normal template content {#snippet failed(error, reset)} oh oh, stay put, do not redirect to +error.svelte this is the only hanlder that stays put {/snippet} </svelte:boundary> 

// +page.ts export const load: PageLoad = async ({params}) => { const order = await GetOrder({id: params.id}); if (!order){ // throw a native svelte error that is cauthgt by +error or error.html error(404, {message: 'Order not found'}); } // ... } 

// hooks.client.ts export const handleError: HandleClientError = async (error) => { // catch errors thrown from template rendering that are not caught // this also catches unhandled error in case ssr is off, or server handler did not catch error // this returns +error.svelte if exists, or error.html // error.event has the route and url const _error = (<any>error?.error)?.message || error?.message || error; return { message: _error || 'ERROR', source: error.event?.url.pathname }; }; // hooks.server.ts export const handleError: HandleServerError = async (error) => { // catch errors on server rendering, that are not handled // if this is handled here, client hook does not handle it // returns +error.svelte if found, or error.html // error.event has the request const _error = (<any>error?.error)?.message || error?.message || error; return { message: _error || 'UNKNOWN ERROR', source: error.event?.request?.url }; }; 

// +error.svelte import { page } from '$app/state'; // read page.error object if found console.log(page?.status, page.error?.message, page.error?.source); // error.html // no access except to %sveltekit.status%, and %sveltekit.error.message% 

// axios http.interceptor.ts export const HttpInterceptor = (httpClient: AxiosInstance) => { httpClient.interceptors.response.use( null, function (error) { // pass a custom axios context to decide whether to throw back or handle const _context = error.response?.config?.errorContext if (_context.throwBack) { return Promise.reject(error); } else { return Promise.resolve(error); } }); } // in axiost.d.ts, delcare the extra context import 'axios'; declare module 'axios' { export interface AxiosRequestConfig { errorContext?: { throwBack?: boolean; }; } } // then pass throwBack to http requests to force a throw back, to catch in calling template await httpClient.post('url', data, { errorContext: { // let template catch it throwBack: true } }); 

// +layout.svelte onMount(() => { window.addEventListener('error', (e) => { console.log(e); }); window.addEventListener('unhandledrejection', (e)=>{ console.log(e); }); }); 

// index.js before everything process.on('unhandledRejection', (reason, promise) => { console.error('Unhandled Rejection:', reason); }); process.on('uncaughtException', (err, origin) => { console.error('Unhandled Exception:', err); }); 

// error components can be positioned anywhere, where specific errors can be listered to // in app.routes configuration file const MyAppRoutes: Routes = [ { path: '404', component: NotFoundComponent, }, // ... routes { // catch everything else path: '**', // either redirect to 404 // redirectTo: '/404', // or show component in same url: component: NotFoundComponent, pathMatch: 'full', } }, // aslo subscribe to route events head start to catch and log // provideEnvironmentInitializer(appFactory) const appFactory = () => { const router: Router = inject(Router); router.events .pipe( filter( (e) => e instanceof NavigationEnd ) ).subscribe((event) => { if (event.urlAfterRedirects === '/404') { if (event.url !== '/404') { // log 404 error when 404 is redirected to console.log('404', event.url); } } }); // catch NavigationError // this can also be done with the withNavigationErrorHandler token router.events .pipe(filter((e) => e instanceof NavigationError)) .subscribe((event) => { // log unexepected navigation errors console.log( 'unexpected error in navigation', event.error); // redirect to '/error' }); }; // route provider: const AppRouteProviders = [ provideEnvironmentInitializer(appFactory), provideRouter( // routes array: MyAppRoutes, // catch navigation errors here instead (similar to above event subscriber) withNavigationErrorHandler(errorFactory) ) ]; // Bootstrap error handler, main.ts bootstrapApplication(AppComponent, { providers: [ ...AppRouteProviders, // ask Angular to handle window unhandledrejection and error events // via ErrorHandler provideBrowserGlobalErrorListeners() ] }) // the final left-overs .catch((err) => console.log('the left-overs', err)); 

// http interceptor file const SOMETHING = new HttpContextToken<any>(() => {throwBack: false}); // helper function export const getErrorContext = (src: any) => { return new HttpContext().set(SOMETHING, src); }; export const OlInterceptorFn: HttpInterceptorFn = (req: HttpRequest<any>, next: HttpHandlerFn) => { return next(adjustedReq) .pipe( // catch all http errors catchError((e) => { // if context rethrows if (req.context.get(SOMETHING)) { const throwBack = req.context.get(SOMETHING).throwBack; // throw back or clear out return throwBack ? throwError(() => e) : of(null); } // throw back return throwError(() => e); }) ); }; // example http call with throwback, let caller catch it return this.http.post(Config.API.resource.query, _params, { context: getErrorContext({throwBack: true}) }); 

export class InputDirective implements Validator { readonly validator = input<string>(); // for example: readonly maxLength = input<string>(); // this injection is quite powerful, to target the content of the directive as Angular DOM private el = inject(ElementRef); validate(control: AbstractControl): ValidationErrors | null { // ... for example const maxlength = this.maxlength(); if (maxlength && control.value) { if (Validators.maxLength(maxlength)(control)) { this.errorText.set('Too long'); } } } } 

<--olinput is the directive selector --> <input type="text" olinput [formControlName]="something" [required]="true" [maxLength]="30" /> 

<form onsubmit={saveForm} novalidate> <div class="spaced"> <Otp bind:value={formState.code} />  </div>  <button type="submit" class="btn-rev">SAVE</button> </form> 

<script> let { value = $bindable() }: { value?: any } = $props(); </script> <input type="text" bind:value={value}/> 

// lib/lazy.ts // example svelte attachment export function lazy(url: string): Attachment { return (element: HTMLImageElement) => { if (!element) return; if (!browser || !IntersectionObserver) { element.src = url; return; } // do some intersection observation ... return () => { // stop watching and destroy }; }; } 

@Directive({ // choose the css selector selector: '[olLazy]' }) // dependecy injection for a safe version of the DOM element constructor( private el: ElementRef, private renderer: Renderer2, ) { } }) export class LazyDirective implements AfterViewInit, OnChanges, OnDestroy { ngAfterViewInit() { // life cycle hook for first time loading } ngOnChanges(c: SimpleChanges) { // watch changes } ngOnDestroy(): void { // destroy } } 

// inject the actual request from server private request = inject(REQUEST, { optional: true }) as Request; // use it in a directive this.request.get('user-agent') 

<!--in svelte component --> {#key id} component content here, reload if id changed in same route {/key} 

// in route reuse class @Injectable({ providedIn: 'root' }) export class RouteReuseService extends RouteReuseStrategy { // ... shouldReuseRoute(curr: ActivatedRouteSnapshot, future: ActivatedRouteSnapshot): boolean { // example of forcing a route regeneration by route data // read route data to figure out what to reuse, the pages that are troublesome should not reuse // if data contains "resuse: never" make a check on params values, if changed, return false if (future.routeConfig === curr.routeConfig) { if (future.data && future.data['reuse'] === 'never') { // check all params let reuse = true; curr.data['params'].forEach((n: string) => { // fail if not exact match reuse = reuse && curr.paramMap.get(n) === future.paramMap.get(n); }); return reuse; } } // reuse component? or don't reuse it? return future.routeConfig === curr.routeConfig; } } // provide it at boostrap bootstrapApplication(AppComponent, { providers: [ { provide: RouteReuseStrategy, useClass: RouteReuseService } ] }); // then use in route: { path: ':id', component: OrderDetailsComponent, data: { reuse: 'never', params: ['id'] }, } 

<!-- sveltekit app.html --> <body data-sveltekit-preload-code="eager"Source：https://dev.to/ayyash/when-simple-is-stupid-3dpl
My favorites