redraw_batteries - v1.1.0

redraw/batteries/error_boundary

By default, if your application throws an error during rendering, React will remove its UI from the screen. To prevent this, you can wrap a part of your UI into an Error Boundary. An Error Boundary is a special component that lets you display some fallback UI instead of the part that crashed—for example, an error message.

error_boundary.children(my_render())
|> error_boundary.fallback(my_fallback())
|> error_boundary.on_error(send_to_error_logger)
|> error_boundary.render

React Reference

Types

Error

</>

Error objects are thrown when runtime errors occur. The Error object can also be used as a base object for user-defined exceptions. You should almost never encounter them in Gleam, but when interacting with foreign code, some errors could be missed, and throw. In that case, the error boundary will be able to catch them.

MDN Reference

pub type Error {
  Error(
    name: String,
    message: String,
    cause: option.Option(dynamic.Dynamic),
    stack: option.Option(String),
  )
}

Constructors 

  • Error(
  name: String,
  message: String,
  cause: option.Option(dynamic.Dynamic),
  stack: option.Option(String),
)

    Arguments

    name

    Represents the name for the type of error. For Error.prototype.name, the initial value is "Error". Subclasses like TypeError and SyntaxError provide their own name properties.

    message

    Error message. For user-created Error objects, this is the string provided as the constructor’s first argument.

    cause

    Error cause indicating the reason why the current error is thrown — usually another caught error. For user-created Error objects, this is the value provided as the cause property of the constructor’s second argument.

    stack

    A non-standard property for a stack trace.

ErrorInfo

</>

Additional informations coming from React.

pub type ErrorInfo {
  ErrorInfo(
    component_stack: option.Option(String),
    owner_stack: option.Option(String),
  )
}

Constructors 

  • ErrorInfo(
  component_stack: option.Option(String),
  owner_stack: option.Option(String),
)

    Arguments

    component_stack

    Captures which component contained the exception, and its ancestors.

    owner_stack

    Captures the current owner stack in development as string if available.

Props

</> 
pub type Props {
  Props(
    children: redraw.Element,
    fallback: redraw.Element,
    on_error: fn(Error, ErrorInfo) -> Nil,
    on_raw_error: fn(dynamic.Dynamic, dynamic.Dynamic) -> Nil,
  )
}

Constructors 

  • Props(
  children: redraw.Element,
  fallback: redraw.Element,
  on_error: fn(Error, ErrorInfo) -> Nil,
  on_raw_error: fn(dynamic.Dynamic, dynamic.Dynamic) -> Nil,
)

    Arguments

    children

    Children wrapped by the error boundary. If the children throws an error, then fallback will be displayed, or nothing if fallback has not been provided.

    fallback

    Fallback element displayed if children throws an error. If not provided, the error boundary will simply display nothing.

    on_error

    Error catcher, to detect errors and get them to your error logger, or whatever else you want to do. If your error logger expect native Error and ErrorInfo, use on_raw_error instead.

    on_raw_error

    Error catcher, to detect errors and get them to your error logger. on_raw_error provides native Error and ErrorInfo in case you need them for any integration needs.

Values

children

</> 
pub fn children(children: redraw.Element) -> Props

Children to display when the error boundary did not catch any errors.

error_boundary.children(my_render())
|> error_boundary.render

fallback

</> 
pub fn fallback(props: Props, fallback: redraw.Element) -> Props

Fallback to display when the error boundary did catch an error. Not setting fallback will simply not display anything on error catching.

error_boundary.children(my_render())
|> error_boundary.fallback(my_fallback())
|> error_boundary.render

on_error

</> 
pub fn on_error(
  props: Props,
  on_error: fn(Error, ErrorInfo) -> Nil,
) -> Props

Handler running after an error has been caught. Use it to message an error logger, or change behaviour in the application. If you need the raw native Error and ErrorInfo (for integration needs for example) use on_raw_error.

error_boundary.children(my_render())
|> error_boundary.on_error(fn (error, info) {
  send_to_error_logger(
    error.name,
    error.message,
    info.component_stack,
  )
})
|> error_boundary.render

on_raw_error

</> 
pub fn on_raw_error(
  props: Props,
  on_raw_error: fn(dynamic.Dynamic, dynamic.Dynamic) -> Nil,
) -> Props

Handler running after an error has been caught. Use it to message an error logger, or change behaviour in the application. Use it if you need to access the raw native Error and ErrorInfo.

error_boundary.children(my_render())
|> error_boundary.on_raw_error(datadog_send)
|> error_boundary.render

render

</> 
pub fn render(props: Props) -> redraw.Element

Render the error boundary. The error boundary will not be visible, but will instead display its children, or the fallback on error.

error_boundary.children(my_render())
|> error_boundary.fallback(my_fallback())
|> error_boundary.on_error(send_to_error_logger)
|> error_boundary.render
✨ Search Document