I want to render 500 error's traceback came from server only for admin, so:
server.js
, session is populated with user retrieved from http_only cookie, just something like {'username': 'admin'}
polka()
.use(
sapper.middleware({
session: (req, res) => {
return { 'user': parseCookie('user') }
}
})
)
.listen(PORT);
index.js
there is a global variable to store possible traceback of 500 error came from server:import { writable } from 'svelte/store';
export const error = writable();
index.html
article is preloaded, and in case of 500 error, traceback is rendered below if current user is admin:<script context="module">
import { error } from 'index.js';
export async function preload(page, session) {
return { article : await this.fetch('/api/article/').then(response => {
if (response.status == 500 && session.user.username === 'admin') {
error.set(response);
}
return response.json();
})}
}
</script>
<script>
export let article
</script>
<h1>{ article.title }</h1>
<div>{ article.text }</div>
<!-- 500 ERROR TRACEBACK --->
{#if $error}
{@html $error}
{/if}
So, if $error
is set via preload
function, will it be safe and rendered only server-side?
If not, how can it be improved?
Maybe if (process.browser)
could help somehow?
Thx
Check the below answer by Rich Harris
If you have used one of the templates with either webpack or rollup you will see that process.browser
is replaced with true
meaning that unreachable code will be tree shaked.
So short answer would be yes, you should be fine to use it as long as you surround that code with process.browser
in appropriate place
But with that being said you are better off relying on server logs when it comes to 500 error code. Returning just error code to all of the users and nothing more, and pushing stack traces to log system instead for debugging.