improve error message for components

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Fixed
+- [#1045](https://github.com/plotly/dash/pull/1045) Error messages when providing an incorrect property to a component have been improved: they now specify the component type, library, version, and ID (if available).
+
 ## [1.7.0] - 2019-11-27
 ### Added
 - [#967](https://github.com/plotly/dash/pull/967) Add support for defining

dash/development/base_component.py

@@ -86,18 +86,39 @@ def __init__(self, **kwargs):
             k_in_wildcards = any(
                 [k.startswith(w) for w in self._valid_wildcard_attributes]
             )
+            # e.g. "The dash_core_components.Dropdown component (version 1.6.0)
+            # with the ID "my-dropdown"
+            try:
+                error_string_prefix = 'The `{}.{}` component (version {}){}'.format(
+                    self._namespace,
+                    self._type,
+                    getattr(__import__(self._namespace), '__version__', 'unknown'),
+                    ' with the ID "{}"'.format(kwargs['id'])
+                    if 'id' in kwargs else ''
+                )
+            except ImportError:
+                # Our tests create mock components with libraries that
+                # aren't importable
+                error_string_prefix = 'The `{}` component{}'.format(
+                    self._type,
+                    ' with the ID "{}"'.format(kwargs['id'])
+                    if 'id' in kwargs else ''
+                )
+
             if not k_in_propnames and not k_in_wildcards:
                 raise TypeError(
-                    "Unexpected keyword argument `{}`".format(k)
-                    + "\nAllowed arguments: {}".format(
+                    "{} received an unexpected keyword argument: `{}`".format(
+                        error_string_prefix, k
+                    ) + "\nAllowed arguments: {}".format(
                         # pylint: disable=no-member
                         ", ".join(sorted(self._prop_names))
                     )
                 )
 
             if k != "children" and isinstance(v, Component):
                 raise TypeError(
-                    "Component detected as a prop other than `children`\n" +
+                    error_string_prefix +
+                    " detected a Component for a prop other than `children`\n" +
                     "Did you forget to wrap multiple `children` in an array?\n" +
                     "Prop {} has value {}\n".format(k, repr(v))
                 )

tests/unit/development/test_base_component.py

@@ -435,3 +435,46 @@ def test_debc026_component_not_children():
         with pytest.raises(TypeError):
             # If you forget the `[]` around children you get this:
             html.Div(children[0], children[1], children[2], children[3])
+
+
+def test_debc027_component_error_message():
+    with pytest.raises(TypeError) as e:
+        Component(asdf=True)
+    assert str(e.value) == (
+        "The `TestComponent` component received an unexpected " +
+        "keyword argument: `asdf`\nAllowed arguments: a, children, " +
+        "id, style"
+    )
+
+    with pytest.raises(TypeError) as e:
+        Component(asdf=True, id='my-component')
+    assert str(e.value) == (
+        "The `TestComponent` component " +
+        "with the ID \"my-component\" received an unexpected " +
+        "keyword argument: `asdf`\nAllowed arguments: a, children, " +
+        "id, style"
+    )
+
+    with pytest.raises(TypeError) as e:
+        html.Div(asdf=True)
+    assert str(e.value) == (
+        "The `dash_html_components.Div` component " +
+        "(version {}) ".format(html.__version__) +
+        "received an unexpected " +
+        "keyword argument: `asdf`\n" +
+        "Allowed arguments: {}".format(
+            ', '.join(sorted(html.Div()._prop_names))
+        )
+    )
+
+    with pytest.raises(TypeError) as e:
+        html.Div(asdf=True, id='my-component')
+    assert str(e.value) == (
+        "The `dash_html_components.Div` component " +
+        "(version {}) ".format(html.__version__) +
+        "with the ID \"my-component\" received an unexpected " +
+        "keyword argument: `asdf`\n" +
+        "Allowed arguments: {}".format(
+            ', '.join(sorted(html.Div()._prop_names))
+        )
+    )