Alternative content if javascript web app encounters errors

General
1

Yesterday, I went to http://try.discourse.org, the new project developed by the Stack Overflow team. This project uses the EmberJs javascript Framework for requesting the content. And unfortunately my browser (Safari) sees the following error in the code:

TypeError: 'undefined' is not an object (evaluating 'PreloadStore.get("siteSettings").top_menu')

The consequence of this error is that no content is displayed; I have a blank page. The javascript error logically prevents the content from displaying.

My question is:

If javascript is disabled in my browser, I can see the content of Dicourse because of the <noscript> </noscript> tag in html.

But if I have javascript enabled and it encounters an error, I can see nothing.

So, in a web app development, is there a way to display the no script content or alternative content if the javascript app encounters an error?

2

This is a great and nuanced question — one that touches on both the robustness and user experience of JavaScript-heavy web applications.

Short Answer:

No, standard <noscript> content is only rendered if JavaScript is completely disabled in the browser. It is not shown when JavaScript is enabled but throws runtime errors.

Why This Happens:

  • <noscript> is processed during the initial HTML rendering only if JavaScript is disabled.
  • When JavaScript is enabled, the browser assumes the app will take over, even if it fails with an error.
  • If your JavaScript application fails (e.g., due to undefined objects), there’s no automatic fallback unless you build one.

What Can You Do Instead?

You’ll need to implement a graceful error fallback manually. Here are three effective strategies:

1. Error Boundaries (React) / Global Error Handling (Vanilla or Ember)

Wrap your app logic with a try-catch mechanism or an error boundary (if you’re using React or similar frameworks):

try {
  // Mount your Ember/React app here
  App.start();
} catch (e) {
  document.getElementById('fallback-content').style.display = 'block';
  console.error("App failed to load:", e);
}

In your HTML:

<div id="fallback-content" style="display:none;">
  <p>Sorry, something went wrong while loading the application. Please refresh or contact support.</p>
</div>

2. Global Window Error Handler

You can catch unhandled JavaScript errors and trigger fallback UI:

window.onerror = function(message, source, lineno, colno, error) {
  document.getElementById('fallback-content').style.display = 'block';
  return false; // Let browser log the error too
};

3. Server-Side Rendering (SSR) or Static Fallback

Frameworks like Ember, React (with Next.js), and others can render initial HTML on the server. This means:

  • Users get basic content immediately.
  • If JS fails, at least they see something meaningful.
  • You can even show a warning if hydration fails.

Best Practice Recommendation

  • Always fail gracefully — don’t rely entirely on client-side JS.
  • Use SSR or static fallback content where feasible.
  • Catch errors globally or in components, and show a user-friendly error screen.
  • Log the errors (e.g., with Sentry) for diagnosis.