ReferenceError: talk is not defined

Errar é humano. Mas o que fazer para evitar erros nos nossos apps React? Algumas boas práticas podem fazer toda a diferença para a experiência do usuário.

Transcript

1. ReferenceError
   talk is not defined
   

   View Slide

2. @hugobessaa
   

   View Slide

3. Exception
   

   View Slide

4. function getPage(limit, page, data) {
   let firstIndex = (page - 1) * limit;
   let lastIndex = firstIndex + limit;
   let pageData = data.slice(firstIndex, lastIndex);
   if (pageData.length === 0) {
   throw new Error(`Page ${page} does not exist`);
   }
   return pageData;
   }
   

   View Slide

5. function getPage(limit, page, data) {
   let firstIndex = (page - 1) * limit;
   let lastIndex = firstIndex + limit;
   let pageData = data.slice(firstIndex, lastIndex);
   if (pageData.length === 0) {
   throw new Error(`Page ${page} does not exist`);
   }
   return pageData;
   }
   

   View Slide

6. View Slide

7. getPage()
   

   View Slide

8. render()
   getData()
   getPage()
   

   View Slide

9. render()
   getData()
   getPage()
   

   View Slide

10. render()
    getData()
    getPage()
    

    View Slide

11. render()
    getData()
    getPage()
    

    View Slide

12. render()
    getData()
    getPage()
    

    View Slide

13. render()
    getData()
    getPage()
    

    View Slide

14. Unhandled Exception
    

    View Slide

15. Vão terminar toda a call stack
    

    View Slide

16. function getPage(limit, page, data) {
    let firstIndex = (page - 1) * limit;
    let lastIndex = firstIndex + limit;
    let pageData = data.slice(firstIndex, lastIndex);
    if (pageData.length === 0) {
    throw new Error(`Page ${page} does not exist`);
    }
    return pageData;
    }
    

    View Slide

17. function getPage(limit, page, data) {
    let firstIndex = (page - 1) * limit;
    let lastIndex = firstIndex + limit;
    let pageData = data.slice(firstIndex, lastIndex);
    if (pageData.length === 0) {
    throw new Error(`Page ${page} does not exist`);
    }
    return pageData;
    }
    

    View Slide

18. function getPage(limit, page, data) {
    let firstIndex = (page - 1) * limit;
    let lastIndex = firstIndex + limit;
    let pageData = data.slice(firstIndex, lastIndex);
    if (pageData.length === 0) {
    throw new Error(`Page ${page} does not exist`);
    }
    return pageData;
    }
    

    View Slide

19. function getPage(limit, page, data) {
    let firstIndex = (page - 1) * limit;
    let lastIndex = firstIndex + limit;
    let pageData = data.slice(firstIndex, lastIndex);
    if (pageData.length === 0) {
    throw new Error(`Page ${page} does not exist`);
    }
    return pageData;
    }
    

    View Slide

20. function getPage(limit, page, data) {
    let firstIndex = (page - 1) * limit;
    let lastIndex = firstIndex + limit;
    let pageData = data.slice(firstIndex, lastIndex);
    if (pageData.length === 0) {
    throw new Error(`Page ${page} does not exist`);
    }
    return pageData;
    }
    

    View Slide

21. function getPage(limit, page, data) {
    let firstIndex = (page - 1) * limit;
    let lastIndex = firstIndex + limit;
    let pageData = data.slice(firstIndex, lastIndex);
    if (pageData.length === 0) {
    throw new Error(`Page ${page} does not exist`);
    }
    return pageData;
    }
    

    View Slide

22. async function render(user) {
    let data = await getData(user);
    let pageData = getPage(10, 1, data);
    return renderPage(pageData);
    }
    

    View Slide

23. 
    
    
    
    

    View Slide

24. Unhandled Exception
    

    View Slide

25. async function render(user) {
    let data = await getData(user);
    try {
    let pageData = getPage(10, 1, data);
    return renderPage(pageData);
    } catch (e) {
    console.error(e);
    return renderEmptyPage();
    }
    }
    

    View Slide

26. async function render(user) {
    let data = await getData(user);
    try {
    let pageData = getPage(10, 1, data);
    return renderPage(pageData);
    } catch (e) {
    console.error(e);
    return renderEmptyPage();
    }
    }
    

    View Slide

27. function getPage(limit, page, data) {
    let firstIndex = (page - 1) * limit;
    let lastIndex = firstIndex + limit;
    let pageData = data.slice(firstIndex, lastIndex);
    if (pageData.length === 0) {
    throw new Error(`Page ${page} does not exist`);
    }
    return pageData;
    }
    

    View Slide

28. async function render(user) {
    let data = await getData(user);
    try {
    let pageData = getPage(10, 1, data);
    return renderPage(pageData);
    } catch (e) {
    console.error(e);
    return renderEmptyPage();
    }
    }
    

    View Slide

29. async function render(user) {
    let data = await getData(user);
    try {
    let pageData = getPage(10, 1, data);
    return renderPage(pageData);
    } catch (e) {
    console.error(e);
    return renderEmptyPage();
    }
    }
    

    View Slide

30. async function render(user) {
    let data = await getData(user);
    try {
    let pageData = getPage(10, 1, data);
    return renderPage(pageData);
    } catch (e) {
    console.error(e);
    return renderEmptyPage();
    }
    }
    

    View Slide

31. async function render(user) {
    let data = await getData(user);
    try {
    let pageData = getPage(10, 1, data);
    return renderPage(pageData);
    } catch (e) {
    console.error(e);
    return renderEmptyPage();
    }
    }
    

    View Slide

