Ember global exception handling?

1

What is the best approach to handle unexpected exceptions in an Ember app?

Right now if an exception happens when computing a property, the exception is printed to the console and the whole app just goes out to lunch. It usually becomes unresponsive and results in the dreaded ‘Attempted to rerender, but the Ember application has had an unrecoverable error occur during render …’ message.

I’ve tried hooking into the ember onerror function as well as RSVP’s on error, but those are just callbacks that report the error. They don’t allow the app to recover.

Any ideas?

Thanks, Marshall

2

are you using template-lint?

normally, for general exception handling, you’d want to use the window’s on error event – but for templates, they are compiled programs, and must be syntactically correct – the tools to help out with this are the template-linter (which has editor integrations), and the build itself (usually catches more catastrophic errors), the remaining things that slip through tend to be trying to use a value that is undefined but we didn’t expect it to be undefined.

Can you provide more information about your set up? specific errors? Specifically, knowing these things would help debug what could be going on:

  • your editor
  • which extensions/plugins you have in your editor that are ember-related (else this list can get really long :sweat_smile:)
  • your ember-source version
  • your ember-cli version

thanks!

3

Thanks for the reply!

I’m using Rubymine as an editor, along with Ember 3.25.4.

Here’s my list of ember-related packages:

"ember-ajax": "^5.0.0",
"ember-auto-import": "^2.2.4",
"ember-bootstrap": "^5.0.0",
"ember-cached-decorator-polyfill": "^0.1.4",
"ember-cli": "^4.3.0",
"ember-cli-app-version": "^5.0.0",
"ember-cli-babel": "^7.26.11",
"ember-cli-dependency-checker": "^3.2.0",
"ember-cli-eslint": "^5.1.0",
"ember-cli-htmlbars": "^6.0.1",
"ember-cli-inject-live-reload": "^2.1.0",
"ember-cli-rails-addon": "2021.6.26",
"ember-cli-sass": "^10.0.1",
"ember-cli-sri": "^2.1.1",
"ember-cli-template-lint": "^2.0.2",
"ember-cli-terser": "^4.0.2",
"ember-decorators": "^6.1.1",
"ember-export-application-global": "^2.0.1",
"ember-flatpickr": "^3.2.2",
"ember-fontawesome-css": "^1.2.0",
"ember-load-initializers": "^2.1.2",
"ember-lodash": "^4.19.5",
"ember-maybe-import-regenerator": "^1.0.0",
"ember-qunit": "^5.1.5",
"ember-resolver": "^8.0.3",
"ember-source": "3.25.4",

As for reproducing the error, if a property computation tosses an exception, the app becomes unresponsive. For example:

<!-- my-component.hbs -->
<div ...attributes>{{this.foo}}</div>

/** my-component.js */
export default class MyComponent extends Component {
  get foo() {
    let a = null;
    return a.toString();
  }
}

The browser has the exception in the console, along with the error message, like this:

Uncaught TypeError: Cannot read properties of null (reading 'toString')
Attempted to rerender, but the Ember application has had an unrecoverable error occur during render. You should reload the application after fixing the cause of the error.

Rather than having all of the links and buttons end up dead (clicking them does nothing from the user’s point of view at this point), it’d be useful if the app could recover.

Thanks, Marshall

4

I believe that Ember handles these errors “gracefully” in production, it’s a hard stop on the development server/builds.

Try to run a build with: ember build —environment=production

And see what happens.

5

Compiling in production mode definitely helps the situation. Instead of the entire app being dead, it seems to be more localized to the components where the error occurred. Makes sense that there is no way to recover 100% from errors.

To work around this, I can install a global error handler, then display a prompt to the user that says that an error occurred and a refresh is required.

Thanks for your help! Marshall