32. 
    
    
    data={monitoredRockets}
    layout='grid'
    />
    
    
    

    View Slide

33. 
    
    
    data={monitoredRockets}
    layout='grid'
    />
    
    
    

    View Slide

34. 
    
    
    try {
    data={monitoredRockets}
    layout='grid'
    />
    } catch (e) {
    
    }
    
    
    

    View Slide

35. 
    
    
    data={monitoredRockets}
    layout='grid'
    />
    
    
    Declarativo
    

    View Slide

36. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

37. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

38. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

39. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

40. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

41. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

42. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

43. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

44. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

45. View Slide

46. View Slide

47. View Slide

48. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

49. View Slide

50. View Slide

51. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

52. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    Unavailable
    

    View Slide

53. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    

    View Slide

54. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Soyuz-FG
    LEO 6,900
    SSO 4,500
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    

    View Slide

55. class RocketDetails extends Component {
    render() {
    let { title, info } = this.props;
    return (
    
    {title}
    
    {info[0].label}
    {info[0].value}
    {info[1].label}
    {info[1].value}
    
    
    );
    }
    }
    

    View Slide

56. class RocketDetails extends Component {
    static getDerivedStateFromError(error) {
    return { error: true };
    }
    render() {
    let { title, info } = this.props;
    return (
    
    {title}
    
    {info[0].label}
    {info[0].value}
    {info[1].label}
    {info[1].value}
    
    
    

    View Slide

57. if (this.state.error) {
    return Unavailable
    }
    

    View Slide

58. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    Unavailable
    

    View Slide

59. class Search extends Component {
    state = { value: '' };
    render() {
    return (
    
    name='search'
    value={this.state.value}
    onChange={
    (e) => this.setState({
    value: e.target.value
    })
    }
    />
    
    );
    

    View Slide

60. class Search extends Component {
    state = { value: '' };
    render() {
    return (
    
    name='search'
    value={this.state.value}
    onChange={
    (e) => this.setState({
    value: e.target.value
    })
    }
    />
    
    );
    

    View Slide

61. class Search extends Component {
    state = { value: '' };
    render() {
    return (
    
    name='search'
    value={this.state.value}
    onChange={
    (e) => this.setState({
    value: e.target.value
    })
    }
    />
    
    );
    

    View Slide

62. class Search extends Component {
    state = { value: '' };
    render() {
    return (
    
    name='search'
    value={this.state.value}
    onChange={
    (e) => this.setState({
    value: e.target.value
    })
    }
    />
    
    );
    

    View Slide

63. (e) => this.setState({
    value: e.target.value
    })
    }
    />
    
    );
    }
    handleSubmit = (e) => {
    e.preventDefault();
    performSearch({ query: this.state.value });
    };
    }
    

    View Slide

64. (e) => this.setState({
    value: e.target.value
    })
    }
    />
    
    );
    }
    handleSubmit = (e) => {
    e.preventDefault();
    performSearch({ query: this.state.value });
    };
    }
    

    View Slide

65. (e) => this.setState({
    value: e.target.value
    })
    }
    />
    
    );
    }
    handleSubmit = (e) => {
    e.preventDefault();
    performSearch({ query: this.state.value });
    };
    }
    

    View Slide

66. Exceções em event handlers
    precisam de try…catch
    

    View Slide

67. render()
    

    View Slide

68. render() onChange()
    

    View Slide

69. handleSubmit = (e) => {
    e.preventDefault();
    try {
    performSearch({ query: this.state.value });
    } catch (e) {
    this.setState({ error: true });
    }
    };
    

    View Slide

70. Server-side rendering
    

    View Slide

71. View Slide

72. View Slide

73. View Slide

74. try {
    return renderToString();
    } catch (e) {
    console.error(e);
    return undefined
    }
    

    View Slide

75. É assim que fazemos em
    telnyx.com
    

    View Slide

76. View Slide

77. Como monitorar?
    

    View Slide

78. View Slide

79. Sentry.init({
    dsn: 'https://@sentry.io/'
    })
    

    View Slide

80. View Slide

81. View Slide

82. class RocketDetails extends Component {
    static getDerivedStateFromError(error) {
    return { error: true };
    }
    render() {
    let { title, info } = this.props;
    return (
    
    {title}
    
    {info[0].label}
    {info[0].value}
    {info[1].label}
    {info[1].value}
    
    
    

    View Slide

83. class RocketDetails extends Component {
    static getDerivedStateFromError(error) {
    return { error: true };
    }
    componentDidCatch(error, info) {
    console.error(error, info);
    Sentry.captureException(err);
    }
    render() {
    let { title, info } = this.props;
    return (
    
    {title}
    
    {info[0].label}
    

    View Slide

84. View Slide

85. Unhandled Exception
    

    View Slide

86. Uma hora vai acontecer
    

    View Slide

87. Nós podemos diminuir o
    impacto dos erros
    

    View Slide

88. Rockets
    Falcon 9
    LEO 22,800
    GTO 8,300
    Saturn V
    LEO 140,000
    TLI 48,600
    Space Shuttle
    LEO 27,500
    Electron
    SSO 225
    Falcon Heavy
    LEO 63,800
    Search
    Unavailable
    

    View Slide

89. View Slide

90. static getDerivedStateFromError(error) {
    return { error: true };
    }
    componentDidCatch(error, info) {
    console.error(error, info);
    Sentry.captureException(err);
    }
    

    View Slide

91. Não deixe seu usuário ver
    uma tela branca
    

    View Slide

92. View Slide

93. View Slide

94. telnyx.com/careers
    

    View Slide

95. 
    @hugobessaa
    

    View Slide